如何在vue項目中使用bingMap

本篇文章給大家分享的是有關如何在vue項目中使用bing Map ，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

崇明ssl適用于網站、小程序/APP、API接口等需要進行數據傳輸應用場景，ssl證書未來市場廣闊！成為創新互聯的ssl證書銷售渠道，可以享受市場價格4-6折優惠！如果有意向歡迎電話聯系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

bing Map 初始化

引入bing map資源

初始化地圖

function GetMap() { var map = new Microsoft.Maps.Map('#myMap'); //Add your post map load code here. }

設置地圖控制參數

常用控制參數
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

如何在vue項目中使用bing Map

demo_2

如何在vue項目中使用bing Map

添加自定義圖片圖釘（詳情）

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

自定義圖標的圖釘

如何在vue項目中使用bing Map

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

如何在vue項目中使用bing Map

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

核心代碼

// 子組件

methods:{
 iclick(){
  let data = {
   a:'data'
  };
  this.$emit('ievent', data1, 'data2Str');
 }
}
// 父組件

methods:{
 ievent(...data){
  console.log('allData:',data); // data為包含傳過來所有數據的數組，第一個元素是對象，第二個元素是字符串
 }
}

封裝bing Map通用組件

// 核心代碼



 .map-container {
  width: 100%;
  height: 400px;
  border: 1px solid #000;
 }

在組件中調用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返回的點擊獲取的經緯度值
},

以上就是如何在vue項目中使用bing Map ，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創新互聯行業資訊頻道。

當前標題：如何在vue項目中使用bingMap
文章起源：http://www.xueling.net.cn/article/psphsp.html

老熟女激烈的高潮_日韩一级黄色录像_亚洲1区2区3区视频_精品少妇一区二区三区在线播放_国产欧美日产久久_午夜福利精品导航凹凸

重慶分公司，新征程啟航

如何在vue項目中使用bingMap

其他資訊