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 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
关于JS中的方法是否加括号的问题
Jul 27 Javascript
深入理解js generator数据类型
Aug 16 Javascript
详解webpack介绍&amp;安装&amp;常用命令
Jun 29 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
js实现微信聊天效果
Aug 09 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快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
Vue常见面试题整理【值得收藏】
2018/09/20 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
jQuery实现弹幕特效
2019/11/29 jQuery
JavaScript接口实现方法实例分析
2020/05/16 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
美国最大的团购网站:Groupon
2016/07/23 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
护理专业的自荐信
2013/10/22 职场文书
银行出纳岗位职责
2013/11/25 职场文书
探亲假请假条
2014/04/11 职场文书
在校实习生求职信
2014/06/18 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
小人国观后感
2015/06/11 职场文书
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android