| 必应地图api文档，微软必应地图web开发版详解，可以在国内使用国外地图 | 您所在的位置：网站首页 › web地图开发 › 必应地图api文档，微软必应地图web开发版详解，可以在国内使用国外地图 |
必应地图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 |
【本文地址】