Vue - Amap高德地图初始化使用以及行政区域聚合功能(script引入方式)
一、引入高德JSAPI
//在项目根目录下的模板index.html中引入下面2个JSAPI <head> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key&plugin=AMap.DistrictSearch,AMap.Scale,AMap.MarkerClusterer"></script> <script type="text/javascript" src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script> <style> /*隐藏地图loge*/ * { touch-action: pan-y; } .amap-logo { opacity: 0; } .amap-copyright { opacity: 0; } .amap-marker-label { border: 0; background-color: transparent; color: #9CA09D; font-size: large; } .info { position: relative; top: 0; right: 0; min-width: 0; font-size: 16px; transform: scale(1); } .info-top > img { position: absolute; right: 0px; top: 0px; width: 1.2rem; height: 1.2rem; } </style> </head>
二、声明externals
//因为是通过script标签引入的,所以要在webpack中将引入的库声明为外部扩展,否则在模块中导入时找不到。如果是vue-cli2的话,直接到build文件夹下的webpack配置文件中添加就行;如果是vue-cli3的话,自己在项目根目录下建一个vue.config.js文件,添加下面的externals配置,然后重启项目,刷新界面。 configureWebpack: config => { config.externals = { AMap: "window.CityGis", "GDAMap": "AMap", }; },
三、初始化地图
<template> <div class="map-container"> <van-search v-model="value" show-action label="上海市" placeholder="请输入关键词" @search="onSearch" > <template #action> <div @click="onSearch">搜索</div> </template> </van-search> <div class="map"> <div id="container" style="width: 100% ;height: 100%"> </div> </div> </div> </template> <script> export default { name:"", components: {}, props: {}, data() { return { value: '', }; }, computed: {}, watch: {}, created() { }, mounted() { this.$nextTick(()=>{ this.initMap(); this.init1("上海市"); }); }, methods: { onSearch() { console.log('搜索',this.value); }, // 地图的初始化 initMap(){ window.map = new window.AMap.Map("container", { zoom: 13, rotateEnable: true, pitchEnable: true, pitch: 0, defaultCursor: "Pointer", showBuildingBlock: false, buildingAnimation: true, expandZoomRange: true, zooms: [0, 20], resizeEnable: true,//是否监控地图容器尺寸变化 features: ['point', 'road', 'bg'],//隐藏默认楼块 viewMode: "3D", }); window.map.setFitView(); window.map.on('zoomchange', this.getZoom); this.setMapStyle('f1a19ef420e096588eff80f7b7be9dc6') this.setZoomCentrer(11, [121.238825, 31.353284]) this.setAreaOilygon()//街镇区域 }, setMapStyle(value) { const myStyle = 'amap://styles/' + value window.map.setMapStyle(myStyle) }, setZoomCentrer(num, lnglat) { window.map.setZoomAndCenter(num, lnglat) }, setAreaOilygon(newkey = ['jiadingzhen']) { let area = require('@/utils/area.json') let areaList = [] for (const key of Object.keys(area)) { areaList.push(key) } for (const key of Object.keys(area)) { if (key && areaList.some(item => item == key)) { const points = [] for (const item of area[key]) { points.push([item.lng, item.lat]) } let polygon = new window.AMap.Polygon({ path: points, strokeWeight: 4, strokeColor: '#01ffff', fillOpacity: 0.7, name: 11, fillColor: '#02a8f5', }) polygon.on('click', this.getAreaOilygon) window.map.add(polygon) } } }, getAreaOilygon(e) { console.log(e); }, //区域遮盖(只显示部分地区遮罩其他地区) init1 (city) { var that =this if( that.polygon ) { window.map.remove(that.polygon) } AMap.plugin('AMap.DistrictSearch', function () { new AMap.DistrictSearch({ extensions: 'all', subdistrict: 0 }).search(city, 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) that.polygon = new AMap.Polygon({ pathL: pathArray, strokeColor: '#ddd',//城市边界颜色 strokeWeight: 3, fillColor: '#fff', // 遮罩背景色黑色 fillOpacity: 1 }) that.polygon.setPath(pathArray) window.map.add(that.polygon) }) }) }, } }; </script> <style scoped lang="scss"> .map { width: 100%; height: 500px; } </style>
天行健,君子以自强不息;地势坤,君子以厚德载物!