자바 스크립트를 사용하여 Google지도에서 다각형 그리기

Google지도에서 다각형을 그려야하고 http://jsfiddle.net/rvsMH/1/에서 예제 코드를 사용하고 있지만 작동하지 않고 배열이나 lat 값이 오래 가지 않습니다. 문제가 무엇인지 모릅니다. 나는 Google지도를 처음 사용하는 사람을 도와주세요. 미리 감사드립니다.자바 스크립트를 사용하여 Google지도에서 다각형 그리기

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<!DOCTYPE html> 
<!DOCTYPE html> 
<html> 
    <head> 
    <title>Drawing tools</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body, #map-canvas { 
     height: 70%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing"></script> 
    <script> 
var map; // Global declaration of the map 
      var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow 
      var lat_longs = new Array(); 
      var markers = new Array(); 
      var drawingManager; 
      function initialize() { 
       var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096); 
       var myOptions = { 
        zoom: 13, 
        center: myLatlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP} 
       map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); 
       drawingManager = new google.maps.drawing.DrawingManager({ 
       drawingMode: google.maps.drawing.OverlayType.POLYGON, 
       drawingControl: true, 
       drawingControlOptions: { 
        position: google.maps.ControlPosition.TOP_CENTER, 
        drawingModes: [google.maps.drawing.OverlayType.POLYGON] 
       }, 
         polygonOptions: { 
          editable: true 
         } 
      }); 
      drawingManager.setMap(map); 

      google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) { 
       var newShape = event.overlay; 
       newShape.type = event.type; 
      }); 

      google.maps.event.addListener(drawingManager, "overlaycomplete", function(event){ 
       overlayClickListener(event.overlay); 
       $('#vertices').val(event.overlay.getPath().getArray()); 
      }); 
     } 
function overlayClickListener(overlay) { 
    google.maps.event.addListener(overlay, "mouseup", function(event){ 
     $('#vertices').val(overlay.getPath().getArray()); 
    }); 
} 
initialize(); 

$(function(){ 
    $('#save').click(function(){ 
     //iterate polygon vertices? 
    }); 
}); 

    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    <form method="post" accept-charset="utf-8" id="map_form"> 
    <input type="text" name="vertices" value="" id="vertices" /> 
    <input type="button" name="save" value="Save!" id="save" /> 
</form> 
    </body> 
</html>

출처

2014-12-28 sam mari

당신은 ID = "map_canvas 인 요소를 가지고 있지 않습니다

google.maps.event.addDomListener(window, 'load', initialize);

작업 코드 : 해당 기능을 실행하기 위해 <body> onload 이벤트 또는 Google Maps Javascript API v3 addDomListener on window 중 하나를 사용 "귀하의 코드에서 귀하의"지도 "div id ="map-canvas "[작업 피들] (http://jsfiddle.net/b2uwrLbp/) – geocodezip

body 태그에 id ="map-canvas "로 div 있습니다. –

jquery 링크/파일을 포함해야합니까? –

당신은 페이지의 DOM이로드 된 후 초기화 기능을 실행해야합니다. 현재 초기화는 DOM이 렌더링되기 전에 인라인으로 실행됩니다.

var map; // Global declaration of the map 
 
      var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow 
 
      var lat_longs = new Array(); 
 
      var markers = new Array(); 
 
      var drawingManager; 
 
      function initialize() { 
 
       var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096); 
 
       var myOptions = { 
 
        zoom: 13, 
 
        center: myLatlng, 
 
        mapTypeId: google.maps.MapTypeId.ROADMAP} 
 
       map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); 
 
       drawingManager = new google.maps.drawing.DrawingManager({ 
 
       drawingMode: google.maps.drawing.OverlayType.POLYGON, 
 
       drawingControl: true, 
 
       drawingControlOptions: { 
 
        position: google.maps.ControlPosition.TOP_CENTER, 
 
        drawingModes: [google.maps.drawing.OverlayType.POLYGON] 
 
       }, 
 
         polygonOptions: { 
 
          editable: true 
 
         } 
 
      }); 
 
      drawingManager.setMap(map); 
 

 
      google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) { 
 
       var newShape = event.overlay; 
 
       newShape.type = event.type; 
 
      }); 
 

 
      google.maps.event.addListener(drawingManager, "overlaycomplete", function(event){ 
 
       overlayClickListener(event.overlay); 
 
       $('#vertices').val(event.overlay.getPath().getArray()); 
 
      }); 
 
     } 
 
function overlayClickListener(overlay) { 
 
    google.maps.event.addListener(overlay, "mouseup", function(event){ 
 
     $('#vertices').val(overlay.getPath().getArray()); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 
$(function(){ 
 
    $('#save').click(function(){ 
 
     //iterate polygon vertices? 
 
    }); 
 
});

html, body, #map-canvas { 
 
     height: 70%; 
 
     margin: 0px; 
 
     padding: 0px 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing"></script> 
 
<div id="map-canvas"></div> 
 
<form method="post" accept-charset="utf-8" id="map_form"> 
 
    <input type="text" name="vertices" value="" id="vertices" /> 
 
    <input type="button" name="save" value="Save!" id="save" /> 
 
</form>

출처

2014-12-29 12:00:43 geocodezip

자바 스크립트를 사용하여 Google지도에서 다각형 그리기

답변

관련 문제