地图安装
npm install vue-amap --save
项目中设置高德地图
安装成功后在main.js设置以下内容
import VueAMap from 'vue-amap'Vue.use(VueAMap)VueAMap.initAMapApiLoader({key: '你的key',plugin: ['AMap.MouseTool', 'AMap.PolyEditor', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder', 'AMap.DistrictSearch', 'AMap.InfoWindow'],v: '1.4.4',uiVersion: '1.0',})
组件中引入安装好的高德组件：
<el-amap :amap-manager="amapManager" :events="events" :center="center" :zoom="zoom" :plugin="plugin" class="amap-demo" />
import {AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'const amapManager = new AMapManager() // 新建生成地图画布export default {data() {const self = this return {car: require('@/assets/images/car1.png'), // 车辆图片map: null,amapManager,marker: null,events: {init(o) {lazyAMapApiLoaderInstance.load().then(() => {self.initMap()})},},center: [121.472644, 31.231706],zoom: 10,plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geocoder', 'AMap.Geolocation', 'AMap.InfoWindow'],}},methods: {// 初始化地图initMap() {const map = amapManager.getMap()this.map = map},initCar() {// 构建车辆const that = thisAMapUI.loadUI(['overlay/SimpleInfoWindow', 'overlay/SimpleMarker'], function (SimpleInfoWindow, SimpleMarker) {for (let i = 0; i < that.vehicleInfoList.length; i++) {const item = that.vehicleInfoList[i]const marker = new SimpleMarker({iconStyle: that.car,// 显示定位点// showPositionPoint:true,map: that.map,position: [item.longitude, item.latitude],// Marker的label(见/api/javascript-api/reference/overlay/#Marker)label: {content: item.vehicleNo,offset: new AMap.Pixel(0, 30),},})const infoWindow = new SimpleInfoWindow({// 模板, underscoreinfoTitle: '',infoBody: `<div class="vehicleCar"><div>车型：${item.vehicleTypeName}</div><div>司机：${item.driverName}</div><div>联系方式：${item.driverPhone}</div><div>已配数：${item.assignedWaybillCount}</div><button class="mybtn">添加车辆</button></div>`,// 基点指向marker的头部位置offset: new AMap.Pixel(0, -31),})marker.on('click', function () {that.openInfoWin(infoWindow, marker)})infoWindow.get$InfoBody().on('click', '.mybtn', function (event) {// 阻止冒泡event.stopPropagation()that.addVehicleInfo(item)})}})}},openInfoWin(infoWindow, marker) {infoWindow.open(this.map, marker.getPosition())},}
