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

最近，公司项目要求在页面中嵌入地图，需求还算简单，但是由于必须具备响应式（主要是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：

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