在谷歌地图使用JavaScript绘制多边形

关注

发信

关注(28)粉丝(399)

在谷歌地图使用JavaScript绘制多边形

本文介绍了在谷歌地图使用JavaScript绘制多边形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在Google地图中绘制多边形，并使用，但它不工作，没有获得数组或拉长的价值。我不知道这是什么问题。我是新的谷歌地图，请帮助任何人。提前致谢。

I want to draw polygon in google map and i am using the example code at http://jsfiddle.net/rvsMH/1/ but its not working and not getting array or lat long value.I don't know whats the problem. I am new to google maps please help anybody. Thanks in advance.

<%@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>

解决方案

You need to run the initialize function after the page's DOM is loaded. Currently initialize is run inline before the DOM is rendered. Use either the <body> onload event or the Google Maps Javascript API v3 addDomListener on window to run that function:

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

working code snippet:

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>

这篇关于在谷歌地图使用JavaScript绘制多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-12 06:50