效果圖

準備工作

• 高德地圖申請key
• 安裝Echarts 中國地圖

高德地圖

• 官方API：點我進入
• 創建AMap.js

export default function MapLoader () {return new Promise((resolve, reject) => {if (window.AMap) {resolve(window.AMap)} else {// 動態創建script標簽var script = document.createElement('script')script.type = 'text/javascript'script.async = truescript.src = 'https://webapi.amap.com/maps?v=1.4.9&callback=initAMap&key=Key&plugin=AMap.DistrictSearch,AMap.Circle,AMap.LngLat,AMap.Polyline,AMap.LngLat,AMap.Text,AMap.Geocoder';// plugin后的是需要的插件script.onerror = rejectdocument.head.appendChild(script)}window.initAMap = () => {resolve(window.AMap)}}) } 復制代碼

Echarts 中國地圖

• 安裝Echarts

npm install echarts -S 復制代碼

開始使用

• 創建組件 distribution.vue
• 寫入Echarts 需要的DOM

<div class="main_wrap" ><div ref="main" class="main_box"></div><div class="Rankingtips"><p>分布指數</p><div class="color_tip"><span style="float: left">高</span><div></div><div></div><div></div><div></div><div></div><span style="margin-left: 5px">低</span></div></div></div> 復制代碼

• 寫入高德地圖需要的DOM

<div class="main_wrap" v-show="activeState2"><div id="container" style="height: 100%"></div></div> 復制代碼

• 引入高德地圖、Echarts

import 'echarts/map/js/china'; //中國地圖jsimport MapLoader from 'components/home/AMap' 復制代碼

• Echarts方法

generateEcharts() {var echarts = require('echarts');var myChart = echarts.init(this.$refs.main); // 基于準備好的dom，初始化echarts實例this.$ajax.get(this.HOST + "/redesign/home/findEnterpriseistribution").then( (res) => {// 數據格式// [// {name: "北京", value: 3, ranking: 1},// {name: "河北", value: 2, ranking: 2},// {name: "上海", value: 1, ranking: 3},// {name: "廣東", value: 1, ranking: 4}// ...// ]this.homebution = res.data.resultObject;var data = [];for (let i = 0; i < res.data.resultObject.length; i++) {this.homebutionnum += res.data.resultObject[i].value;let classnum = ""// 排名顯示樣式if(res.data.resultObject[i].ranking == 1) { classnum = "#1669e6"}else if(res.data.resultObject[i].ranking > 1 && res.data.resultObject[i].ranking <= 4) {classnum = "#31a4ed"}else if(res.data.resultObject[i].ranking > 4 && res.data.resultObject[i].ranking <= 10) {classnum = '#2cccfd'}else if(res.data.resultObject[i].ranking > 10 && res.data.resultObject[i].ranking <= 20) {classnum = '#7fe2fd'}else {classnum = '#d9f4fe'}data.push({name: res.data.resultObject[i].name,itemStyle: {normal: {areaColor: classnum,// borderWidth: 2},emphasis: {//高亮狀態下的多邊形和標簽樣式borderWidth: 1,// borderColor: '#d9f4fe',areaColor: '#d9f4fe',label: {shadowColor: '#d9f4fe', //默認透明shadowBlur: 10,show: true,textStyle: {fontSize: 12,color: '#3db77f'}}}},label: {normal: {show: true,textStyle: {fontSize: 12,color: '#0d6fb8'}},emphasis: {show: true,color: '#3db77f'}},value: res.data.resultObject[i].value ? res.data.resultObject[i].value: "",ranking: res.data.resultObject[i].ranking ? res.data.resultObject[i].ranking: ""})}// 準備提示數據var option = {tooltip: {formatter: (params) => {var info = "";if(params.data) {info = `<div style="width: 60px;height: 60px"><p style="font-size:12px">${ params.name }</p><p style="font-size:12px">${ params.data.value }</p><p style="font-size:12px">排名：${ params.data.ranking }</p></div>`}else {info = `<div style="width: 60px;height: 60px"><p style="font-size:12px">${ params.name }</p></div>`}return info;},backgroundColor: "rgba(0,0,0,.6)",//提示標簽背景顏色textStyle: { color: "#fff" } //提示標簽字體顏色},//配置屬性series: [{ name: '數據', type: 'map', mapType: 'china', roam: true, label: { normal: { show: false //省份名稱 }, emphasis: { show: false } }, data: data //數據}],};//使用制定的配置項和數據顯示圖表myChart.setOption(option);}) } 復制代碼

• 高德地圖方法

Scottmap() {let that = this;that.map = "";MapLoader().then(AMap => {console.log('地圖加載成功')that.map = new AMap.Map('container', {center: [116.05438, 38.98065],// center: [116.397428, 39.90923],zoom: 5})// 由于項目是按雄安地區使用 API暫時還未把雄安劃分 所以決定把安新縣、雄縣、容城縣（三縣合一就是雄安）繪制成高亮// 繪制高亮var district = new AMap.DistrictSearch({// 返回行政區邊界坐標等具體信息extensions: 'all',// 設置查詢行政區級別為 區 level: 'district'})var polygons=[];var polygons2=[];var polygons3=[];district.search('安新縣', (status, result) => {if(polygons) {that.map.remove(polygons)//清除上次結果}polygons = [];let bounds = result.districtList[0].boundaries;if (bounds) {for (let i = 0; i < bounds.length; i++) {//生成行政區劃polygonvar polygon = new AMap.Polygon({strokeWeight: 1,path: bounds[i],fillOpacity: 0.4,fillColor: '#80d8ff',strokeColor: '#0091ea'});polygons.push(polygon);}}that.map.add(polygons);});district.search('雄縣', (status2, result2) => {if(polygons2) {that.map.remove(polygons2)//清除上次結果}polygons2 = [];let bounds = result2.districtList[0].boundaries;if (bounds) {for (let i = 0; i < bounds.length; i++) {//生成行政區劃polygonvar polygon = new AMap.Polygon({strokeWeight: 1,path: bounds[i],fillOpacity: 0.4,fillColor: '#80d8ff',strokeColor: '#0091ea'});polygons2.push(polygon);}}that.map.add(polygons2)})district.search('容城縣', (status2, result2) => {if(polygons3) {that.map.remove(polygons2)//清除上次結果}polygons3 = [];let bounds = result2.districtList[0].boundaries;if (bounds) {for (let i = 0; i < bounds.length; i++) {//生成行政區劃polygonvar polygon = new AMap.Polygon({strokeWeight: 1,path: bounds[i],fillOpacity: 0.4,fillColor: '#80d8ff',strokeColor: '#0091ea'});polygons3.push(polygon);}}that.map.add(polygons3)})// 構造矢量圓形（圓）let circle = new AMap.Circle({center: [116.05438, 38.98065], // 雄安的中心點radius: that.distance * 1000, //半徑strokeColor: "#ffffff", //線顏色strokeOpacity: 1, //線透明度strokeWeight: 3, //線粗細度fillColor: "#276cd4", //填充顏色fillOpacity: 0.2 //填充透明度});that.map.add(circle);that.map.setFitView(circle);let lnglat = new AMap.LngLat(116.05438, 38.98065) // lng, lat 替換成傳入的坐標 let polylinePath = [new AMap.LngLat(116.05438, 38.98065),new AMap.LngLat(lnglat.offset(that.distance * 1000,0).lng,38.98065)];// 創建線覆蓋物let polyline = new AMap.Polyline({path: polylinePath,strokeColor: "#ffffff", //線顏色strokeOpacity: 1, //線透明度strokeWeight: 2, //線寬strokeStyle: "solid", //線樣式strokeDasharray: [10, 5] //補充線樣式});that.map.add(polyline);// 繪制字let textPos = lnglat.offset(that.distance * 500,that.distance * 50);let text = new AMap.Text({text: `${ that.distance }公里`,position: textPos,map: this.map,style:{'background': 'transparent','border': '0 none','color': '#276cd4','font-size':'14px'}})that.map.add(text);// 測試距離let Centralpoint = [116.05438, 38.98065];let targetpoint = this.region// debugger// 轉經緯度let geocoder = new AMap.Geocoder({city: '全國', //城市設為北京，默認：“全國”});let markernum = 0for (let i = 0; i < targetpoint.length; i++) {geocoder.getLocation(targetpoint[i], (status, result) => {if (status === 'complete'&& result.geocodes.length) {let dis = AMap.GeometryUtil.distance(Centralpoint,result.geocodes[0].location);// 繪制點標記顯示內容，HTML要素字符串if(dis <= that.distance * 1000) {markernum++;let markerContent = '' +'<div class="custom-content-marker" style="position: relative;">' +' <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png" style="width: 23px;height: 30px">' +'<div style="width: 23px;position: absolute;left: 0px;top: 0;margin: auto;color: #ffffff;text-align: center">'+ markernum +'</div>'+'</div>';this.$ajax.get(this.HOST + "/redesign/home/findCompanyAll").then( (res) => {this.matchingenterpriseList.push(res.data.resultObject[i])})let marker = new AMap.Marker({content: markerContent, position: result.geocodes[0].location,offset: new AMap.Pixel(-13, -30),extData:{id: markernum}});that.markers.push(marker);marker.setMap(this.map);}}})}that.matchingenterpriseState = true;}, e => {console.log('地圖加載失敗' ,e)}) }, 復制代碼

• 左側企業列表

// 企業鼠標經過 matchingenterprisemouseenter(item,index) {this.activemetchmouseenter = index;let targetMarker = {};for (let i = 0; i < this.markers.length; i++) {let id = this.markers[i].getExtData().id;if(id == index){targetMarker = this.markers[i];break;}}// 重新替換樣式let markerContent = '' +'<div class="custom-content-marker" style="position: relative;">' +' <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png" style="width: 25px;height: 34px">' +'<div style="position: absolute;left: 9px;top: 0;margin: auto;color: #ffffff">'+ index +'</div>'+'</div>';// targetMarker.setIcon('//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png');targetMarker.setContent(markerContent)let position = targetMarker.getPosition();this.infoWindow = new AMap.InfoWindow({position: position,offset: new AMap.Pixel(0, -35),content: item.companyName});this.infoWindow.open(this.map); }, 復制代碼// 企業鼠標離開 matchingenterprisemouseleave(item,index) {this.activemetchmouseenter = "";let targetMarker = {};for (let i = 0; i < this.markers.length; i++) {let id = this.markers[i].getExtData().id;if(id == index){targetMarker = this.markers[i];break;}}let markerContent = '' +'<div class="custom-content-marker" style="position: relative;">' +' <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png" style="width: 25px;height: 34px">' +'<div style="position: absolute;left: 9px;top: 0;margin: auto;color: #ffffff">'+ index +'</div>'+'</div>';// targetMarker.setIcon('//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png');targetMarker.setContent(markerContent)this.map.remove(this.infoWindow); }, 復制代碼// 企業點擊 matchingenterpriseclick(item,index) {this.activeState3 = true;this.activeState1 = false;this.activeState = false;this.itemList = item;// this.map.remove(overlayGroups);let geocoder = new AMap.Geocoder({city: '全國', //城市設為北京，默認：“全國”});geocoder.getLocation(item.address, (status, result) => {this.map.setCenter(result.geocodes[0].location); //設置地圖中心點this.map.setZoom(30); // 縮放級別}) }, 復制代碼

具體代碼

總結

以上是生活随笔為你收集整理的VUE 记一次高德地图和Echarts（中国地图）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。