怎样操作bingMap在vue项目中使用

// 核心代码-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'); });

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);
}

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);
}

//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'); });

// 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 });
});

// 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("加载成功...")
 // 开始地图操作
 })

// 子组件
<template>
<p @click="iclick"></p>
</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为包含传过来所有数据的数组，第一个元素是对象，第二个元素是字符串
 }
}

// 核心代码
<template>
 <p class="map-container">
 <p id="localMap"></p>
 </p>
</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返回的点击获取的经纬度值
},