高德全局引入vue

一、安裝

1、npm install vue-amap --save

2、在main.js中引入

import VueAMap from 'vue-amap' Vue.use(VueAMap) VueAMap.initAMapApiLoader({
key: '你的key',
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
// 默認高德 sdk 版本為 1.4.4
v: '1.4.4'
})

二、在組件中用

?

?

1、HTML

<el-amap
:plugin="plugin"
:center="center"
:zoom="zoom"
class="amap-demo">
<el-amap-marker v-for="marker in markers"
:position="marker.position"
:key="marker.id"
:events="marker.events"
:icon="'/static/police.png'">
</el-amap-marker>
<el-amap-info-window v-if="window"
:position="window.position"
:visible="window.visible"
:content="window.content"
:offset="window.offset">
</el-amap-info-window>
</el-amap>

2、script

data：

zoom: 12,
center: [113.883107, 22.590993], // 數(shù)據(jù)儲存 pointMarker:[], markers: [],
windows: [],
window: '',
plugin: [{
pName: 'ToolBar',
events: {
init (instance) {
// console.log(instance)
}
}
}] methods: point () {
let markers = []
let windows = []
let that = this
this.pointMarker.forEach((item, index) => {
markers.push({
position: [item.lng, item.lat],
icon: item.icon,
events: {
click () {
that.windows.forEach(window => {
window.visible = false
})
that.window = that.windows[index]
that.$nextTick(() => {
that.window.visible = true
})
}
}
})
windows.push({
position: [item.lng, item.lat],
content: '<div class="windows-text">' + '<div class="text-map">' +
'<p>' + '煙感報警-方形測試' + '</p>' +
'報警狀態(tài)：' + item.status + '<br>' +
'報警時間：' + item.time + '<br>' +
'聯(lián)系人：' + item.linkman + '<br>' +
'聯(lián)系電話：' + item.phone + '<br>' +
'設備名稱：' + item.equipment + '<br>' +
'煙感環(huán)境溫度：' + item.temp + '<br>' +
'發(fā)現(xiàn)地址：' + item.site + '<br>' + '<div class="bottom">' +
'<button οnclick="getVideo()">' + '查看視頻' + '</button>' + '</div>' + '</div>' + '</div>',
offset: [5, -15],
visible: false
})
})
// 加窗體
this.markers = markers
// 加彈窗
this.windows = windows
}



注意要給高度顯示地圖 .amap-demo{
width: 100%;
height: 775px;
}

?

轉載于:https://www.cnblogs.com/luckyShuang/p/11527194.html

總結

以上是生活随笔為你收集整理的vue引入vue-amap的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。