BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] javascriptでgoogle mapにポリゴンを描画する。

2022-03-05 19:03:43

質問

Google Mapにポリゴンを描きたいのですが、以下のサンプルコードを使っています。 http://jsfiddle.net/rvsMH/1/ しかし、それは動作しませんし、配列または緯度経度の値を取得しません。私は何が問題なのか分からない。私は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>

解決方法は？

ページのDOMが読み込まれた後に、initialize関数を実行する必要があります。 現在、initialize は DOM がレンダリングされる前にインラインで実行されています。 そのためには <body> オンロードイベントまたは Google Maps Javascript API v3 addDomListener on window を使用します。 を使用してその関数を実行します。 

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

の作業コードスニペットです。 

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: 90%;
  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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&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>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します