bing Map 在vue項目中的使用詳解
更新時間：2018年04月09日 17:18:38 作者：LucaLJX
這篇文章主要介紹了bing Map 在vue項目中的使用,需要的朋友可以參考下
寫在最前面
擁有全球數(shù)據(jù)庫國內好像就只有百度地圖有，高德、搜狗、騰訊的都不行，但是由于百度地圖的數(shù)據(jù)更新不及時，所以在做相關項目要用到國外數(shù)據(jù)的時候，最好還是推薦使用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>
設置地圖控制參數(shù)
常用控制參數(shù)
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(你的地圖名稱, 觸發(fā)地圖事件名稱, function() { 觸發(fā)的事件 });
// 常用實例
//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
// 創(chuàng)建一個圖釘
var pin = new Microsoft.Maps.Pushpin(center, {
// demo_1
title: 'Microsoft', // 圖釘?shù)臉祟}
subTitle: 'City Center', // 圖釘主體文字
text: '1' // 圖釘內的文字
// demo_2
color: 'red', // 純色圖釘
});
//Add the pushpin to the map
map.entities.push(pin);
}
demo_1
demo_2
添加自定義圖片圖釘（詳情）
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 給圖釘添加事件
核心代碼
//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的圖釘添加事件，通過事件修改圖釘?shù)臉邮?/p>
// 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 固定錨點
開發(fā)人員在使用自定義圖釘時遇到的最常見問題之一是，當他們縮放地圖時，看起來好像他們的圖釘正在漂移到或離開它所要錨定的位置。這是由于圖釘選項中的錨點值不正確。錨點指定圖像的哪個像素坐標相對于圖像的左上角應與圖釘位置坐標重疊。
常見配置參考
bing Map 在vue中使用
vue引入bing Map可能會遇到的問題
由于vue一般引用第三方插件是用import的方式進行的，所以的在html中使用script標簽引入bing Map SDK會出現(xiàn)兩種問題
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的時候，返回點擊點的經(jīng)緯度 （完成）
子組件觸發(fā)事件返回參數(shù)到父組件
當已有經(jīng)緯度的時候，加載bingMap自動顯示其經(jīng)緯度所在的位置并設置圖釘 （待完成）
子組件觸發(fā)事件返回參數(shù)到父組件
實現(xiàn)原理
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為包含傳過來所有數(shù)據(jù)的數(shù)組，第一個元素是對象，第二個元素是字符串
}
}
封裝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, // 經(jīng)度
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>
// 定義觸發(fā)點擊標記返回經(jīng)緯度的事件函數(shù)
getLocationNums (...data) {
let _this = this;
console.log('click');
console.log(data);
// 這里的data中即子組件bingMap返回的點擊獲取的經(jīng)緯度值
},
總結
以上所述是小編給大家介紹的bing Map 在vue項目中的使用詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
這篇文章主要為大家詳細介紹了Vue數(shù)字輸入框組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
vue項目環(huán)境搭建?啟動?移植操作示例及目錄結構分析
這篇文章主要介紹了vue項目環(huán)境搭建、啟動、項目移植、項目目錄結構分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-04-04
基于vue實現(xiàn)滾動條滾動到指定位置對應位置數(shù)字進行tween特效
這篇文章主要介紹了基于vue實現(xiàn)滾動條滾動到指定位置對應位置數(shù)字進行tween特效,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
vue2.0學習之a(chǎn)xios的封裝與vuex介紹
最近在研究Vuex2.0,搞了好幾天終于有點頭緒了。下面這篇文章主要給大家介紹了關于vue2.0學習之a(chǎn)xios的封裝與vuex的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-05-05
這篇文章主要介紹了vue-cli腳手架的.babelrc文件用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
很多朋友在使用vue3+echarts5技術時會遇到echarts無法綻放的問題，今天小編就給大家分享下問題描述及解決方案，感興趣的朋友跟隨小編一起看看吧2022-11-11
這篇文章主要介紹了vue-cli配置全局sass、less變量的方法，本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
vue router帶參數(shù)頁面刷新或回退參數(shù)消失的解決方法
這篇文章主要介紹了vue router帶參數(shù)頁面刷新或回退參數(shù)消失的解決方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
使用vue-cli創(chuàng)建項目并webpack打包的操作方法
本文給大家分享使用vue-cli創(chuàng)建項目基于webpack模板打包的配置方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-07-07
vue中每個組件都是隔離的,包括父組件和子組件,各組件之間需要數(shù)據(jù)通信,就涉及到了組件傳值,本文給大家介紹vue中組件間多種傳值方式案例,感興趣的朋友跟隨小編一起看看吧2024-03-03