我已经使用javascript由对谷歌地图的多边形,该阵列是由PHP代码来JSON格式时,取得了阵列和传递到多边形的路径,多边形是OK,则在来自谷歌地图上。问题是这样的,我已经附加事件侦听器的多边形,当我应该计算面积的多边形的任何点击,但每个多边形是给我相同的区域。我不知道为什么?
这里是我的代码。
//loading map
var marker = null;
var lat = lon = "";
var infoWindow;
var map;
function myMap() {
var myCenter = new google.maps.LatLng(34.0151, 71.5249);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 12, mapTypeId: 'terrain'};
map = new google.maps.Map(mapCanvas, mapOptions);
polygon_latlng = [];
$.ajax({
type:'post',
url : 'map/get_polygons',
success:function(r){
r = JSON.parse(r);
for (i=0; i<r.length; i++){
polygon_latlng.push(r[i].latLng);
}
construct_polygon(polygon_latlng);
},
error:function(e){
alert("Error");
}
});
}
function construct_polygon(data){
// Construct the polygon.
var testingPolygon = new google.maps.Polygon({
paths: data,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.4
});
testingPolygon.setMap(map);
// Add a listener for the click event.
testingPolygon.addListener('click', showArrays);
//create infowindow
infoWindow = new google.maps.InfoWindow;
}
function showArrays(event) {
// Since this polygon has only one path, we can call getPath() to return the
// MVCArray of LatLngs.
var vertices = this.getPath().getArray(); //@this {google.maps.Polygon}
var contentString = '<b>Polygon Details</b><br>' +
'Clicked location: <br>' + event.latLng.lat() + ' , ' + event.latLng.lng() +
'<br>';
//the problem is here, it giving me the same area for everyone
var z = google.maps.geometry.spherical.computeArea(vertices);
contentString += z;
// Replace the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
这是我从r获得从数据库Ajax请求。
0:
area: "1316.7751419101814"
latLng: Array(11)
0: {lat: 33.9965305977199, lng: 71.4112489764657}
1: {lat: 33.996527415166, lng: 71.4114112549491}
2: {lat: 33.9962570877556, lng: 71.4114036127513}
3: {lat: 33.9962602702772, lng: 71.411241334781}
4: {lat: 33.9961251065509, lng: 71.4112375139768}
5: {lat: 33.9961219240454, lng: 71.4113997916906}
6: {lat: 33.9959867603318, lng: 71.4113959706554}
7: {lat: 33.9959931250968, lng: 71.4110714157155}
8: {lat: 33.9963986163242, lng: 71.4110828773583}
9: {lat: 33.9963954340002, lng: 71.4112451556106}
10: {lat: 33.9965305977199, lng: 71.4112489764657}
1:
area: "877.843869046241"
latLng: Array(5)
0: {lat: 33.9953999683516, lng: 71.4068331233525}
1: {lat: 33.9953936148645, lng: 71.4071576770502}
2: {lat: 33.9951232865572, lng: 71.4071500486501}
3: {lat: 33.99512963998, lng: 71.4068254959785}
4: {lat: 33.9953999683516, lng: 71.4068331233525}
我期望输出应该是每一个多边形的不同区域,但它给我相同的即1352.49478249
我做到了!实际进行的多边形和传球达阵,以它的路径将会给这个问题。虽然由一个多边形创造一个可以解决这个问题,computeArea将给予不同的区域。我只是改变了这种在for循环和它的工作。
$.ajax({
type:'post',
url : 'map/get_polygons',
success:function(r){
r = JSON.parse(r);
for (i=0; i<r.length; i++){
construct_polygon(r[i].latLng);
}
},
error:function(e){
alert("Error");
}
});