原文:基于高德地圖的描點操作，監聽地圖縮放，展示合理數量的marker

版權聲明：本文為博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/lx583274568/article/details/54089707

1.根據兩點經緯度算兩點之間的距離函數

function Rad(d){return d * Math.PI / 180.0;//經緯度轉換成三角函數中度分表形式。} //計算距離，參數分別為第一點的緯度，經度；第二點的緯度，經度 function GetDistance(lat1,lng1,lat2,lng2){var radLat1 = Rad(lat1);var radLat2 = Rad(lat2);var a = radLat1 - radLat2;var b = Rad(lng1) - Rad(lng2);var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));s = s *6378.137 ;// EARTH_RADIUS;s = Math.round(s * 10000) / 10000; //輸出為公里//s=s.toFixed(4);return s; }
2.給地圖綁定監聽事件

map.on("zoomchange",function(){for (var i = pathContentArr.length - 1; i >= 0; i--) {pathContentArr[i].setMap(null);}for (var i = pathMarkerArr.length - 1; i >= 0; i--) {pathMarkerArr[i].setMap(null);}pathMarkerArr=[];pathContentArr=[];drawMarkerByDistance(map.getZoom())})

3.drawMarkerByDistance函數【會根據第i個點和第i+1個點之間的距離進行初步篩選，其中select函數對初步篩選出來的點進行了所有點兩兩之間距離的二次篩選】

function drawMarkerByDistance(zoom){var perDistance=0; ? //當前累計公里數var zoom=zoom||6;switch (zoom){case 3:var targetDistance=800; ?//kmbreak;case 4:var targetDistance=400; ?//kmbreak;case 5:var targetDistance=200; ?//kmbreak;case 6:var targetDistance=120; ?//kmbreak;case 7:var targetDistance=60; ?//kmbreak;case 8:var targetDistance=30; ?//kmbreak;case 9:var targetDistance=15; ?//kmbreak;case 10:var targetDistance=7; ?//kmbreak;case 11:var targetDistance=4; ?//kmbreak;case 12:var targetDistance=1; ?//kmbreak;case 13:var targetDistance=0.5; ?//kmbreak;default:var targetDistance=0.25; ?//km}var prepareToShowMarker=[];for (var i = 0; i < curShipPolyLineData.length; i++) {//第一個點和最后一個點默認展示出來,累計長度大于目標長度的畫出來if (i==0||i==curShipPolyLineData.length-1 || (curShipPolyLineData[i].distance+perDistance)>targetDistance) {var marker={lat:parseFloat(curShipPolyLineData[i].latitude),lng:parseFloat(curShipPolyLineData[i].longitude),course:curShipPolyLineData[i].course,AddTime: curShipPolyLineData[i].AddTime,}prepareToShowMarker.push(marker);}if(i<curShipPolyLineData.length-1 && i>1){if ((curShipPolyLineData[i].distance+perDistance)>targetDistance) {perDistance=0;}else{perDistance+=curShipPolyLineData[i].distance;}}}var select=function(arr){var flag=true;for(var i=0;i<arr.length;i++){for(var j=i+1;j<arr.length;j++){var curdistance=GetDistance(arr[i].lat,arr[i].lng,arr[j].lat,arr[j].lng);//如果還有靠得很近的點if (curdistance<targetDistance) {flag=false;//隨機剔除掉一個i和j之間的一個點Math.random()>0.5?arr.splice(i,1):arr.splice(j,1);break;}}if(flag==false){break;}}//當數組中所有的點兩兩之間的距離都大于targetDistance的時候退出遞歸if (flag==false) {select(arr);}}select(prepareToShowMarker);for (var i = prepareToShowMarker.length - 1; i >= 0; i--) {var position=[prepareToShowMarker[i].lng,prepareToShowMarker[i].lat];var content = new AMap.Marker({content:prepareToShowMarker[i].AddTime,position: position,title: prepareToShowMarker[i].AddTime,offset:new AMap.Pixel(20,0),map: map});pathContentArr.push(content);var marker = new AMap.Marker({offset:new AMap.Pixel(0,0),icon:"new_images/arrow_r.png",angle:((prepareToShowMarker[i].course-90)%360),position: position,map: map});pathMarkerArr.push(marker);}}

總結

以上是生活随笔為你收集整理的基于高德地图的描点操作，监听地图缩放，展示合理数量的marker的全部內容，希望文章能夠幫你解決所遇到的問題。

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