必應地圖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