获取多个多边形 google 地图 api 的点
Getting points of multiple polygon google maps api
我已经经历了几个类似的问题,但找不到我的问题的解决方案。
我想以这种方式获得坐标点 [(lat,lng),(lat,lng)..] 等。我得到的结果是
{"pp":[{"polygonjson":[{},{},{},{},{}]}]} 即使值即将到来 fine.Please 看看我的代码.
function getCordinates() {
var pp = [];
var item = {};
item.pp = pp;
var currentCoordinates = "";
console.log(polygons.length);
for (var i = 0; i < polygons.length; i++) {
var poly = polygons[i];
var polygonsjson = {};
var polygonjson = [];
polygonsjson.polygonjson = polygonjson;
for (var polyPointArray = 0; polyPointArray <poly.getPath().getArray().length; polyPointArray++)
{
polygonsjson.polygonjson.push(poly.getPath().getArray()[polyPointArray]); // the issue is in this line
}
item.pp.push(polygonsjson);
}
if (polygons.length == 0)
{
document.getElementById('<%= hdCordinates.ClientID %>').value = "";
}
else
{
document.getElementById('<%= hdCordinates.ClientID %>').value = JSON.stringify(item);
}
}
一个google.maps.LatLng
对象有一个.lat()
方法returns纬度和一个.lng()
方法returns经度。
像这样 returns 你的 "polygonjson" 作为 LatLngLiteral:
for (var i = 0; i < polygons.length; i++) {
var poly = polygons[i];
var polygonsjson = {};
var polygonjson = [];
polygonsjson.polygonjson = polygonjson;
for (var polyPointArray = 0; polyPointArray <poly.getPath().getArray().length; polyPointArray++) {
polygonsjson.polygonjson.push({lat:poly.getPath().getArray()[polyPointArray].lat(),lng:poly.getPath().getArray()[polyPointArray].lng()});
}
item.pp.push(polygonsjson);
}
if (polygons.length == 0) {
document.getElementById('polycoords').value = "";
} else {
document.getElementById('polycoords').value = JSON.stringify(item);
}
代码片段:
var polygons = [];
var item = {
pp: []
};
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(10, 10),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var coords2 = [
new google.maps.LatLng(8, 10),
new google.maps.LatLng(12, 10),
new google.maps.LatLng(12, 17),
new google.maps.LatLng(8, 17),
new google.maps.LatLng(8, 10)
];
var coords3 = [
new google.maps.LatLng(16, 12),
new google.maps.LatLng(18, 12),
new google.maps.LatLng(18, 15),
new google.maps.LatLng(16, 15),
new google.maps.LatLng(16, 12)
];
var polygon = new google.maps.Polygon({
paths: [coords2],
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: '#00FF00',
fillOpacity: 0.35
});
// alert(coords);
polygon.setMap(map);
polygons.push(polygon);
var polygon2 = new google.maps.Polygon({
paths: [coords3],
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: '#00FF00',
fillOpacity: 0.35
});
// alert(coords);
polygon2.setMap(map);
polygons.push(polygon2);
for (var i = 0; i < polygons.length; i++) {
var poly = polygons[i];
var polygonsjson = {};
var polygonjson = [];
polygonsjson.polygonjson = polygonjson;
for (var polyPointArray = 0; polyPointArray < poly.getPath().getArray().length; polyPointArray++) {
polygonsjson.polygonjson.push({
lat: poly.getPath().getArray()[polyPointArray].lat(),
lng: poly.getPath().getArray()[polyPointArray].lng()
}); // the issue is in this line
}
item.pp.push(polygonsjson);
}
if (polygons.length == 0) {
document.getElementById('polycoords').value = "";
} else {
document.getElementById('polycoords').value = JSON.stringify(item);
}
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<input id="polycoords" size="300" />
我已经经历了几个类似的问题,但找不到我的问题的解决方案。 我想以这种方式获得坐标点 [(lat,lng),(lat,lng)..] 等。我得到的结果是 {"pp":[{"polygonjson":[{},{},{},{},{}]}]} 即使值即将到来 fine.Please 看看我的代码.
function getCordinates() {
var pp = [];
var item = {};
item.pp = pp;
var currentCoordinates = "";
console.log(polygons.length);
for (var i = 0; i < polygons.length; i++) {
var poly = polygons[i];
var polygonsjson = {};
var polygonjson = [];
polygonsjson.polygonjson = polygonjson;
for (var polyPointArray = 0; polyPointArray <poly.getPath().getArray().length; polyPointArray++)
{
polygonsjson.polygonjson.push(poly.getPath().getArray()[polyPointArray]); // the issue is in this line
}
item.pp.push(polygonsjson);
}
if (polygons.length == 0)
{
document.getElementById('<%= hdCordinates.ClientID %>').value = "";
}
else
{
document.getElementById('<%= hdCordinates.ClientID %>').value = JSON.stringify(item);
}
}
一个google.maps.LatLng
对象有一个.lat()
方法returns纬度和一个.lng()
方法returns经度。
像这样 returns 你的 "polygonjson" 作为 LatLngLiteral:
for (var i = 0; i < polygons.length; i++) {
var poly = polygons[i];
var polygonsjson = {};
var polygonjson = [];
polygonsjson.polygonjson = polygonjson;
for (var polyPointArray = 0; polyPointArray <poly.getPath().getArray().length; polyPointArray++) {
polygonsjson.polygonjson.push({lat:poly.getPath().getArray()[polyPointArray].lat(),lng:poly.getPath().getArray()[polyPointArray].lng()});
}
item.pp.push(polygonsjson);
}
if (polygons.length == 0) {
document.getElementById('polycoords').value = "";
} else {
document.getElementById('polycoords').value = JSON.stringify(item);
}
代码片段:
var polygons = [];
var item = {
pp: []
};
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(10, 10),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var coords2 = [
new google.maps.LatLng(8, 10),
new google.maps.LatLng(12, 10),
new google.maps.LatLng(12, 17),
new google.maps.LatLng(8, 17),
new google.maps.LatLng(8, 10)
];
var coords3 = [
new google.maps.LatLng(16, 12),
new google.maps.LatLng(18, 12),
new google.maps.LatLng(18, 15),
new google.maps.LatLng(16, 15),
new google.maps.LatLng(16, 12)
];
var polygon = new google.maps.Polygon({
paths: [coords2],
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: '#00FF00',
fillOpacity: 0.35
});
// alert(coords);
polygon.setMap(map);
polygons.push(polygon);
var polygon2 = new google.maps.Polygon({
paths: [coords3],
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: '#00FF00',
fillOpacity: 0.35
});
// alert(coords);
polygon2.setMap(map);
polygons.push(polygon2);
for (var i = 0; i < polygons.length; i++) {
var poly = polygons[i];
var polygonsjson = {};
var polygonjson = [];
polygonsjson.polygonjson = polygonjson;
for (var polyPointArray = 0; polyPointArray < poly.getPath().getArray().length; polyPointArray++) {
polygonsjson.polygonjson.push({
lat: poly.getPath().getArray()[polyPointArray].lat(),
lng: poly.getPath().getArray()[polyPointArray].lng()
}); // the issue is in this line
}
item.pp.push(polygonsjson);
}
if (polygons.length == 0) {
document.getElementById('polycoords').value = "";
} else {
document.getElementById('polycoords').value = JSON.stringify(item);
}
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<input id="polycoords" size="300" />