// demo var defaultColor = 'blue'; var hoverColor = 'red'; var mouseDownColor = 'purple'; var pin = new Microsoft.Maps.Pushpin(map.getCenter(), { color: defaultColor }); map.entities.push(pin); Microsoft.Maps.Events.addHandler(pin, 'mouseover', function (e) { e.target.setOptions({ color: hoverColor }); }); Microsoft.Maps.Events.addHandler(pin, 'mousedown', function (e) { e.target.setOptions({ color: mouseDownColor }); }); Microsoft.Maps.Events.addHandler(pin, 'mouseout', function (e) { e.target.setOptions({ color: defaultColor }); });
给图钉添加hover样式
bing Map 固定锚点
开发人员在使用自定义图钉时遇到的最常见问题之一是，当他们缩放地图时，看起来好像他们的图钉正在漂移到或离开它所要锚定的位置。这是由于图钉选项中的锚点值不正确。锚点指定图像的哪个像素坐标相对于图像的左上角应与图钉位置坐标重叠。
常见配置参考
bing Map 在vue中使用
vue引入bing Map可能会遇到的问题
由于vue一般引用第三方插件是用import的方式进行的，所以的在html中使用script标签引入bing Map SDK会出现两种问题
1.在控制台会报错：Mirosorft is not defined
2.vue-cli会报错：Mirosorft is not defined
这里的原因是由于异步加载，所以在调用"Mirosorft"的时候可能SDK并没有引用成功
解决“Mirosorft is not defined”的错误
文档参考
解决“Mirosorft is not defined”的错误，只要在项目中保证调用地图之前，能够正确引入相关工具类就行了。
// bing map init devTools export default { init: function (){ console.log("初始化bing地图脚本..."); // bing map key const bingUesrKey = '你的bingMap Key'; const BingMap_URL = 'http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=' + bingUesrKey; return new Promise((resolve, reject) => { if(typeof Microsoft !== "undefined") { resolve(Microsoft); return true; } // 插入script脚本 let scriptNode = document.createElement("script"); scriptNode.setAttribute("type", "text/javascript"); scriptNode.setAttribute("src", BingMap_URL); document.body.appendChild(scriptNode); // 等待页面加载完毕回调 let timeout = 0; let interval = setInterval(() => { // 超时10秒加载失败 if(timeout >= 20) { reject(); clearInterval(interval); console.error("bing地图脚本初始化失败..."); } // 加载成功 if(typeof Microsoft !== "undefined") { resolve(Microsoft); clearInterval(interval); console.log("bing地图脚本初始化成功..."); } timeout += 1; }, 500); }); } } // bing map vue import bingMap from './**/bing-map'; bingMap.init() .then((Microsoft) => { console.log(Microsoft) console.log("加载成功...") // 开始地图操作 })
集成bing Map组件到vue中
需要达到的功能
在vue项目中成功加载bing Map （完成）
当点击bing Map的时候，返回点击点的经纬度 （完成）
子组件触发事件返回参数到父组件
当已有经纬度的时候，加载bingMap自动显示其经纬度所在的位置并设置图钉 （待完成）
子组件触发事件返回参数到父组件
实现原理
vue-$meit
核心代码
// 子组件 <template> <div @click="iclick"></div> </template> methods:{ iclick(){ let data = { a:'data' }; this.$emit('ievent', data1, 'data2Str'); } } // 父组件 <i-template @ievent = "ievent"></i-template> methods:{ ievent(...data){ console.log('allData:',data); // data为包含传过来所有数据的数组，第一个元素是对象，第二个元素是字符串 } }
封装bing Map通用组件
// 核心代码 <template> <div> <div></div> </div> </template> <script> import initBingMap from './initMap.js' export default { data () { return { lngNum: null, // 经度 latNum: null, // 纬度 } }, created: function () { let _this = this; initBingMap.init() .then((Microsoft) => { console.log(Microsoft) console.log("加载成功...") _this.initMap(); }) }, methods: { initMap () { let _this = this; let map = new Microsoft.Maps.Map('#localMap', { credentials: 'AgzeobkGvmpdZTFuGa7_6gkaHH7CXHKsFiTQlBvi55x-QLZLh1rSjhd1Da9bfPhD' }); Microsoft.Maps.Events.addHandler(map, 'click', _this.getClickLocation); }, getClickLocation (e) { //若点击到地图的标记上，而非地图上 let [_this, loc] = [this, null]; if (e.targetType == 'pushpin') { loc = e.target.getLocation(); } //若点击到地图上 else { var point = new Microsoft.Maps.Point(e.pageX, e.pageY); loc = e.target.tryPixelToLocation(point, Microsoft.Maps.PixelReference.page); } console.log(loc.latitude+", "+loc.longitude); console.log(loc); _this.lngNum = loc.longitude; _this.latNum = loc.latitude; let data = { lngNum: _this.lngNum, latNum: _this.latNum } this.$emit('getLocationNums',data); }, } } </script> <style scoped> .map-container { width: 100%; height: 400px; border: 1px solid #000; } </style> 在组件中调用bing Map通用组件 // 引入bingMap import bingMapsLayer from 'bingMap.vue' // component中定义 components: { bingMapsLayer }, // template中使用 <bing-maps-layer @getLocationNums="getLocationNums"></bing-maps-layer> // 定义触发点击标记返回经纬度的事件函数 getLocationNums (...data) { let _this = this; console.log('click'); console.log(data); // 这里的data中即子组件bingMap返回的点击获取的经纬度值 },
总结