版權聲明：本文為博主原創文章，未經博主允許不得轉載。 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;
}
 

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; ?//km
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case 4:
? ? ? ? ? ? ? ? var targetDistance=400; ?//km
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case 5:
? ? ? ? ? ? ? ? var targetDistance=200; ?//km
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case 6:
? ? ? ? ? ? ? ? var targetDistance=120; ?//km
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case 7:
? ? ? ? ? ? ? ? var targetDistance=60; ?//km
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case 8:
? ? ? ? ? ? ? ? var targetDistance=30; ?//km
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case 9:
? ? ? ? ? ? ? ? var targetDistance=15; ?//km
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case 10:
? ? ? ? ? ? ? ? var targetDistance=7; ?//km
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case 11:
? ? ? ? ? ? ? ? var targetDistance=4; ?//km
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case 12:
? ? ? ? ? ? ? ? var targetDistance=1; ?//km
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case 13:
? ? ? ? ? ? ? ? var targetDistance=0.5; ?//km
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? 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