事先准备
注册账号并申请Key
1. 首先，注册开发者账号，成为高德开放平台开发者
2. 登陆之后，在进入「应用管理」 页面「创建新应用」
3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」
一、安装
1.npm安装（推荐）
通过 npm install --save vue-amap 来安装
2.CDN
目前可通过 unpkg.com/vue-amap 获取最新版本的资源。
通过script引入 <script src="https://unpkg.com/vue-amap/dist/index.js"></script>
二、使用
1.在插件目录plugins下，新建一个vue-map.js文件
import Vue from 'vue';
import VueAMap from 'vue-amap';
Vue.use(VueAMap); // 初始化vue-amap
if (!Vue.prototype.$isServer) {
VueAMap.initAMapApiLoader({
// 高德的key
key: 'your key',
// 插件集合
plugin: ['AMap.Geolocation', 'AMap.Marker', 'AMap.ToolBar', 'AMap.Circle', 'AMap.PolyLine'],
uiVersion: '1.0',
// 高德 sdk 版本，默认为 1.4.4
v: '1.4.8'
});
}
这里的key为事先准备时候注册的key值，填到这里就可以了，如下图所示
2.在配置文件nuxt.cofig.js中的plugins里添加刚才写的vue-map.js文件，如下图所示
3.然后在页面就可以使用el-map来使用地图了，地图的属性通过页面的值来赋予
<template>
<section style="width: 1000px; height: 800px;">
<no-ssr>
<el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center" :events="events">
<el-amap-marker v-for="(marker, index) in markers" :position="marker.position"
:key="index" :vid="index" :events="marker.events"></el-amap-marker>
<el-amap-circle :center="circle.center" :radius="circle.radius"
:fill-opacity="0.5" fill-color="#ffb5b3" stroke-color="#ffb5b3"></el-amap-circle>
<el-amap-polyline :path="polyline.path"></el-amap-polyline>
</el-amap>
</no-ssr>
</section>
</template> <script>
import * as _ from 'lodash';
export default {
data() {
let self = this;
return {
center: [121.59996, 31.197646],
events: {
init(map) {
let markers = _.cloneDeep(self.markers);
markers.forEach((item, index) => {
AMapUI.loadUI(['overlay/SimpleMarker'], function (SimpleMarker) {
item = new SimpleMarker({
iconLabel: {
innerHTML: index,
style: {
color: '#fff'
}
},
iconStyle: '#1995f5',
map: map,
position: item.position
});
});
});
}
},
lng: 0,
lat: 0,
plugin: [{
pName: 'Geolocation',
events: {
click: (o) => {
o.getCurrentPosition((status, result) => {
if (result && result.position) {
self.lng = result.position.lng;
self.lat = result.position.lat;
self.center = [self.lng, self.lat];
self.$nextTick();
}
});
}
},
buttonPosition: 'LT'
}],
markers: [
{
position: [121.59996, 31.197646],
events: {
click: () => {
this.$router.push({path: '/single/250'});
}
},
visible: true,
clickable: true
},
{
position: [122.59996, 32.197646],
events: {
click: () => {
this.$router.push({path: '/single/250'});
}
},
visible: true,
clickable: true
}
],
circle: {
center: [121.59996, 31.197646],
radius: 6000
},
polyline: {
path: [[121.59996, 31.1976461], [121.5389385, 31.197646]]
}
};
},
methods: {
},
mounted() {
},
beforeDestroy() {
}
};
</script>
然后 npm run dev 运行程序即可看到效果
注意事项：
1.两个参考文档
https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install （amap）
https://lbs.amap.com/api/javascript-api/guide/abc/prepare（高德）
2.vue-amap 能够抛开高德原生 SDK 覆盖大多数场景，但对于部分定制化程度较高的场景而言，可能还是需要引入高德原生 SDK 来支持。
对于大多数 vue-amap 组件，都有 init 这个 event，参数为高德的实例，通过这样暴露高德实例的方式，开发者能够非常*地将原生 SDK 和 vue-amap 结合起来使用。
若涉及到高德原生 AMap 需要注意的点：
- 确保
vue-amap的导入名不是AMap，推荐import VueAMap from 'vue-amap'避免和高德全局的AMap冲突。 - 若
eslint报错AMap is undefined之类的错误。请将AMap配置到.eslintrc的globals中。
<template>
<div class="amap-page-container">
<el-amap vid="amapDemo" :center="center" :amap-manager="amapManager" :zoom="zoom" :events="events" class="amap-demo">
</el-amap> <div class="toolbar">
<button @click="add()">add marker</button>
</div>
</div>
</template> <style>
.amap-demo {
height: 300px;
}
</style> <script>
// NPM 方式
// import { AMapManager } from 'vue-amap';
// CDN 方式
let amapManager = new VueAMap.AMapManager();
module.exports = {
data: function() {
return {
zoom: 12,
center: [121.59996, 31.197646],
amapManager,
events: {
init(o) {
let marker = new AMap.Marker({
position: [121.59996, 31.197646]
}); marker.setMap(o);
}
}
};
}, methods: {
add() {
let o = amapManager.getMap();
let marker = new AMap.Marker({
position: [121.59996, 31.177646]
}); marker.setMap(o);
}
}
};
</script>
3.如果文档的插件不能满足自己的需求，可以自己自定义添加一些功能，比如切换地图上标注的大小，全屏显示之类的功能，按钮自己添加，然后定位到地图上的相应位置即可
<template>
<section style="width: 1000px; height: 800px;">
<no-ssr>
<el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center" :events="events">
<div class="map-range map-icon bg-white map-border text-center cursor-pointer">
<i class="el-icon-rank text-22 icon-state"></i>
</div>
<div class="map-enlarge map-icon map-border bg-white text-center cursor-pointer">
<p class="icon-state"><i class="iconfont icon-fangda text-22"></i></p>
</div>
<el-amap-marker v-for="(marker, index) in markers" :position="marker.position"
:key="index" :vid="index" :events="marker.events"></el-amap-marker>
<el-amap-circle :center="circle.center" :radius="circle.radius"
:fill-opacity="0.5" fill-color="#ffb5b3" stroke-color="#ffb5b3"></el-amap-circle>
<el-amap-polyline :path="polyline.path"></el-amap-polyline>
</el-amap>
</no-ssr>
</section>
</template> <script>
import * as _ from 'lodash';
export default {
data() {
let self = this;
return {
center: [121.59996, 31.197646],
events: {
init(map) {
let markers = _.cloneDeep(self.markers);
markers.forEach((item, index) => {
AMapUI.loadUI(['overlay/SimpleMarker'], function (SimpleMarker) {
item = new SimpleMarker({
iconLabel: {
innerHTML: index,
style: {
color: '#fff'
}
},
iconStyle: '#1995f5',
map: map,
position: item.position
});
});
});
}
},
lng: 0,
lat: 0,
plugin: [{
pName: 'Geolocation',
events: {
click: (o) => {
o.getCurrentPosition((status, result) => {
if (result && result.position) {
self.lng = result.position.lng;
self.lat = result.position.lat;
self.center = [self.lng, self.lat];
self.$nextTick();
}
});
}
},
buttonPosition: 'LT'
}],
markers: [
{
position: [121.59996, 31.197646],
events: {
click: () => {
this.$router.push({path: '/single/250'});
}
},
visible: true,
clickable: true
},
{
position: [122.59996, 32.197646],
events: {
click: () => {
this.$router.push({path: '/single/250'});
}
},
visible: true,
clickable: true
}
],
circle: {
center: [121.59996, 31.197646],
radius: 6000
},
polyline: {
path: [[121.59996, 31.1976461], [121.5389385, 31.197646]]
}
};
},
methods: {
},
mounted() {
},
beforeDestroy() {
}
};
</script> <style lang="scss">
.map-icon {
height: 35px;
width: 35px;
position: absolute;
top: 20px;
border-radius: 5px;
overflow: hidden;
line-height: 20px;
z-index: 99;
.icon-state {
margin-top: 8px;
}
}
.map-enlarge {
left: 105px;
}
.map-border {
border: 1px solid #b5b9b7;
}
.map-range {
left: 55px;
}
</style>
4.动态修改数据以后，地图不会立刻根据数据进行重新渲染，这时候我们需要加一个判断，更新数据前把地图隐藏起来，更新以后通过this.$nextTick(() => {xxx})再显示地图，这样可以解决这个问题
5.如果把地图这部分写成一个组件，不同页面根据传入的不同数据来渲染不同的地图的话，进入页面的时候也会出现上面的数据更新导致错误地图的问题，此时可以先不显示地图，然后设置一个定时器，500毫秒后在渲染地图，这样可以避免这个问题，如果使用了定时器，页面销毁前记得清除定时器哦~
6.关于坐标点标注，遮挡物样式什么的，可以通过高德地图的UI组件库来进行自定义修改
https://lbs.amap.com/api/javascript-api/reference-amap-ui/other/positionpicker
如果大佬们有更好的方法和建议，可以在下面回复交流一下哦~
嗯，就酱~~