先建立一个文件，引入高德 gDMapLoader.js
const ak = '4e9f15de14b05fd8f19e1d8fbe91f0a3' export default function load() { return new Promise(function(resolve, reject) { if (window.AMap) { resolve(window.AMap) } else { var script = document.createElement('script') script.type = 'text/javascript' script.async = true script.src = 'http://webapi.amap.com/maps?v=1.4.15&callback=initAMap&key=4e9f15de14b05fd8f19e1d8fbe91f0a3&plugin=AMap.Geolocation,AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder,AMap.PolyEditor,AMap.MapType,AMap.LabelsLayer,AMap.LabelMarker' script.onerror = reject document.head.appendChild(script) } window.initAMap = () => { resolve(window.AMap) } let mapvglScript = document.createElement('script') mapvglScript.type = 'text/javascript' mapvglScript.src = 'https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.124/dist/mapvgl.min.js' document.head.appendChild(mapvglScript) }) }
后面建立vue文件，使用高德
<template> <div class="w-h-full b-map"> <div class="toolbar" v-if="!$store.state.release.pageMetadata"> <Tooltip content="重置地图位置信息，恢复地图初始化时的中心点和缩放级别，当在设计器中调整地图所属布局块的尺寸之后，可以通过点击此按钮，实现地图的自动适配容器" :max-width="200" placement="right"> <!-- <Button @click="resetMap" type="primary">重置</Button>--> </Tooltip> </div> <div class="w-h-full map-container"></div> </div> </template> <script> import PnDesigner from "@/utils/PnDesigner"; import gDMapLoader from "@/utils/gDMapLoader"; export default { name: "gDMap", props: { mapOption: { type: Object, default () { return PnDesigner.buildgDMapOptionConfigData() } } }, data() { return { map: null } }, mounted() { this.initMap() }, methods: { initMap() { gDMapLoader().then(() => { let mapElement = this.$el.querySelector('.map-container'); const elementID = this.$PnUtil.uuid(); mapElement.id = elementID; this.map = new AMap.Map(elementID, { // restrictCenter: false, resizeEnable: true, rotateEnable: true, pitchEnable: true, pitch: 65, rotation: -15, viewMode: '3D',//开启3D视图,默认为关闭 buildingAnimation: true,//楼块出现是否带动画 enableHighAccuracy: true,//是否使用高精度定位，默认:true expandZoomRange: true, // center:[112.86589,27.88369], // zoom: 17, zooms:[2,20], }); // 设置中心点 this.setCenter(this.mapOption) // // 设置地图类型 this.setMapType(this.mapOption.mapType) // // 设置主题 this.setMapStyle(this.mapOption.stylesJson) // this.map.setStatus({dragEnable: true}); this.map.setStatus({scrollWheel: true}); this.map.setStatus({doubleClickZoom: true}); this.map.setRotation(this.mapOption.heading) this.map.setPitch(this.mapOption.tilt) // this.map.setDisplayOptions({ // skyColors: this.mapOption.skyColors // }) // this.mapOption.dragEnable ? this.map.setStatus({dragEnable: true}) : this.map.setStatus({dragEnable: false}) this.mapOption.scrollWheel ? this.map.setStatus({scrollWheel: true}) : this.map.setStatus({scrollWheel: false}) this.mapOption.doubleClickZoom ? this.map.setStatus({doubleClickZoom: true}) : this.map.setStatus({doubleClickZoom: false}) this.$emit('on-load-map-success', this.map) }) }, // 设置中心点 setCenter (mapOption) { if (mapOption.centerCity) { // this.map.setZoomAndCenter( mapOption.zoom,([mapOption.center[0], mapOption.center[1]])); this.map.setCenter(mapOption.centerCity); this.map.setZoom(mapOption.zoom) }else { // 同时传入缩放级别和中心点经纬度 // map.setZoomAndCenter(14, [116.205467, 39.907761]); this.map.setZoomAndCenter( mapOption.zoom,([mapOption.center[0], mapOption.center[1]])); // this.map.setCenter(mapOption.center[0], mapOption.center[1]) // this.map.setZoom(mapOption.zoom) } }, setMapType (mapType) { switch (mapType) { case "BMAP_NORMAL_MAP": this.map.addControl(new AMap.MapType({ defaultType:0, //0代表默认，1代表卫星 showRoad:true//显示路况（右上角也可点击） })); break case "BMAP_SATELLITE_MAP": this.map.addControl(new AMap.MapType({ defaultType:1, //0代表默认，1代表卫星 showRoad:true//显示路况（右上角也可点击） })); break case "BMAP_HYBRID_MAP": this.map.addControl(new AMap.MapType({ defaultType:0, //0代表默认，1代表卫星 showRoad:true//显示路况（右上角也可点击） })); break case "BMAP_EARTH_MAP": this.map.addControl(new AMap.MapType({ defaultType:1, //0代表默认，1代表卫星 showRoad:true//显示路况（右上角也可点击） })); break } }, // 个性化设置地图 setMapStyle (stylesJson) { if (stylesJson) { this.map.setMapStyle('amap://styles/'+stylesJson) }else { this.map.setMapStyle('amap://styles/blue') } }, resetMap () { this.map.clearMap() } }, computed: {}, watch: { 'mapOption.mapType': function (val) { this.setMapType(val) }, 'mapOption.styleJson': function (val) { this.setMapStyle(val) }, 'mapOption.center': { handler: function (val) { if (!this.mapOption.centerCity) { this.map.setCenter((val[0], val[1])) } }, deep: true }, 'mapOption.centerCity': function (val) { val ? this.map.setCenter(val) : this.map.setCenter((this.mapOption.center[0], this.mapOption.center[1])) }, 'mapOption.zoom': function (val) { this.map.setZoom(val) }, 'mapOption.heading': function (val) { this.map.setRotation(val) }, 'mapOption.tilt': function (val) { this.map.setPitch(val) }, 'mapOption.skyColors': { handler: function (val) { // this.map.setDisplayOptions({ // skyColors: val // }) }, deep: true }, 'mapOption.dragEnable': function (val) { val ? this.map.setStatus({dragEnable: true}) : this.map.setStatus({dragEnable: false}) }, 'mapOption.scrollWheel': function (val) { val ? this.map.setStatus({scrollWheel: true}) : this.map.setStatus({scrollWheel: false}) }, 'mapOption.doubleClickZoom': function (val) { val ? this.map.setStatus({doubleClickZoom: true}) : this.map.setStatus({doubleClickZoom: false}) } } } </script> <style lang="less" scoped> .b-map { position: relative; .toolbar { position: absolute; left: 10px; top: 10px; z-index: 3; } .map-container { z-index: 1; } } </style>
一个工具类 抽出高德的主要map的内容
const buildgDMapOptionConfigData = function (otherConfig = {}) { return PnUtil.deepMerge({ mapType: 'BMAP_NORMAL_MAP', stylesJson: 'blue', center: [112.86589,27.88369], centerCity: '', zoom: 17, heading: 0, tilt: 30, skyColors: ['rgba(0,0,0,0)','rgba(33,150,243,0.3)'], // viewMode:'3D', //开启3D视图,默认为关闭 dragEnable: true, // 地图拖拽 scrollWheel: true, // 滚轮放大缩小 doubleClickZoom: true, // 双击放大 }, otherConfig) }