BingMap(必应地图)学习一

密钥申请

http://www.bingmap.cn/guide/db765008-dafe-11e8-a995-d46d6d978bfa?module=doc
申请完毕，查看密钥

案例/API

http://www.bingmap.cn/demos/cd768d14-dafe-11e8-a8da-d46d6d978bfa?module=demo
http://www.bingmap.cn/guide/de18b982-dafe-11e8-8b87-d46d6d978bfa?module=doc

隐藏logo/地图信息

 <style type='text/css'>.bm_bottomLeftOverlay{display: none!important;visibility: hide!important;}</style>

自己做了个小案例

<!DOCTYPE html>
<html><head><title>sdsloadmultipleboundariesHTML</title><meta http-equiv='Content-Type' content='text/html; charset=utf-8' /><style type='text/css'>body {margin: 0;padding: 0;overflow: hidden;font-family: 'Segoe UI', Helvetica, Arial, Sans-Serif;}#myMap {width: 100%;height: 100%;float: left;}.bm_bottomLeftOverlay{display: none!important;visibility: hide!important;}</style>
</head><body>
<div id='myMap'></div>
<script type='text/javascript'>var h = [30.320730,30.203730,30.20730,30.320730];var s = [120.106659,120.100659,120.000659,120.006659];var infobox,tooltip;var htmltext = '<div style="border:0px;padding:3px;border-radius:10px;border:1px solid #00F;display:inline-block;height:1%;width:90px; color: rgb(255, 255, 255); background: rgb(200, 118, 145);">{title}</div>';function loadMapScenario() {var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {/* 如果已经在URL中传递，则无需设置凭据 */zoom: 10,center: new Microsoft.Maps.Location(30.320730, 120.106659)});//创建位置数组以获得边界var places = ['余杭区', '西湖区', '上城区', '江干区','拱墅区','下城区','滨江区','萧山区'];// • AdminDivision1：国家/地区级别的第一个行政级别，例如州或省。// • AdminDivision2：国家/地区级别的第二个行政级别，例如县。// • CountryRegion：国家或地区。// • Neighborhood：人口稠密的地方的一部分，通常是众所周知的地方，但边界模糊。// • PopulatedPlace：人类居住的集中区域，如城市，城镇或村庄。// • Postcode1：最小的邮政编码类别，例如zip code。 （大概是国际邮政编码之类的）// • Postcode2：Postcode1之后的下一个最大邮政编码类别，它是通过聚合Postcode1区域创建的。// • Postcode3：通过聚合Postcode2区域创建的Postcode2之后的下一个最大邮政编码类别。// • Postcode4：通过聚合Postcode3区域创建的Postcode3之后的下一个最大邮政编码类别。var geoDataRequestOptions = {entityType: 'PopulatedPlace',//人类居住的集中区域，如城市，城镇或村庄。getAllPolygons: true};Microsoft.Maps.loadModule('Microsoft.Maps.SpatialDataService', function () {//使用GeoData API管理器获取边界Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(places, geoDataRequestOptions,map,function (data) {if (data.results && data.results.length > 0) {var poly = data.results[0].Polygons[0];map.entities.push(poly);//设置事件Microsoft.Maps.Events.addHandler(poly, 'mouseover', PolygonsMouseover);Microsoft.Maps.Events.addHandler(poly, 'mouseout', PolygonsMouseout);Microsoft.Maps.Events.addHandler(poly, 'click', PolygonsClick);}},function errCallback(callbackState, networkStatus, statusMessage) {console.log(callbackState);console.log(networkStatus);console.log(statusMessage);});});//鼠标悬停在多边形上触发function PolygonsMouseover(e) {e.target.setOptions({fillColor: 'rgba(255, 20, 147, 0.4)', strokeColor: 'rgba(0, 100, 200, 1)',strokeThickness: 1 });}//鼠标移除多边形覆盖区域时触发function PolygonsMouseout(e) {e.target.setOptions({fillColor: "rgba(90, 255, 150, 0.4)", strokeColor: "rgba(0, 100, 200, 1)",strokeThickness: 1 });}//鼠标点击覆盖区域function PolygonsClick(e) {//视图定位设置map.setView({center : e.location , zoom : 12});zoomMap();}//完成地图视图更新后，触发该事件。 当视图没变，但视图帧发生变化时也会触发该事件。Microsoft.Maps.Events.addHandler(map, 'viewchangeend', zoomMap);//视图变化监控function zoomMap(){//区域折线覆盖物显示隐藏var poly_arr = map.entities._primitives;for (var i = 0; i < poly_arr.length; i++) {var poly_objeck = poly_arr[i];if(map.getZoom() > 11){if(poly_objeck.geometryType == 1){poly_objeck.setOptions({visible:true});// var lat = new Microsoft.Maps.Location(poly_objeck.geometry.y, poly_objeck.geometry.x);// //提示信息初始化// tooltip = new Microsoft.Maps.Infobox(lat, {//     showPointer: false,//     showCloseButton: false,//     offset: new Microsoft.Maps.Point(-55, 15),//     htmlContent: htmltext.replace('{title}', "酒店"+(i+1)),//     visible: true// });// tooltip.setMap(map);}else if(poly_objeck.geometryType == 3){poly_objeck.setOptions({visible:false});}}else{if(poly_objeck.geometryType == 1){poly_objeck.setOptions({visible:false});}else if(poly_objeck.geometryType == 3){poly_objeck.setOptions({visible:true});}}}}//信息窗口初始化infobox = new Microsoft.Maps.Infobox(map.getCenter(), {visible: false});infobox.setMap(map);//标记for (var i = 0; i < h.length; i++) {var Location = new Microsoft.Maps.Location(h[i], s[i]);//标记初始化var pin = new Microsoft.Maps.Pushpin(Location);// {title : "我是地址"+i,subTitle: 'City Center',text: ''+i}// 设置标记信息pin.metadata = {title: '小保健 ' + (i + 1),description: 'Discription' + (i + 1),visible: true};// 给标记设置点击事件触发函数显示对应窗口信息Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);//鼠标停留在点标记上时，触发该事件Microsoft.Maps.Events.addHandler(pin, 'mouseover', function (e) {e.target.setOptions({color: 'red'});});//鼠标悬停在点标记上方，并单击鼠标左键时，触发该事件。Microsoft.Maps.Events.addHandler(pin, 'mousedown', function (e) {e.target.setOptions({color: 'blue'});});//当鼠标移除点标记覆盖区域时，触发该事件Microsoft.Maps.Events.addHandler(pin, 'mouseout', function (e) {e.target.setOptions({color: 'purple'});});//添加标记map.entities.push(pin);}//信息窗口function pushpinClicked(e) {console.log(e);if (e.target.metadata) {infobox.setOptions({location: e.target.getLocation(),title: e.target.metadata.title,description: e.target.metadata.description,visible: true//显示});}}console.log(map);console.log(map.entities._primitives);// //路线// Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {//     //Create an instance of the directions manager.//     directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);//     // //Create waypoints to route between.//     // var seattleWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: 'hangzhou' , location: new Microsoft.Maps.Location(h[2], s[2]) });//     // directionsManager.addWaypoint(seattleWaypoint);//     // var workWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: 'shanghai' , location: new Microsoft.Maps.Location(h[3], s[3])});//     // directionsManager.addWaypoint(workWaypoint);//     //创建两点之间的路线。//     var seattleWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: '余杭区' });//     directionsManager.addWaypoint(seattleWaypoint);//     var workWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: '上城区' });//     directionsManager.addWaypoint(workWaypoint);////     //将事件处理程序添加到路线管理器。//     // Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError', directionsError);//     Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', directionsUpdated);////     directionsManager.calculateDirections();// });// function directionsUpdated(e) {//     //获取当前路线索引。//     var routeIdx = directionsManager.getRequestOptions().routeIndex;//     //获取路线距离，四舍五入到小数点后两位。//     var distance = Math.round(e.routeSummary[routeIdx].distance * 100)/100;//     //获取用于计算路线的距离单位。//     var units = directionsManager.getRequestOptions().distanceUnit;//     var distanceUnits = '';//     if (units == Microsoft.Maps.Directions.DistanceUnit.km) {//         distanceUnits = 'km'//     } else {//         //必须以英里为单位//         distanceUnits = 'miles'//     }//     //时间以秒为单位，转换为分钟并四舍五入。//     var time = Math.round(e.routeSummary[routeIdx].timeWithTraffic / 60);//     console.log('Distance: ' + distance + ' ' + distanceUnits + '   Time with Traffic: ' + time + ' minutes');// }}
</script>
<script type='text/javascript'src='https://www.bing.com/api/maps/mapcontrol?key=AkPqQjrEeSNHwv78SOc9gpDoPLIVylos653GaNqCFN_DHv_RwvLMmeOtRbrfUoAZ&callback=loadMapScenario&mkt=zh-cn&setlang=zh-cn' asyncdefer></script>
</body></html>

