准备工作
- 注册高德开放平台
vue整合高德地图需要先在高德开放平台中创建应用添加一个key。如下图所示：
1578015324(1).jpg
- 创建vue项目，下载高德地图依赖包
npm install vue-amap --save
开始编码
- 在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', 'MarkerClusterer'],
v: '1.4.4'
});
- 初始化地图
加载高德地图，设置缩放级别级别、地图中心点经纬度、地图是否可以缩放；
<template>
<div id="app">
<div style="width: 1600px; height: 750px;">
<el-amap vid="amap" :zoom="zoom" :center="center" :zoomEnable="true">
</el-amap>
</div>
</div>
</template>
<script>
export default {
data () {
return {
zoom: 5,
center: [103.82, 36.07]
}
}
}
</script>
<style scoped>
</style>
image.png
- 设置多个marker点（自定义marker icon）
<template>
<div id="app">
<div style="width: 1200px; height: 600px;">
<el-amap vid="amap" :zoom="zoom" :center="center" :zoomEnable="true">
<el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :icon="icon"></el-amap-marker>
</el-amap>
</div>
</div>
</template>
<script>
export default {
data () {
return {
zoom: 5,
center: [103.82, 36.07],
icon: require('./images/icon1.png'),
markers: [
{
position: [105.82, 36.07]
},
{
position: [113.55, 37.87]
},
{
position: [115.40, 39.90]
}
]
}
}
}
</script>
<style scoped>
</style>
image.png
- 点击marker点弹出信息窗体
<template>
<div id="app">
<div style="width: 1200px; height: 600px;">
<el-amap vid="amap" :zoom="zoom" :center="center" :zoomEnable="true">
<el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :events="events" :icon="icon"></el-amap-marker>
<el-amap-info-window
:position="currentWindow.position"
:content="currentWindow.content"
:visible="currentWindow.visible"
:events="currentWindow.events">
</el-amap-info-window>
</el-amap>
</div>
</div>
</template>
<script>
export default {
data () {
return {
zoom: 5,
center: [103.82, 36.07],
icon: require('./images/icon1.png'),
markers: [
{
position: [105.82, 36.07]
},
{
position: [113.55, 37.87]
},
{
position: [115.40, 39.90]
}
],
currentWindow: {
position: [103.82, 36.07],
content: '',
events: {},
visible: false
},
events: {
click: (e) => {
this.currentWindow.visible = false;
this.$nextTick(() => {
this.currentWindow = {
position: [e.target.Uh.position.lng, e.target.Uh.position.lat],
content: `精度: ${e.target.Uh.position.lng}, 纬度: ${e.target.Uh.position.lat}`,
visible: true,
events: {}
};
this.currentWindow.visible = true;
});
}
}
}
}
}
</script>
<style scoped>
</style>
image.png
