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

 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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM