vue2+typescript使用高德地图2.0版本

高德地图 webjs api 2.0官网教程

AMap.Driving使用说明

<div class="mmp"><div id="map" ref="mapcontainer"></div></div><script lang="ts">
//安全密钥
window._AMapSecurityConfig={securityJsCode: "高德地图key密钥",
}
import { Component, Emit, Vue } from "vue-property-decorator";
import AMapLoader from "@amap/amap-jsapi-loader";
@Component
export default class HomeView extends Vue {AMap: any = undefined;map: any = undefined;start: any = [];end: any = [];zoom: number = 10;getInMap() {AMapLoader.load({key: "高德地图key值",version: "2.0",plugins: ["AMap.Scale"],}).then((AMap: any) => {this.map = new AMap.Map("map", {resizeEnable: true,zoom: this.zoom,center: this.start, //地图中心点});this.AMap = AMap;this.initMap(AMap);}).catch((e) => {console.error(e);});}initMap(AMap: any) {this.map.on("zoomchange", () => {var zoom = this.map.getZoom();this.zoom = zoom;});this.map.on("zoomend", () => {});var that = this;// 添加起点和终点const startMarker = new AMap.Marker({position: that.start,});const endMarker = new AMap.Marker({position: that.end,});that.map.add(startMarker);that.map.add(endMarker);// 绘制路线AMap.plugin(["AMap.Driving"], function () {var driving = new AMap.Driving({map: that.map,policy: AMap.DrivingPolicy.LEAST_TIME,// panel: "panel",});driving.search(new AMap.LngLat(that.start[0], that.start[1]),new AMap.LngLat(that.end[0], that.end[1]),function (status: any, result: any) {if (status === "complete") {console.log("绘制驾车路线完成");} else {console.log("获取驾车数据失败：" + result);}});});}mounted() {let a: any = this.$route.query.a;//"120.111111,45.111111"let b: any = this.$route.query.b;//"120.111111,45.111111"this.start = a.split(",");this.end = b.split(",");this.getInMap();}
}
</script>
<style lang="scss" scoped>
#map {width: 100%;height: calc(100vh - 46px);background-color: rgb(238, 235, 236);
}
.mmp {display: flex;justify-content: space-between;
}
#panel {width: 20%;height: 100%;
}
</style>

自定义声明window（shims-vue.d.ts）

declare module "*.vue" {import Vue from "vue";export default Vue;
}
interface Window {_AMapSecurityConfig: {securityJsCode: string;}
}
declare let window: Window