有些不能搞的功能，可以试试这个思路，多个地图嵌套在一个页面里

感谢观看

BingMap(必应地图)学习一相关推荐

必应地图控件（WPF版）添加中国地图
Bingmap for WPF control 没有直接提供中国地图,但是通过必应地图(中国)知道,时存在必应中国地图,经过一番百度后,找到解决办法.通过添加新的地图图层来解决问题,用新的图层覆盖原有 ...
Bing必应地图中国API-画线与添加多边形
Bing必应地图中国API-画线与添加多边形 2011-05-24 14:31:20| 分类: Bing&Google|字号订阅在必应地图上画线的功能应用也很广泛:显示从出发地到目的地的行 ...
wordpress地图_如何在WordPress中嵌入必应地图
wordpress地图 Do you want to embed Bing Maps on your WordPress website? If you are looking for a Googl ...
Unity 3D为策略游戏创建地图学习教程
MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz,2 Ch 语言:英语+中英文字幕(根据原英文字幕机译更准确) |时长:30节课(7h 42m) |大小:5 GB 含项目文 ...
VectorMapNet | 端到端的矢量化高精地图学习
作者 | wanghy 源自 | 知乎编辑 | 汽车人点击下方卡片,关注"自动驾驶之心"公众号 ADAS巨卷干货,即可获取论文:arxiv.org/abs/2206.0892 ...
Bing必应地图中国API一显示地图 (转) 做人要厚道
Bing必应地图中国API一显示地图 2011-05-24 14:27:31| 分类: Bing&Google|字号订阅微软必应地图中国地图API发布已经有10天了,考虑到网上现有的SD ...
谷歌，高德，必应地图中英文显示
1. 谷歌英文显示 https://maps.googleapis.com/maps/api/js?key=youkey&sensor=false&libraries=places&a ...
Android端地图,百度地图学习（II）-Android端的定位
哎,经历了小编的最近时间的研究,我的百度定位终于成功啦,刹那间觉得自己萌萌哒啦(-￣▽￣)- 话不多说,直接进入正题: 首先,我们来看一下效果: [分析定位原理] [编码分析] 2)增加布局信息:此处 ...
如何在必应地图上创建叠加
目录介绍背景技术使用代码介绍地图已经从纸质小册子中走了很长一段路,你会放在手套箱里,为公路旅行做准备.如今,地图程序为我们喜爱的许多应用程序提供支持,并使导航或跟踪服务提供商在前往某个位置 ...

BingMap(必应地图)学习一

密钥申请

案例/API

隐藏logo/地图信息

自己做了个小案例

有些不能搞的功能，可以试试这个思路，多个地图嵌套在一个页面里

感谢观看

BingMap(必应地图)学习一相关推荐

最新文章

热门文章