bing Map 在vue项目中的使用详解

发布时间：2020-12-17 02:20:50 所属栏目：百科来源：网络整理

导读：写在最前面拥有全球数据库国内好像就只有百度地图有，高德、搜狗、腾讯的都不行，但是由于百度地图的数据更新不及时，所以在做相关项目要用到国外数据的时候，最好还是推荐使用bingMap。 bing Map 使用教程（基础）参考文档：bing Map 官方教程 bing Map

写在最前面

拥有全球数据库国内好像就只有百度地图有，高德、搜狗、腾讯的都不行，但是由于百度地图的数据更新不及时，所以在做相关项目要用到国外数据的时候，最好还是推荐使用bingMap。

bing Map 使用教程（基础）

参考文档：bing Map 官方教程

bing Map 初始化

引入bing map资源

初始化地图

设置地图控制参数

常用控制参数 branch 加载地图sdk的哪个分支：release（默认）、experimental callback 地图控制脚本加载完成后的回调（默认：GetMap） key 用户使用的userKey（详情） setLang 指定用于地图标签和导航控件的语言常用：中国大陆（zh-CN）、中国香港（zh-HK）、简体中文（zh-Hans）、中国台湾（zh-TW）、英文-英国（en-GB）、英文-美国（en-US） setMkt（详情） UR（详情）

给bing map添加地图事件（参考）

bing Map 添加图钉（详情）

基本图钉示例

demo_1

demo_2

添加自定义图片图钉（详情）

自定义图标的图钉

bing Map 给图钉添加事件

核心代码

bing Map 给图钉添加hover样式

其核心还是给bing Map的图钉添加事件，通过事件修改图钉的样式

给图钉添加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”的错误，只要在项目中保证调用地图之前，能够正确引入相关工具类就行了。

{ 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

核心代码

methods:{ iclick(){ let data = { a:'data' }; this.$emit('ievent',data1,'data2Str'); } } // 父组件 methods:{ ievent(...data){ console.log('allData:',data); // data为包含传过来所有数据的数组，第一个元素是对象，第二个元素是字符串 } }

封装bing Map通用组件

在组件中调用bing Map通用组件 // 引入bingMap import bingMapsLayer from 'bingMap.vue' // component中定义 components: { bingMapsLayer },// template中使用 // 定义触发点击标记返回经纬度的事件函数 getLocationNums (...data) { let _this = this; console.log('click'); console.log(data); // 这里的data中即子组件bingMap返回的点击获取的经纬度值 },

总结

以上所述是小编给大家介绍的bing Map 在vue项目中的使用详解。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!