最近,公司項目要求在頁面中嵌入地圖,需求還算簡單,但是由於必須具備響應式(主要是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