必应地图api文档，微软必应地图web开发版详解，可以在国内使用国外地图

时间：2024-03-07 09:36:51

最近，公司项目要求在页面中嵌入地图，需求还算简单，但是由于必须具备响应式（主要是pc和移动端），而且由于公司业务是全球性的，要支持国外地点搜索。考虑到百度，腾讯，高德等等国内地图无法显示国外数据，谷歌在国内基本被废，对于全球通用的地图，目测只有微软的必应可以支持了（那些国外小厂的地图插件暂且不提）。虽然必应地图没有谷歌那么强大，但也基本能满足业务需求。所以在此做个简单的记录，方便以后查阅，也方便与我有同样需求的人参考。如有不对，欢迎指正。

官网地址：https://www.bingmapsportal.com/?lc=1033

网上有两个必应地图文档，这个文档更适合web开发，更加人性化，并非是sdk版，我也更加喜欢这个版本的api文档

1.申请一个密钥key：https://www.bingmapsportal.com/Application

 申请成功后，就可以在文档中查看效果：

官方api文档地址：https://www.bingmapsportal.com/ISDK/AjaxV7#SearchModule2

 Create map:创建一个地图，需要填入你刚申请的key：

 1 map = new Microsoft.Maps.Map(document.getElementById(\'SDKmap\'), {credentials: \'Your Bing Maps Key\'}); 

Map with bounding box:带有边界的地图,需要在配置里填上边界的坐标即可：

var boundingBox = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(47.618594, -122.347618), new Microsoft.Maps.Location(47.620700, -122.347584), new Microsoft.Maps.Location(47.622052, -122.345869)); 
map = new Microsoft.Maps.Map(document.getElementById(\'SDKmap\'), {credentials: \'Your Bing Maps Key\', bounds: boundingBox});

 

Map with center:指定地图的中心，需要填入坐标值，其中zoom为地图缩放比例

map = new Microsoft.Maps.Map(document.getElementById(\'SDKmap\'), {credentials: \'Your Bing Maps Key\', center: new Microsoft.Maps.Location(47.609771, -122.2321543125), zoom: 8});

 

 

Map with Bird\'s eye view:初始化时就显示鸟瀚图，zoom调整到最大值，并在缩放中始终显示实景图：

map = new Microsoft.Maps.Map(document.getElementById(\'SDKmap\'), {credentials: \'Your Bing Maps Key\', center: new Microsoft.Maps.Location(47.6215, -122.349329), mapTypeId: Microsoft.Maps.MapTypeId.birdseye, zoom: 18});

 

Add default pushpin:图钉，可以在地图上指定地点使用一个或多个图钉，并且图钉的样式有多种选择，例如：

map.entities.clear(); 
var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), null); 
map.entities.push(pushpin);

 

Infobox:提示框，可以在地图中弹出提示框,并且提示框的大小高度，样式都可以调整，例如：

map.entities.clear(); 
 var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), null);    
 map.entities.push(defaultInfobox);

Find directions:路线,可以在地图上标明两地点的路线图：

var start= \'Seattle, wa\'; var end= \'Portland, OR\'; 
map.getCredentials(function(credentials) {
var routeRequest = \'https://dev.virtualearth.net/REST/v1/Routes?wp.0=\' + start + \'&wp.1=\' + end + \'&routePathOutput=Points&output=json&jsonp=RouteCallback&key=\' + credentials;
var mapscript = document.createElement(\'script\'); 
mapscript.type = \'text/javascript\'; 
mapscript.src = routeRequest; 
document.getElementById(\'SDKmap\').appendChild(mapscript); 
});

Get location:定位,可以获取用户的坐标，并可以加入回调(由于这里我用了vpn，所以把我定位到了日本了):

map.entities.clear(); 
var geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(map);  
geoLocationProvider.getCurrentPosition(); 
displayAlert(\'Current location set, based on your browser support for geo location API\');

Directions module:更强大的路线标识,可以作为路线参考：

function createDrivingRoute()
{
if (!directionsManager) { createDirectionsManager(); }
directionsManager.resetDirections();
// Set Route Mode to driving 
directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });
var seattleWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: \'Seattle, WA\' });
directionsManager.addWaypoint(seattleWaypoint);
var tacomaWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: \'Tacoma, WA\', location: new Microsoft.Maps.Location(47.255134, -122.441650) });
directionsManager.addWaypoint(tacomaWaypoint);
// Set the element in which the itinerary will be rendered
directionsManager.setRenderOptions({ itineraryContainer: document.getElementById(\'directionsItinerary\') });
displayAlert(\'Calculating directions...\');
directionsManager.calculateDirections();
}

if (!directionsManager)
{
Microsoft.Maps.loadModule(\'Microsoft.Maps.Directions\', { callback: createDrivingRoute });
}
else
{
createDrivingRoute();
}

Find a location by address:通过地点来获取位置，这里只需要写入地点名，不需要坐标也可以：

function geocodeRequest() 
{ 
    createSearchManager(); 
    var where = \'Denver, CO\'; 
    var userData = { name: \'Maps Test User\', id: \'XYZ\' }; 
    var request = 
    { 
        where: where, 
        count: 5, 
        bounds: map.getBounds(), 
        callback: onGeocodeSuccess, 
        errorCallback: onGeocodeFailed, 
        userData: userData 
    }; 
    searchManager.geocode(request); 
} 
function onGeocodeSuccess(result, userData) 
{ 
    if (result) { 
        map.entities.clear(); 
        var topResult = result.results && result.results[0]; 
        if (topResult) { 
            var pushpin = new Microsoft.Maps.Pushpin(topResult.location, null); 
            map.setView({ center: topResult.location, zoom: 10 }); 
            map.entities.push(pushpin); 
        } 
    } 
} 
function onGeocodeFailed(result, userData) { 
    displayAlert(\'Geocode failed\'); 
} 

if (searchManager) 
{ 
    geocodeRequest(); 
} 
else 
{ 
    Microsoft.Maps.loadModule(\'Microsoft.Maps.Search\', { callback: geocodeRequest }); 
}

 

 注意，还有更多更强大的功能，这里无法一一列举出来，只是举例了开发常用到的api，用法也很简单，如有不全面的，请移步到官方api查看，若发现有错误之处，欢迎留言。

官方文档：https://www.bingmapsportal.com/ISDK/AjaxV7#CreateMap1

相关文章