google maps api v3 : 클릭 폴리선 이벤트에서 두 개의 기존 점 사이의 폴리선에 점 추가

클릭 폴리선 이벤트에서 두 개의 기존 점 사이에 점을 추가 할 수 있습니까? 감사합니다.google maps api v3 : 클릭 폴리선 이벤트에서 두 개의 기존 점 사이의 폴리선에 점 추가

2010-08-20 Dronnikkl

단지 Polyline에 대해서 2 점만 말하는 경우 Polyline이 포함 된 LatLngBounds의 중심을 사용할 수 있습니다. Google지도 api v3에서는 Polyline.getBounds() 기능을 구현하지 않습니다. 그래서 당신은 getBounds 기능을 포함하도록 Polyline 클래스를 확장 할 수

google.maps.Polyline.prototype.getBounds = function() { 
    var bounds = new google.maps.LatLngBounds(); 
    this.getPath().forEach(function(e) { 
    bounds.extend(e); 
    }); 
    return bounds; 
};

Polyline.getBounds()을 단 2 점으로 줄에이 라인을 포함하는 영역을 포함합니다. 이 경계의 중심은 라인의 정확한 중심이어야합니다. Polyline에 2 개 이상의 점이 포함되어 있으면 중심점은 클릭 한 선의 중심에 있지 않고 모든 점을 포함하는 경계의 중심에 위치합니다. 이 함수에 다중 세그먼트 폴리 라인을 사용하려면 클릭 한 세그먼트를 계산하는 데 더 많은 계산이 필요합니다. 거기 verticle를 추가 -

그냥 베어링과 거리의 50 %를 계산해야

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Right in Two</title> 

    <style type="text/css"> 
     #map-canvas { 
     height: 500px; 
     } 
    </style> 

    <script type="text/javascript" 
     src="http://www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:'sensor=false'}]}"></script> 
    <script type="text/javascript"> 

     function init() { 
     var mapDiv = document.getElementById('map-canvas'); 
     var map = new google.maps.Map(mapDiv, { 
      center: new google.maps.LatLng(37.790234970864, -122.39031314844), 
      zoom: 5, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     var points = [ 
        new google.maps.LatLng(40.785533,-124.16748), 
        new google.maps.LatLng(32.700413,-115.469971) 
     ]; 

     var line = new google.maps.Polyline({ 
      map: map, 
      path: points, 
      strokeColor: "#FF0000", 
      strokeWeight: 2, 
      strokeOpacity: 1.0 
     }); 

     google.maps.Polyline.prototype.getBounds = function() { 
      var bounds = new google.maps.LatLngBounds(); 
      this.getPath().forEach(function(e) { 
      bounds.extend(e); 
      }); 
      return bounds; 
     }; 

     google.maps.event.addListener(line, 'click', function(e){ 
      var marker = new google.maps.Marker({ 
      map: map, 
      position: line.getBounds().getCenter() 
      }); 
     }); 

     }; 

     google.maps.event.addDomListener(window, 'load', init); 
    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html>

출처

2010-08-23 15:58:43

: 여기

는 2 점 Polyline를 사용하여 작은 예이다.

위의 예는 경계의 중심이며 동일합니다.

이전 및 다음 verticle latlang으로 경계를 확장하는 임시 경계 객체가 필요할 수 있습니다.

출처

2011-04-17 00:00:26

google maps api v3 : 클릭 폴리선 이벤트에서 두 개의 기존 점 사이의 폴리선에 점 추가

답변

관련 문제