一、vue+高德地图开发

最近开发项目地图用的比较频繁，比如高德地图、百度地图或者echars地图，而且大都是用来做路径展示，所以今天说说高德地图的使用（非全面的高德地图使用）

使用的是vue cli3的脚手架

二、使用步骤

首先要去高德地图官网去注册获取密钥

1.安装引入

第一种方法

1、通过npm安装

npm install --save vue-amap

2、在main.js中全局引用

import Amap from "vue-amap"

第二种直接通过cdn引入

<script src="/maps?v=1.4.15&key=密钥&plugin=AMap.DistrictSearch,AMap.Driving"></script>

这种引入需要在vue.config.js中配置

module.exports = {// 放置静态资源的地方 (js/css/img/font/...)assetsDir: 'static',configureWebpack: {externals: {'AMap': 'AMap' // 高德地图配置}},}

我这边是通过第二种方法引入高德地图的

页面使用：

<div style="height:100%;width:100%;outline: none!important;" id="amap"></div><div id="panel"></div><div class="radio-group-car"><el-radio-group v-model="radio1" @change="changePathHandle(1)"><el-radio-button label="1">收费路径</el-radio-button><el-radio-button label="2">稽核路径</el-radio-button><!-- <el-radio-button label="3">全部</el-radio-button> --></el-radio-group></div><script>import {mapGetters } from "vuex";export default {data() {return {radio1: "",switchText: false,switchText1: false,dialogRadio: "",toParams: {lineNameStr: "id",spotNameStr: "name",pathListNameStr: "list",},gantryMap:[ {code:"122"latitude: "31.825610"longitude: "117.421772"name: "龙塘",list:[{code:"122"latitude: "31.808747"longitude: "117.195950"name: "集贤"},{code: "121"image: ""latitude: "30.833253"longitude: "117.76409"name: "铜陵"tollIntervalStatus: "2"transTime: nulltype: 1}]},{code: "113"latitude: "31.825610"longitude: "117.421772"name: "龙塘",list:[{code: "112"latitude: "31.808747"longitude: "117.195950"tollPlazaCode: "G0040340001010"name: "集贤"},{code: "111"image: ""latitude: "30.833253"longitude: "117.76409"name: "铜陵"tollIntervalStatus: "2"transTime: nulltype: 1}]},]};},computed: {...mapGetters(["userInfo"]),},methods: {getCarDetails(value, index) {//我做的是两个路径的，两个路径可以一展示，//也可以单独分开展示通过changePathHandle方法,首先获取值,//这边值写死了，this.drivingDialog(this.gantryMap, 2);},changePathHandle(type) {let arr1 = this.gantryMap;this.Driving_objOld.clear();if (type == 1) {if (this.radio1 == 1) {arr1 = [this.gantryMap[0]];this.radioIndex = 0;} else if (this.radio1 == 2) {arr1 = [this.gantryMap[1]];this.radioIndex = 1;}this.drivingDialog(arr1, 2);} else {if (this.dialogRadio == 1) {arr1 = [this.gantryMap[0]];this.radioIndexDialog = 0;} else if (this.dialogRadio == 2) {arr1 = [this.gantryMap[1]];this.radioIndexDialog = 1;}this.drivingDialog(arr1, 1);}},initMap(value) {//基本地图加载var map = new AMap.Map("amap", {resizeEnable: true,center: [117.17, 31.52], //地图中心点zoom: 7, //地图显示的缩放级别mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式});this.oldMap = map;this.shadeHandle(map);},shadeHandle(map) {new AMap.DistrictSearch({extensions: "all",subdistrict: 0,}).search("安徽省", function (status, result) {// 外多边形坐标数组和内多边形坐标数组var outer = [new AMap.LngLat(-360, 90, true),new AMap.LngLat(-360, -90, true),new AMap.LngLat(360, -90, true),new AMap.LngLat(360, 90, true),];var holes = result.districtList[0].boundaries;var pathArray = [outer];pathArray.push.apply(pathArray, holes);var polygon = new AMap.Polygon({pathL: pathArray,strokeColor: "#00eeff",strokeWeight: 1,fillColor: "#71B3ff",fillOpacity: 0.5,});polygon.setPath(pathArray);map.add(polygon);});},auditHAndle() {this.getCarDetails()this.$nextTick(() => {this.initMap();this.handleINdex = 0;});},getMapOpen() {this.dialogMap = true;this.$nextTick(() => {const lineData = this.gantryMap;var map = new AMap.Map("dialog-amap", {resizeEnable: true,center: [117.17, 31.52], //地图中心点zoom: 7, //地图显示的缩放级别mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式});this.oldDialogMap = map;this.shadeHandle(map);this.dialogRadio = "";this.drivingDialog(lineData, 1);});},drivingDialog(lineData, value, type) {const _this = this;let map = {};let panel = "";let radioIndex = "";if (value == 1) {map = this.oldDialogMap;panel = "dialog-panel";radioIndex = _this.radioIndexDialog;type = this.switchText;} else {map = this.oldMap;panel = "panel";radioIndex = _this.radioIndex;type = this.switchText1;}const {lineNameStr, spotNameStr, pathListNameStr } = _this.toParams;const colors = ["#FF4500", "#0000FF", "#FFF5EE", "#FF7F50", "#FF6347"];AMap.plugin("AMap.Driving", function () {var Driving_obj = new AMap.Driving({// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式map: map,// panel: panel,policy: AMap.DrivingPolicy.LEAST_TIME});_this.Driving_objOld = Driving_obj;_this.Driving_objOld.clear(); // 清理for (let f = 0; f < lineData.length; f++) {const item_path = lineData[f][pathListNameStr];const now_length = item_path.length;// 这里 本数据结构 特殊，//[起点]是单列在父级数据结构内，不在 路径规划list内const nowStartItem = lineData[f];const item_start_path = nowStartItem;item_start_path.longitude = nowStartItem.longitude;item_start_path.latitude = nowStartItem.latitude;item_start_path[spotNameStr] = nowStartItem.name;const item_end_path = item_path[now_length - 1];const now_arr = item_path.slice(0, now_length - 1); // 这里 本数据结构 特殊，//[起点]是单列在父级数据结构内，不在 路径规划list内const item_way_path = now_arr.map((item) => {return new AMap.LngLat(item.longitude, item.latitude);});Driving_obj.search(new AMap.LngLat(item_start_path.longitude,item_start_path.latitude),new AMap.LngLat(item_end_path.longitude, item_end_path.latitude),{waypoints: item_way_path },function (status, result) {// searchResult即是对应的驾车导航信息，//相关数据结构文档请参考 ///api/javascript-api/reference/route-search#m_DrivingResultif (status === "complete") {console.log("获取车辆路径规划数据成功");if (result.routes && result.routes.length) {drawRoute(result.routes[0], f);}} else {console.log("获取车辆路径规划数据失败：" + result);}});function splitArr(ar, size = 1) {let index = 0;let res = [];while (index < ar.length) {res.push(ar.slice(index, (index+size)));index += size;}return res;}if(now_arr.length>15){const newArr = splitArr(now_arr,15)newArr.forEach(el=>{_this.createMarkerNormal(lineData[f][lineNameStr],el,map,type);})}else{_this.createMarkerNormal(lineData[f][lineNameStr],now_arr,map,type);}_this.createMarkerOne(lineData[f][lineNameStr],item_start_path,"起点",map);_this.createMarkerOne(lineData[f][lineNameStr],item_end_path,"终点",map);}// 行驶路线规划function drawRoute(route, index) {if (radioIndex != "") {index = radioIndex;}console.log(colors[index], index);const path = _this.parseRouteToPath(route);let routeLine_obj = {};// 生成 折线路线routeLine_obj = new AMap.Polyline({zIndex: 52,path: path,isOutline: true,outlineColor: "#ffeeee",borderWeight: 2,strokeWeight: 5,strokeColor: colors[index] || "#A52A2A",lineJoin: "round",});routeLine_obj.setMap(map);}});},getTextName(type) {if (type == 1) {this.oldMap.clearMap();} else {this.oldDialogMap.clearMap();}this.changePathHandle(type);},createMarkerNormal(lineName, now_arr, map, type) {// 途径节点 marker(集合)- 此处用了 new AMap.Text 需 版本1.4.2const {lineNameStr, spotNameStr, pathListNameStr } = this.toParams;let image = "";const middleMarkers = [];// -------- 中途 站点-----------//因为需求，有不同状态的途径点，所以通过颜色的图片展示，//需要将原来的途径点css样式重写，看下面css样式 now_arr.forEach((item, index) => {if (item.tollIntervalStatus == 1) {image = require("@/assets/images/mjps.png");} else if (item.tollIntervalStatus == 2 ||item.tollIntervalStatus == 3) {image = require("@/assets/images/mj.png");} else if (item.tollIntervalStatus == 6 ||item.tollIntervalStatus == 5) {image = require("@/assets/images/no.png");} else if (item.tollIntervalStatus == 4) {image = require("@/assets/images/ps.png");} else {image = require("@/assets/images/nomal.png");}// 创建一个 Iconlet siteIcon = {};siteIcon = new AMap.Icon({// 图标尺寸size: new AMap.Size(19, 34),// 图标的取图地址image: image,// 图标所用图片大小imageSize: new AMap.Size(19, 34),// 图标取图偏移量imageOffset: new AMap.Pixel(0, 0),});const siteMarker = new AMap.Marker({icon: siteIcon,position: new AMap.LngLat(item.longitude, item.latitude),// offset: new AMap.Pixel(-12, -32),map: map,});const clickHandler1 = function (e) {console.log(1111)};siteMarker.on("click", clickHandler1);return this.creatTextName(map, siteMarker, item, middleMarkers, type);});},creatTextName(map, siteMarker, item, middleMarkers, type) {const {lineNameStr, spotNameStr, pathListNameStr } = this.toParams;// 给 Text 带上自定义私货siteMarker.lisaSiteInfo = item;// 监听地图- Text 的 点击事件const imgs = []const img = this.changeImgUrl(item.image),//途径点上面的marker添加事件显示图片infoWindowContent = `<div>通行图片</div><img src="${img}" style="width:300px;heigth:300px" />`;const clickHandler1 = function (e) {// log.success("carText模拟触发了地图click事件!");console.log(e, "e");const siteInfo = e.target.lisaSiteInfo;new AMap.InfoWindow({content: infoWindowContent,}).open(map, e.lnglat);};siteMarker.on("click", clickHandler1);siteMarker.setMap(map);middleMarkers.push(siteMarker);//-------siteText-------// label默认蓝框白底左上角显示，样式className为：amap-marker-labellet text = "";if (type) {text = item[spotNameStr];} else {text = "";}const siteText = new AMap.Text({offset: new AMap.Pixel(0, -50), //设置文本标注偏移量text: text,position: new AMap.LngLat(item.longitude, item.latitude), // 这里特殊 本数据结构， startLatitudemap: map,});siteText.lisaSiteInfo = item;siteText.on("click", clickHandler1);siteText.setMap(map);middleMarkers.push(siteText);return middleMarkers;},// 起点 或 终点 marker(单个)createMarkerOne(lineName, item, type, map) {const {lineNameStr, spotNameStr, pathListNameStr } = this.toParams;let iconUrl = "",siteName = "";if (type === "起点") {iconUrl = "/theme/v1.3/markers/n/start.png";siteName = "起点";} else if (type === "终点") {iconUrl = "/theme/v1.3/markers/n/end.png";siteName = "终点";}// -------- 站点-----------const oneMarker = new AMap.Marker({icon: iconUrl,position: new AMap.LngLat(item.longitude, item.latitude),offset: new AMap.Pixel(-9, -32),map: map,});// 给 Text 带上自定义私货oneMarker.lisaSiteInfo = item;oneMarker.setMap(map);//-------siteText-------// label默认蓝框白底左上角显示，样式className为：amap-marker-labelconst siteText = new AMap.Text({offset: new AMap.Pixel(0, -50), //设置文本标注偏移量text: item[spotNameStr],position: new AMap.LngLat(item.longitude, item.latitude), // 这里特殊 本数据结构， startLatitudemap: map,});siteText.lisaSiteInfo = item;siteText.setMap(map);return oneMarker;},getQueryBigDataVehChangeInfo(value){const data = {"mediaType": "2","vehID": value}this.$get(this.$Url.queryBigDataVehChangeInfo, data).then((res) => {this.queryBigDataVehChangeInfo = res.data || {};})},parseRouteToPath(route) {const path = [];for (let i = 0, l = route.steps.length; i < l; i++) {const step = route.steps[i];for (let j = 0, n = step.path.length; j < n; j++) {path.push(step.path[j]);}}return path;},},mounted() {},created() {this.auditHAndle();},};</script><style>.amap-lib-marker-mid {background: none;}</style>