本文共 3113 字，大约阅读时间需要 10 分钟。

运行效果

实现

cesium原生自带的geocoder使用的Bing地图，国内很多地方搜索不到，而且会出现英文检索。

代码

.multiple_search {
       height: 32px;    width: 290px;    position: absolute;    top: 8px;    right: 85px;    overflow: hidden;}.multiple_search .search_input {
       border-radius: 5px;    height: 30px;    width: 258px;    border: 1px solid #303336;    background-color: rgba(48, 51, 54, .5);    font-size: 15px;    position: absolute;    top: 0;    left: 258px;    text-indent: 10px;    padding: 0;    color: #fff;}.multiple_search .search_input::-webkit-input-placeholder {
    /*Webkit browsers*/    color: #fff;}.multiple_search .search_input:-moz-placeholder {
    /*Mozilla Firefox 4 to 8*/    color: #fff;}.multiple_search .search_input::moz-placeholder {
    /*Mozilla Firefox 19+*/    color: #fff;}.multiple_search .search_input:-ms-input-placeholder {
    /*Internet Explorer 10+*/    color: #fff;}.multiple_search .search_input:focus {
       outline: none;    border: 1px solid #303336;    background-color: rgba(48, 51, 54, .5);}.multiple_search .search_button {
       border-radius: 5px;    height: 32px;    width: 32px;    background: #303336 url(../../Img/home/搜索.png);    border: 1px solid #303336;    background-size: cover;    position: absolute;    right: 0;    top: 0;    z-index: 999;    cursor: pointer;}.multiple_search .search_button:hover {
       color: #fff;    fill: #fff;    background: #48b url(../../Img/home/搜索.png);    background-size: cover;    border-color: #aef;    box-shadow: 0 0 8px #fff;}

function initSearch() {
       let $button = $('#search-button');    let $input = $('#search-input');    let $search = $('#multiple_search');    $button.on({
           mouseenter: function f() {
               $input.animate({
                   left: 0            }, 700);            if (parseInt($input.css('left')) !== 0) {
                   $input.val('');            }        },        click: function f1() {
               let place = $input.val();            if (place === '') {
                   alert('请输入位置！')            } else {
                   $.ajax({
                       url: `http://api.tianditu.gov.cn/geocoder?ds={"keyWord":"${
     place}"}&tk=${
     天地图key}`,                    type: 'get',                    async: false,                    success: function (response) {
                           let result = JSON.parse(response).location;                        if (result === undefined) {
                               alert('无法获取' + place + '地理位置！');                        } else {
                                                          viewer.camera.flyTo({
                                   destination: Cesium.Cartesian3.fromDegrees(result.lon, result.lat, 40000),                                duration: 0                            });                        }                    }                });            }        }    });    $search.mouseleave(function () {
           $input.animate({
               left: 258        }, 700);        $input.blur();    });}

转载地址：https://kaisarh.blog.csdn.net/article/details/105762422 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！