Auto-center map with multiple markers in Google Maps API v3

后端 未结 8 998
梦如初夏
梦如初夏 2020-12-07 06:38

This is what I use to display a map with 3 pins/markers:



        
8条回答
  •  离开以前
    2020-12-07 07:33

    Here's my take on this in case anyone comes across this thread:

    This helps protect against non-numerical data destroying either of your final variables that determine lat and lng.

    It works by taking in all of your coordinates, parsing them into separate lat and lng elements of an array, then determining the average of each. That average should be the center (and has proven true in my test cases.)

    var coords = "50.0160001,3.2840073|50.014458,3.2778274|50.0169713,3.2750587|50.0180745,3.276742|50.0204038,3.2733474|50.0217796,3.2781737|50.0293064,3.2712542|50.0319918,3.2580816|50.0243287,3.2582281|50.0281447,3.2451177|50.0307925,3.2443178|50.0278165,3.2343882|50.0326574,3.2289809|50.0288569,3.2237612|50.0260081,3.2230589|50.0269495,3.2210104|50.0212645,3.2133541|50.0165868,3.1977592|50.0150515,3.1977341|50.0147901,3.1965286|50.0171915,3.1961636|50.0130074,3.1845098|50.0113267,3.1729483|50.0177206,3.1705726|50.0210692,3.1670394|50.0182166,3.158297|50.0207314,3.150927|50.0179787,3.1485753|50.0184944,3.1470782|50.0273077,3.149845|50.024227,3.1340514|50.0244172,3.1236235|50.0270676,3.1244474|50.0260853,3.1184879|50.0344525,3.113806";
    
    var filteredtextCoordinatesArray = coords.split('|');    
    
        centerLatArray = [];
        centerLngArray = [];
    
    
        for (i=0 ; i < filteredtextCoordinatesArray.length ; i++) {
    
          var centerCoords = filteredtextCoordinatesArray[i]; 
          var centerCoordsArray = centerCoords.split(',');
    
          if (isNaN(Number(centerCoordsArray[0]))) {      
          } else {
            centerLatArray.push(Number(centerCoordsArray[0]));
          }
    
          if (isNaN(Number(centerCoordsArray[1]))) {
          } else {
            centerLngArray.push(Number(centerCoordsArray[1]));
          }                    
    
        }
    
        var centerLatSum = centerLatArray.reduce(function(a, b) { return a + b; });
        var centerLngSum = centerLngArray.reduce(function(a, b) { return a + b; });
    
        var centerLat = centerLatSum / filteredtextCoordinatesArray.length ; 
        var centerLng = centerLngSum / filteredtextCoordinatesArray.length ;                                    
    
        console.log(centerLat);
        console.log(centerLng);
    
        var mapOpt = {      
        zoom:8,
        center: {lat: centerLat, lng: centerLng}      
        };
    

提交回复
热议问题