1、申请高德KEY。
2.在项目中的html.index中引入
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=zzXmTOzv5QDtMW1GjLBHnGfPM2KXUBYP"></script>
3.在项目build/webpack.base.conf.js中加入如下代码：
externals: {
'AMap': 'AMap'}
4.在vue单文件中使用
<template>
<div class="dbMap">
<div id="container"></div>
</div>
</template>
<script>
import AMap from 'AMap'
export default {
data () {
return {
map: null,
projectList: [
{
projectName: '中山金融投资控股有限公司',
projectAddress: '中山市东区街道中关苑',
deptName: '粤冠物业开发部',
checker: '黄加俊,冯文强,王泽民',
tenantName: '租户_14',
contractStartTime: '2018-02-01',
contractEndTime: '2019-04-01',
longitude: '113.397964',
latitude: '22.512833',
areaCovered: '15.53',
rentalArea: '6.68',
chartInformation: '查看',
contract: '查看'
}
]
}
},
mounted () {
this.initMap()
this.initMarker()
},
methods: {
initMap () {
this.map = new AMap.Map('container', {
zoom: 13.0,
mapStyle: 'amap://styles/darkblue',
center: [113.397705, 22.536707],
pitch: 0,
// resizeEnable: false,
zoomEnable: false,
dragEnable: true
})
},
initMarker () {
this.projectList.forEach(project => {
this.addMarker(project)
})
},
addMarker (dots) {
if (dots.longitude && dots.latitude) {
const marker = new AMap.Marker({
position: [dots.longitude, dots.latitude],
raiseOnDrag: true,
draggable: false
})
AMap.event.addListener(
marker,
'click',
this.addInfoWindow.bind(this, dots)
)
this.map.add(marker)
}
},
addInfoWindow (dots) {
this.project = dots
// let _this = this
const infoWindow = new AMap.InfoWindow({
anchor: 'bottom-left',
isCustom: true,
closeWhenClickMap: true,
autoMove: true,
showShadow: true,
content: `
<div style="padding:0;width:250px;">
<h2 style="background: #4C76F4;font-size: 14px;color: #fff;padding: 16px;">${dots.projectName}
</h2>
<div style="font-size: 12px;padding: 10px;background: #fff;">
<i class="el-icon-location" style="color: #ccc;"/>
<span style="color: #000">${dots.projectAddress}</span>
</div>
</div>`
})
infoWindow.open(this.map, [dots.longitude, dots.latitude])
}
}
}
</script>
<style lang="scss" scoped>
.dbMap {
width: 100%;
height: 500px;
#container {
width: 100%;
height: 100%;
background-color: green;
}
}
</style>
