bing Map 在vue项目中的使用
写在最前面
拥有全球数据库国内好像就只有百度地图有,高德、搜狗、腾讯的都不行,但是由于百度地图的数据更新不及时,所以在做相关项目要用到国外数据的时候,最好还是推荐使用bingMap。
bing Map 使用教程(基础)
参考文档: bing Map 官方教程
bing Map 初始化
- 引入bing map资源
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[YOUR_BING_MAPS_KEY]' async defer></script>
- 初始化地图
<div id="myMap"></div><script type='text/javascript'>function GetMap(){var map = new Microsoft.Maps.Map('#myMap');//Add your post map load code here.}
</script>
设置地图控制参数
- 常用控制参数
- branch
- 加载地图sdk的哪个分支:release(默认)、experimental
- callback
- 地图控制脚本加载完成后的回调(默认:GetMap)
- key
- 用户使用的userKey(详情)
- setLang
- 指定用于地图标签和导航控件的语言
- 常用:中国大陆(zh-CN)、中国香港(zh-HK)、简体中文(zh-Hans)、中国台湾(zh-TW)、英文-英国(en-GB)、英文-美国(en-US)
- setMkt(详情)
- UR(详情)
- branch
- 常用控制参数
给bing map添加地图事件(参考)
// 核心代码-demoMicrosoft.Maps.Events.addHandler(你的地图名称, 触发地图事件名称, function() { 触发的事件 });// 常用实例//Add view change events to the map.// 视图更改事件Microsoft.Maps.Events.addHandler(map, 'viewchangestart', function () { highlight('mapViewChangeStart'); });Microsoft.Maps.Events.addHandler(map, 'viewchange', function () { highlight('mapViewChange'); });Microsoft.Maps.Events.addHandler(map, 'viewchangeend', function () { highlight('mapViewChangEnd'); });//Add mouse events to the map.// 鼠标事件Microsoft.Maps.Events.addHandler(map, 'click', function () { highlight('mapClick'); });Microsoft.Maps.Events.addHandler(map, 'dblclick', function () { highlight('mapDblClick'); });Microsoft.Maps.Events.addHandler(map, 'rightclick', function () { highlight('mapRightClick'); });Microsoft.Maps.Events.addHandler(map, 'mousedown', function () { highlight('mapMousedown'); });Microsoft.Maps.Events.addHandler(map, 'mouseout', function () { highlight('mapMouseout'); });Microsoft.Maps.Events.addHandler(map, 'mouseover', function () { highlight('mapMouseover'); });Microsoft.Maps.Events.addHandler(map, 'mouseup', function () { highlight('mapMouseup'); });Microsoft.Maps.Events.addHandler(map, 'mousewheel', function () { highlight('mapMousewheel'); });//Add addition map event handlersMicrosoft.Maps.Events.addHandler(map, 'maptypechanged', function () { highlight('maptypechanged'); });
bing Map 添加图钉(详情)
基本图钉示例
function GetMap() {var map = new Microsoft.Maps.Map('#myMap', {credentials: 'Your Bing Maps Key',center: new Microsoft.Maps.Location(47.6149, -122.1941)});var center = map.getCenter();//Create custom Pushpin// 创建一个图钉var pin = new Microsoft.Maps.Pushpin(center, {// demo_1title: 'Microsoft', // 图钉的标题subTitle: 'City Center', // 图钉主体文字text: '1' // 图钉内的文字// demo_2color: 'red', // 纯色图钉});//Add the pushpin to the mapmap.entities.push(pin);
}
demo_1
![](https://upload-images.jianshu.io/upload_images/2296703-2570df35d22eeaa8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/500)
demo_2
![](https://upload-images.jianshu.io/upload_images/2296703-f50c9ba4dd9df41e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/501)
添加自定义图片图钉(详情)
function GetMap() {var map = new Microsoft.Maps.Map('#myMap',{credentials: 'You Bing Maps Key'});var center = map.getCenter();//Create custom Pushpinvar pin = new Microsoft.Maps.Pushpin(center, {icon: 'images/poi_custom.png', // 自定义图片路径anchor: new Microsoft.Maps.Point(12, 39)});//Add the pushpin to the mapmap.entities.push(pin);
}
自定义图标的图钉
![](https://upload-images.jianshu.io/upload_images/2296703-8fc47fa5a367719c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/500)
bing Map 给图钉添加事件
- 核心代码
//Create a pushpin.var pushpin = new Microsoft.Maps.Pushpin(map.getCenter());map.entities.push(pushpin);//Add mouse events to the pushpin.// 将自定义方法及鼠标事件添加到图钉上面Microsoft.Maps.Events.addHandler(pushpin, 'click', function () { highlight('pushpinClick'); });Microsoft.Maps.Events.addHandler(pushpin, 'mousedown', function () { highlight('pushpinMousedown'); });Microsoft.Maps.Events.addHandler(pushpin, 'mouseout', function () { highlight('pushpinMouseout'); });Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', function () { highlight('pushpinMouseover'); });Microsoft.Maps.Events.addHandler(pushpin, 'mouseup', function () { highlight('pushpinMouseup'); });
bing Map 给图钉添加hover样式
其核心还是给bing Map的图钉添加事件,通过事件修改图钉的样式
// 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样式
![](https://upload-images.jianshu.io/upload_images/2296703-8524a7ee4e97431d.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/399)
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 keyconst 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 class="map-container"><div id="localMap"></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返回的点击获取的经纬度值
},
未完待续
后续
- 在bingMap组件中使用自定义图钉
- 在bingMap组件中定义可拖动图钉标记经纬度
- 集成bingMap自定义搜索
- 集成bingMap图钉详情展示
BY - Luca_LJX
github: luca_ljx
bing Map 在vue项目中的使用相关推荐
- 在Vue项目中使用echarts完成迁徙图(Map组件)
在Vue项目中使用echarts完成迁徙图 此章个人理解:参考原有的代码基础上,完成了一个地图迁徙的组件先了解一下整体代码, 有能力的可以参照整体完成, 下面也会列出详细步骤解答 代码我放在了gith ...
- svg图片在vue项目中的应用
svg图片在vue项目中的应用 一.安装 svg-sprite-loader 插件 npm install svg-sprite-loader 二.基于 vue-cli2.x 项目 webpack 配 ...
- 如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图(含vue项目创建教程)
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
- 在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作 注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者 登陆之后,在进入「应用管理」 页面「创建新应用 ...
- Vue项目中的自定义指令
Vue项目中的自定义指令 使用场景:需要对DOM元素进行底层操作 局部自定义指令 当指令第一次被绑定到元素上的时候,会立即触发 bind() 1 定义 与 data 同级 在 directives 节 ...
- 在vue项目中使用高德地图
需求很重要,有需求你才有努力解决问题的方向,加油! 在我们使用vue构建项目的时候,难免在业务需求上会遇到使用高德地图的时候,这时候问题就来了. 我们该怎么在vue项目中插入高德地图?通过度娘我知道了 ...
- Vue项目中操作svg文件
Vue项目中使用svg 引入依赖 yarn add svg-sprite-loader -D [可选] yarn add svgo svgo-loader -D 依赖说明: svg-sprite-lo ...
- Vue项目中Echarts流向图迁徙图实现
在数据可视化中,地图可视化是高频应用的一种.我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图.数据地图可以最直观的表达出数据之间的空 ...
- vue项目中使用百度地图功能
1.百度地图api官方文档: https://lbsyun.baidu.com/index.php?title=jspopularGL 在百度地区去申请一个百度地图key.这个key属于私密的,部分高 ...
最新文章
- 对讲机的那点事:带你玩转LD800数字车载台读、写频操作:一
- [BZOJ 3211]花神游历各国(并查集+树状数组)
- Vivado使用误区与进阶——XDC约束技巧之I/O篇 (下)
- fon循环总是返回最后值问题
- 从LINQ开始之LINQ to Objects(下)
- 怎样解决IPv4网络和IPv6网络的共存互通?
- CTF(pwn)堆利用 之 off by one
- POJ-3352-RoadConstruction(边双联通分量,缩点)
- BZOJ_1009_[HNOI2008]_GT考试_(动态规划+kmp+矩阵乘法优化+快速幂)
- ChemDraw教程:如何查看和删除俗名
- java单元格合并多列_ElementUI表格列相同值自动合并单元格( 多列 )
- Python笔记-函数装饰器
- java框架ssh实验报告_基于SSH的实验报告提交系统
- h3c 链路聚合测试_4G/5G聚合路由器在直播中无线多链路聚合图传技术是什么?
- paip.c++ lua 调用attilax总结.
- 利用强化学习设计具有目标有效杨氏模量的复合材料
- js 修改meta标签 属性
- 【设计模式】适配器模式:如何巧妙地过滤游戏中的敏感词
- The Elder(树形dp 斜率优化)
- ACCV 2020 最受关注的 Top10 代码开源论文!
热门文章
- 【小技巧】使用百度搜索引擎搜指定站点内容
- win7点击计算机不现实光驱,Win7光驱读不出光盘的解决方法
- windbg 脚本命令
- PG守护进程(Postmaster)——后台二等公民进程第一波启动maybe_start_bgworkers
- android 获取手机中应用运行的时长和次数
- DIV布局——化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业 静态网页
- 两种不同结构的永磁永磁同步电机特点说明—表贴式和内置式
- Latex论文参考文献引用的获取
- [论文笔记]GMNN图马尔可夫网络原理
- ubuntu 离线下载安装包 及安装