vue-amap高德地图demo
---------vue-amap是一套基于Vue 2.0和高德地图的地图组件。---------
官方文档：https://elemefe.github.io/vue-amap
1. vue-amap安装
npm安装
npm install vue-amap --save
2. vue-amap引入
在main.js中引入。建议单独写一个vue-amap.js，再将vue-amap.js引入main.js
import VueAMap from 'vue-amap'
import Vue from 'vue'
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: '这里填写的你在高德地图官网申请的key',
//插件，可以根据需求按需引入
plugin: [
"AMap.Autocomplete",
//输入提示插件
"AMap.PlaceSearch",
//POI搜索插件
"AMap.Scale",
//右下角缩略图插件 比例尺
"AMap.OverView",
//地图鹰眼插件
"AMap.ToolBar",
//地图工具条
"AMap.MapType",
//类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
"AMap.PolyEditor",
//编辑 折线多，边形
"AMap.CircleEditor",
//圆形编辑器插件
"AMap.Geolocation"
//定位控件，用来获取和展示用户主机所在的经纬度位置
],
// 默认高德 sdk 版本为 1.4.4
v: '1.4.15',
//ui版本，可以不用写
uiVersion: '1.0.11'
});
3. vue-amap使用
新建一个vue页面，center:确定地图初始化后的中心，zoom:地图缩放级别
<template>
<div>
<div class="amap-wrapper">
<el-amap
class="amap-box"
:vid="map"
:zoom="zoom"
:center="center"
:events="events"
>
</el-amap>
</div>
</div>
</template>
<script>
export default {
data() {
return {
center: [104.067571, 30.639665],
lng: 0,
lat: 0,
zoom: 12,
}
},
};
</script>
<style>
/* 设置地图容器的长和宽，必不可少 */
.amap-wrapper {
width: 100%;
height: 400px;
}
</style>
到这里你就可以添加一个最原始的高德地图到你的页面
4. 添加marker
<template>
<div>
<div class="amap-wrapper">
<el-amap
class="amap-box"
:vid="map"
:zoom="zoom"
:center="center"
:events="events"
>
<!-- 添加marker-->
<el-amap-marker
v-for="marker in markers"
:key="marker.title"
:title="marker.title"
:position="marker.position"
:events="marker.events"
:visible="marker.visible"
></el-amap-marker>
</el-amap>
</div>
</div>
</template>
<script>
export default {
data() {
return {
center: [104.067571, 30.639665],
lng: 0,
lat: 0,
zoom: 12,
markers: [
{
position: [116.397026, 39.918058],
events: {
click: () => {
this.center = [116.397026, 39.918058];
self.zoom = 18;
console.log(this.center, this.zoom);
},
},
visible: true,
title: "bejing",
},
{
position: [104.067571, 30.639665],
events: {
click: () => {
this.center = [104.067571, 30.639665];
this.zoom = 15;
console.log(this.center, this.zoom);
},
},
visible: true,
title: "tiyuguan",
},
{
position: [104.07332, 30.665513],
events: {
click: () => {
this.center = [104.07332, 30.665513];
this.zoom = 15;
console.log(this.center, this.zoom);
},
},
visible: true,
title: "这是哪里",
},
}
},
};
</script>
<style>
/* 设置地图容器的长和宽，必不可少 */
.amap-wrapper {
width: 100%;
height: 400px;
}
</style>
5. 添加信息窗体
<template>
<div>
<div class="amap-wrapper">
<el-amap
class="amap-box"
:vid="map"
:zoom="zoom"
:center="center"
:events="events"
>
<!-- 添加marker-->
<el-amap-marker
v-for="marker in markers"
:key="marker.title"
:title="marker.title"
:position="marker.position"
:events="marker.events"
:visible="marker.visible"
></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 {
center: [104.067571, 30.639665],
lng: 0,
lat: 0,
zoom: 12,
markers: [
{
position: [116.397026, 39.918058],
events: {
click: () => {
this.center = [116.397026, 39.918058];
self.zoom = 18;
console.log(this.center, this.zoom);
},
},
visible: true,
title: "bejing",
},
{
position: [104.067571, 30.639665],
events: {
click: () => {
this.center = [104.067571, 30.639665];
this.zoom = 15;
console.log(this.center, this.zoom);
},
},
visible: true,
title: "tiyuguan",
},
{
position: [104.07332, 30.665513],
events: {
click: () => {
this.center = [104.07332, 30.665513];
this.zoom = 15;
console.log(this.center, this.zoom);
},
},
visible: true,
title: "这是哪里",
}
],
currentWindow:{
position:[104.016403, 30.657064],
content:'龙爪堰地铁站',
visible:false,
events:{
click:()=>{
this.zoom=15
console.log('lalallalaal')
}
}
}
}
},
};
</script>
<style>
/* 设置地图容器的长和宽，必不可少 */
.amap-wrapper {
width: 100%;
height: 400px;
}
</style>
6. 添加插件
这里添加一个工具ToolBar
<template>
<div>
<div class="amap-wrapper">
<el-amap
class="amap-box"
:vid="map"
:zoom="zoom"
:center="center"
:events="events"
:plugin="pulgin"
>
</el-amap>
</div>
</div>
</template>
<script>
export default {
data() {
return {
center: [104.067571, 30.639665],
lng: 0,
lat: 0,
zoom: 12,
plugin:{
pName: "ToolBar",
events: {
init(instance) {
console.log(instance);
},
},
}
}
},
};
</script>
<style>
/* 设置地图容器的长和宽，必不可少 */
.amap-wrapper {
width: 100%;
height: 400px;
}
</style>