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.4v: '1.4.15',//ui版本，可以不用写uiVersion: '1.0.11'});
3. vue-amap使用
新建一个vue页面，center:确定地图初始化后的中心，zoom:地图缩放级别
<template><div><div class="amap-wrapper"><el-amapclass="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-amapclass="amap-box":vid="map":zoom="zoom":center="center":events="events"><!-- 添加marker--><el-amap-markerv-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-amapclass="amap-box":vid="map":zoom="zoom":center="center":events="events"><!-- 添加marker--><el-amap-markerv-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=15console.log('lalallalaal')}}}}},};</script><style>/* 设置地图容器的长和宽，必不可少 */.amap-wrapper {width: 100%;height: 400px;}</style>
6. 添加插件
这里添加一个工具ToolBar
<template><div><div class="amap-wrapper"><el-amapclass="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>
