在谷歌地图使用JavaScript绘制多边形 [英] Drawing Polygon in google map using javascript
问题描述
我想在Google地图中绘制多边形，并使用 http://jsfiddle.net上的示例代码/ rvsMH / 1 / ，但它不工作，没有获得数组或拉长的价值。我不知道这是什么问题。我是新的谷歌地图，请帮助任何人。提前致谢。
<％@ page contentType =text / htmlpageEncoding =UTF-8 ％>
<！DOCTYPE html>
<！DOCTYPE html>
< html>
< head>
< title>绘图工具< / title>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no>
< meta charset =utf-8>
< style>
html，body，＃map-canvas {
height：70％;
margin：0px;
填充：0px
}
< / style>
< script src =https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing>< / script>
< script>
var map; //地图的全局声明
var iw = new google.maps.InfoWindow（）; // infowindow的全局声明
var lat_longs = new Array（）;
var markers = new Array（）;
var drawingManager;
函数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：{
位置：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（））;
}）;
}
函数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 =postaccept-charset =utf-8id =map_form>
< input type =textname =verticesvalue =id =vertices/>
< input type =buttonname =savevalue =Save！ id =save/>
< / form>
< / body>
< / html>
您需要在页面的DOM之后运行initialize函数被加载。目前，初始化是在DOM呈现之前内联运行的。使用 工作程式码片段： 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.
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 working code snippet:
这篇关于在谷歌地图使用JavaScript绘制多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！< body> onload事件或
google.maps。 event.addDomListener（窗口，'load'，初始化）;
var map; //地图的全局声明var iw = new google.maps.InfoWindow（）; //全局声明infowindow var lat_longs = new Array（）; var markers = new Array（）; var drawingManager;函数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（地图）; 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（））;} ）; }函数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（）{//迭代多边形顶点？}）;}）; html，body，＃map-canvas {height：70 ％; margin：0px; < script src =https：// <%@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>
<body> onload event or the Google Maps Javascript API v3 addDomListener on window to run that function: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: 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>
