js 必应地图怎么自定义搜索工具，或者自身搜索工具点击搜索结果是重置地图

Question

现在必应地图启用了搜索工具时，点击搜索按钮或者回车会自动跳转到必应地图官网，无法对我当前页生成的地图重置中心点，导致我无法直接获取搜索结果的经纬度，项目需要搜索后点击搜索结果获取结果经纬度的同时以搜索结果的经纬度为中心点重置地图，因为客户需要在自己的地区设置标记，不可能去官网搜索后F12查看应用看本地内存才获取到经纬度，这样太麻烦了

let map = null
map = new Microsoft.Maps.Map(document.getElementById('myMap'),{
      // 启用搜索（这里是必应自带的搜索工具，搜索后回车或者点击搜索按钮、搜索结果会跳转到必应地图官方地图，需要搜索时不跳转或者
      // 点击搜搜结果时不跳转,点击搜索结果时以搜索结果经纬度为中心点重置地图）
      showSearchBar: true
}); 
Microsoft.Maps.Events.addHandler(map, 'click', displayInfo); 

function displayInfo(e){
    //若点击到地图的标记上，而非地图上
    var loc;
    if (e.targetType == "pushpin") {
        loc = e.target.getLocation();
    }
    //若点击到地图上
    else {
        var point = new Microsoft.Maps.Point(e.pageX, e.pageY);
        loc = e.target.tryPixelToLocation(point, Microsoft.Maps.PixelReference.page);
    }
        // 点击地图获取当前点击位置的经纬度
    alert(loc.latitude+", "+loc.longitude);
}


//  自定义搜索工具
function customsSearch(map){
    // 此处代码该怎么写,或者上方的官方自带的工具怎么优化
}

Answer 1

自定义个搜索控件

map = new Microsoft.Maps.Map('#mapContainer', {
                credentials: 'MAPS_API_KEY',
                center: new Microsoft.Maps.Location(47.6062, -122.3321),
                zoom: 10
            });

            // 创建自定义搜索控件
            var searchManager = new Microsoft.Maps.Search.SearchManager(map);

            // 绑定搜索按钮点击事件
            document.getElementById('searchButton').addEventListener('click', function () {
                var searchText = document.getElementById('searchInput').value;
                searchLocation(searchText);
            });

            function searchLocation(searchText) {
                var searchRequest = {
                    where: searchText,
                    callback: function (r) {
                        if (r && r.results && r.results.length > 0) {
                            var location = r.results[0].location;
                            map.setView({ center: location, zoom: 15 });

                            // 在地图上添加标记
                            var markerAdd= new Microsoft.Maps.Pushpin(location);
                            map.entities.push(markerAdd);
                        } else {
                            alert('找不到结果');
                        }
                    },
                    errorCallback: function (e) {
                        alert('出错了: ' + e.message);
                    }
                };

                searchManager.geocode(searchRequest);
            }