vue引入vue-amap
高德全局引入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],
// 数据储存
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>' +
'报警状态:' + item.status + '<br>' +
'报警时间:' + item.time + '<br>' +
'联系人:' + item.linkman + '<br>' +
'联系电话:' + item.phone + '<br>' +
'设备名称:' + item.equipment + '<br>' +
'烟感环境温度:' + item.temp + '<br>' +
'发现地址:' + item.site + '<br>' + '<div class="bottom">' +
'<button onclick="getVideo()">' + '查看视频' + '</button>' + '</div>' + '</div>' + '</div>',
offset: [5, -15],
visible: false
})
})
// 加窗体
this.markers = markers
// 加弹窗
this.windows = windows
}
注意要给高度显示地图
.amap-demo{
width: 100%;
height: 775px;
}