[javascript] Google Maps API v3에서 여러 마커가있는 자동 중심지도

JAVASCRIPT / 글쓴이

이것은 3 개의 핀 / 마커가있는 맵을 표시하는 데 사용하는 것입니다.

<script>
  function initialize() {
    var locations = [
      ['DESCRIPTION', 41.926979, 12.517385, 3],
      ['DESCRIPTION', 41.914873, 12.506486, 2],
      ['DESCRIPTION', 41.918574, 12.507201, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: new google.maps.LatLng(41.923, 12.513),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  }

  function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize';
    document.body.appendChild(script);
  }

  window.onload = loadScript;
</script>

<div id="map" style="width: 900px; height: 700px;"></div>

내가 찾는 것은로지도의 중심을 “수동으로”찾지 않아도되는 방법입니다 center: new google.maps.LatLng(41.923, 12.513). 세 좌표를 중심으로지도를 자동으로 배치하는 방법이 있습니까?

답변

LatLngBounds두 지점에서 명시 적으로 하나를 만드는 대신 빈을 확장하여 더 쉬운 방법이 있습니다 . (자세한 내용은 이 질문 을 참조하십시오)

다음과 같이 코드에 추가되어야합니다.

//create empty LatLngBounds object
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();    

for (i = 0; i < locations.length; i++) {  
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  //extend the bounds to include each marker's position
  bounds.extend(marker.position);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

//now fit the map to the newly inclusive bounds
map.fitBounds(bounds);

//(optional) restore the zoom level after the map is done scaling
var listener = google.maps.event.addListener(map, "idle", function () {
    map.setZoom(3);
    google.maps.event.removeListener(listener);
});

이런 식으로 임의의 수의 포인트를 사용할 수 있으며 순서를 미리 알 필요가 없습니다.

jsFiddle 데모 : http://jsfiddle.net/x5R63/

답변

라티 투딘 최소 및 경도 최소를 계산해야한다고 생각합니다.

//Example values of min & max latlng values
var lat_min = 1.3049337;
var lat_max = 1.3053515;
var lng_min = 103.2103116;
var lng_max = 103.8400188;

map.setCenter(new google.maps.LatLng(
  ((lat_max + lat_min) / 2.0),
  ((lng_max + lng_min) / 2.0)
));
map.fitBounds(new google.maps.LatLngBounds(
  //bottom left
  new google.maps.LatLng(lat_min, lng_min),
  //top right
  new google.maps.LatLng(lat_max, lng_max)
));

답변

지도의 정확한 중심을 찾으려면 위도 / 경도 좌표를 픽셀 좌표로 변환 한 다음 픽셀 중심을 찾아 위도 / 경도 좌표로 다시 변환해야합니다.

적도의 북쪽이나 남쪽에 따라 드리프트를 인식하거나 신경 쓰지 않을 수 있습니다. setInterval 내에서 map.setCenter (map.getBounds (). getCenter ())를 수행하면 드리프트를 볼 수 있으며 드리프트는 적도에 가까워 질수록 천천히 사라집니다.

다음을 사용하여 위도 / 경도 및 픽셀 좌표 사이를 변환 할 수 있습니다. 픽셀 좌표는 완전히 확대 된 전 세계 평면을 기반으로하지만 그 중심을 찾아서 위도 / 경도로 다시 전환 할 수 있습니다.

   var HALF_WORLD_CIRCUMFERENCE = 268435456; // in pixels at zoom level 21
   var WORLD_RADIUS = HALF_WORLD_CIRCUMFERENCE / Math.PI;

   function _latToY ( lat ) {
      var sinLat = Math.sin( _toRadians( lat ) );
      return HALF_WORLD_CIRCUMFERENCE - WORLD_RADIUS * Math.log( ( 1 + sinLat ) / ( 1 - sinLat ) ) / 2;
   }

   function _lonToX ( lon ) {
      return HALF_WORLD_CIRCUMFERENCE + WORLD_RADIUS * _toRadians( lon );
   }

   function _xToLon ( x ) {
      return _toDegrees( ( x - HALF_WORLD_CIRCUMFERENCE ) / WORLD_RADIUS );
   }

   function _yToLat ( y ) {
      return _toDegrees( Math.PI / 2 - 2 * Math.atan( Math.exp( ( y - HALF_WORLD_CIRCUMFERENCE ) / WORLD_RADIUS ) ) );
   }

   function _toRadians ( degrees ) {
      return degrees * Math.PI / 180;
   }

   function _toDegrees ( radians ) {
      return radians * 180 / Math.PI;
   }

답변

위의 방법을 사용하여 맵 경계를 설정 한 다음 확대 / 축소 수준을 재설정하는 대신 평균 LAT 및 평균 LON을 계산하고 중심점을 해당 위치로 설정합니다. 모든 위도 값을 latTotal에, 모든 론 값을 lontotal에 더한 다음 마커 수로 나눕니다. 그런 다음지도 중심점을 해당 평균값으로 설정합니다.

latCenter = latTotal / 마커 수; lonCenter = lontotal / markercount;

답변

이전 코드를 변경할 수없는 상황이 있었 으므로이 자바 스크립트 함수를 추가하여 중심점과 확대 / 축소 수준을 계산했습니다.

//input
var tempdata = ["18.9400|72.8200-19.1717|72.9560-28.6139|77.2090"];

function getCenterPosition(tempdata){
	var tempLat = tempdata[0].split("-");
	var latitudearray = [];
	var longitudearray = [];
	var i;
	for(i=0; i<tempLat.length;i++){
		var coordinates = tempLat[i].split("|");
		latitudearray.push(coordinates[0]);
		longitudearray.push(coordinates[1]);
	}
	latitudearray.sort(function (a, b) { return a-b; });
	longitudearray.sort(function (a, b) { return a-b; });
	var latdifferenece = latitudearray[latitudearray.length-1] - latitudearray[0];
	var temp = (latdifferenece / 2).toFixed(4) ;
	var latitudeMid = parseFloat(latitudearray[0]) + parseFloat(temp);
	var longidifferenece = longitudearray[longitudearray.length-1] - longitudearray[0];
	temp = (longidifferenece / 2).toFixed(4) ;
	var longitudeMid = parseFloat(longitudearray[0]) + parseFloat(temp);
	var maxdifference = (latdifferenece > longidifferenece)? latdifferenece : longidifferenece;
	var zoomvalue;	
	if(maxdifference >= 0 && maxdifference <= 0.0037)  //zoom 17
		zoomvalue='17';
	else if(maxdifference > 0.0037 && maxdifference <= 0.0070)  //zoom 16
		zoomvalue='16';
	else if(maxdifference > 0.0070 && maxdifference <= 0.0130)  //zoom 15
		zoomvalue='15';
	else if(maxdifference > 0.0130 && maxdifference <= 0.0290)  //zoom 14
		zoomvalue='14';
	else if(maxdifference > 0.0290 && maxdifference <= 0.0550)  //zoom 13
		zoomvalue='13';
	else if(maxdifference > 0.0550 && maxdifference <= 0.1200)  //zoom 12
		zoomvalue='12';
	else if(maxdifference > 0.1200 && maxdifference <= 0.4640)  //zoom 10
		zoomvalue='10';
	else if(maxdifference > 0.4640 && maxdifference <= 1.8580)  //zoom 8
		zoomvalue='8';
	else if(maxdifference > 1.8580 && maxdifference <= 3.5310)  //zoom 7
		zoomvalue='7';
	else if(maxdifference > 3.5310 && maxdifference <= 7.3367)  //zoom 6
		zoomvalue='6';
	else if(maxdifference > 7.3367 && maxdifference <= 14.222)  //zoom 5
		zoomvalue='5';
	else if(maxdifference > 14.222 && maxdifference <= 28.000)  //zoom 4
		zoomvalue='4';
	else if(maxdifference > 28.000 && maxdifference <= 58.000)  //zoom 3
		zoomvalue='3';
	else
		zoomvalue='1';
	return latitudeMid+'|'+longitudeMid+'|'+zoomvalue;
}

스 니펫 확장

답변

누군가이 스레드를 우연히 만날 경우를 대비하여 다음과 같이하십시오.

이 결정 최종 변수 중 하나 파괴 숫자가 아닌 데이터에 대한 보호하는 데 도움이 lat와 lng.

모든 좌표를 가져 와서 배열의 개별 요소 lat와 lng요소 로 구문 분석 한 다음 각각의 평균을 결정하여 작동합니다. 그 평균이 중심이되어야합니다 (그리고 테스트 사례에서 사실로 입증되었습니다).

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}
    };

답변