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


Posted in Javascript onApril 09, 2018

写在最前面

拥有全球数据库国内好像就只有百度地图有,高德、搜狗、腾讯的都不行,但是由于百度地图的数据更新不及时,所以在做相关项目要用到国外数据的时候,最好还是推荐使用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(详情)

给bing map添加地图事件(参考)

// 核心代码-demo
 Microsoft.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 handlers
 Microsoft.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_1
  title: 'Microsoft', // 图钉的标题
  subTitle: 'City Center', // 图钉主体文字
  text: '1' // 图钉内的文字
  // demo_2
  color: 'red', // 纯色图钉
 });
 //Add the pushpin to the map
 map.entities.push(pin);
}

demo_1

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

demo_2

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

添加自定义图片图钉(详情)

function GetMap() {
 var map = new Microsoft.Maps.Map('#myMap',
 {
  credentials: 'You Bing Maps Key'
 });
 var center = map.getCenter();
 //Create custom Pushpin
 var pin = new Microsoft.Maps.Pushpin(center, {
  icon: 'images/poi_custom.png', // 自定义图片路径
  anchor: new Microsoft.Maps.Point(12, 39)
 });
 //Add the pushpin to the map
 map.entities.push(pin);
}

自定义图标的图钉

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

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样式

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

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 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返回的点击获取的经纬度值
},

总结

以上所述是小编给大家介绍的bing Map 在vue项目中的使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS event使用方法详解
Apr 28 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
extjs render 用法介绍
Sep 11 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
通过实例了解Javascript柯里化流程
Mar 03 Javascript
详解Vue打包优化之code spliting
Apr 09 #Javascript
node实现基于token的身份验证
Apr 09 #Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 #Javascript
webpack中的热刷新与热加载的区别
Apr 09 #Javascript
vue写一个组件
Apr 09 #Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 #Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 #Javascript
You might like
PHP的FTP学习(四)
2006/10/09 PHP
php使用codebase生成随机数
2014/03/25 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
php实现URL加密解密的方法
2016/11/17 PHP
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
Django如何实现内容缓存示例详解
2017/09/24 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
Python线程同步的实现代码
2018/10/03 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
求职自荐书范文
2013/12/04 职场文书
保护黄河倡议书
2014/05/16 职场文书
医药销售自我评价200字
2014/09/11 职场文书
护士2014年终工作总结
2014/11/11 职场文书
高中班主任评语
2014/12/30 职场文书