谷歌地圖 - InfoWindows多個多邊形

-1

如何獲取谷歌地圖infowindow多個多邊形？我設法得到多個多邊形，但我有問題要顯示多邊形上的每個多邊形和中心信息窗口的信息窗口。谷歌地圖 - InfoWindows多個多邊形

的jsfiddle：https://jsfiddle.net/ow8kb0vn/

var editedPolygons = [ 
 
    [ 
 
     [ 
 
     { 
 
      "lat":14.56754606924714, 
 
      "lng":120.99225461483002 
 
     }, 
 
     { 
 
      "lat":14.567213783453319, 
 
      "lng":120.9916752576828 
 
     }, 
 
     { 
 
      "lat":14.566736121747363, 
 
      "lng":120.99207758903503 
 
     } 
 
     ], 
 
     { 
 
     "color":"green", 
 
     "title":"---------------------------------------info content green" 
 
     } 
 
    ], 
 
    [ 
 
     [ 
 
     { 
 
      "lat":14.566383066777853, 
 
      "lng":120.99221169948578 
 
     }, 
 
     { 
 
      "lat":14.566325954891425, 
 
      "lng":120.99138557910919 
 
     }, 
 
     { 
 
      "lat":14.565635419093956, 
 
      "lng":120.9915840625763 
 
     }, 
 
     { 
 
      "lat":14.565635419093956, 
 
      "lng":120.9925840625763 
 
     } 
 
     ], 
 
     { 
 
     "color":"red", 
 
     "title":"----------------------------------------------info content red" 
 
     } 
 
    ] 
 
]; 
 

 
var map; 
 

 
function initialize() { 
 
    var mapProp = { 
 
     center: new google.maps.LatLng(14.5667, 120.9927), 
 
     zoom: 17, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    
 
    map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
 
    for (var i = 0; i < editedPolygons.length; i++) { 
 
     var poly = new google.maps.Polygon({ 
 
     \t fillColor: editedPolygons[i][1].color, 
 
     \t \t strokeWeight: 2, 
 
      path: editedPolygons[i][0], 
 
      map: map 
 
     }); 
 
     
 
    \t \t var infowindow = new google.maps.InfoWindow({ 
 
    \t \t \t content: editedPolygons[i][1].title 
 
    \t \t \t }); 
 
     
 
    \t \t poly.addListener('click', function() { 
 
    \t \t \t infowindow.open(map, poly); 
 
    \t \t \t }); 
 
    } 
 
} 
 

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

html, body, #googleMap { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,drawing&ext=.js"></script> 
 
<div id="googleMap"></div>

來源

2017-02-26 akuljana

信息窗口需要的位置。您可以使用google.maps.Marker作爲open方法的第二個參數（或者在MVCObject中傳入position屬性），或者在創建它時設置其位置。

從 documentation

錨可以是公開一個經緯度位置屬性

設置它是多邊形的中心最簡單的方法任何MVCObject是計算的中心多邊形的邊界並使用它。

// use function closure to associate the infowindow with the polygon 
poly.addListener('click', (function(content) { 
    return function() { 
    // set the content 
    infowindow.setContent(content); 
    // set the position 
    infowindow.setPosition(this.center); 
    // open it 
    infowindow.open(map); 
    } 
})(editedPolygons[i][1].title));

proof of concept fiddle

var map; 
 

 
function initialize() { 
 
    var mapProp = { 
 
    center: new google.maps.LatLng(14.5667, 120.9927), 
 
    zoom: 17, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
 
    for (var i = 0; i < editedPolygons.length; i++) { 
 
    var bounds = new google.maps.LatLngBounds(); 
 

 
    var poly = new google.maps.Polygon({ 
 
     fillColor: editedPolygons[i][1].color, 
 
     strokeWeight: 2, 
 
     path: editedPolygons[i][0], 
 
     map: map 
 
    }); 
 

 
    for (var pathidx = 0; pathidx < poly.getPath().getLength(); pathidx++) { 
 
     bounds.extend(poly.getPath().getAt(pathidx)); 
 
    } 
 
    // store the computed center as a property of the polygon for easy access 
 
    poly.center = bounds.getCenter(); 
 
    var infowindow = new google.maps.InfoWindow(); 
 
    var title = editedPolygons[i][1].title; 
 
    // use function closure to associate the infowindow with the polygon 
 
    poly.addListener('click', (function(content) { 
 
     return function() { 
 
     // set the content 
 
     infowindow.setContent(content); 
 
     // set the position 
 
     infowindow.setPosition(this.center); 
 
     // open it 
 
     infowindow.open(map); 
 
     } 
 
    })(editedPolygons[i][1].title)); 
 
    } 
 
} 
 

 
google.maps.event.addDomListener(window, "load", initialize); 
 
var editedPolygons = [ 
 
    [ 
 
    [{ 
 
     "lat": 14.56754606924714, 
 
     "lng": 120.99225461483002 
 
    }, { 
 
     "lat": 14.567213783453319, 
 
     "lng": 120.9916752576828 
 
    }, { 
 
     "lat": 14.566736121747363, 
 
     "lng": 120.99207758903503 
 
    }], { 
 
     "color": "green", 
 
     "title": "---------------------------------------info content green" 
 
    } 
 
    ], 
 
    [ 
 
    [{ 
 
     "lat": 14.566383066777853, 
 
     "lng": 120.99221169948578 
 
    }, { 
 
     "lat": 14.566325954891425, 
 
     "lng": 120.99138557910919 
 
    }, { 
 
     "lat": 14.565635419093956, 
 
     "lng": 120.9915840625763 
 
    }, { 
 
     "lat": 14.565635419093956, 
 
     "lng": 120.9925840625763 
 
    }], { 
 
     "color": "red", 
 
     "title": "----------------------------------------------info content red" 
 
    } 
 
    ] 
 
];

html, 
 
body, 
 
#googleMap { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&ext=.js"></script> 
 
<div id="googleMap"></div>

來源

2017-02-26 19:01:02 geocodezip

謝謝，但還有一個問題。如何在多邊形內點擊/錄製位置顯示infowindow？ – akuljana

使用事件latLng – geocodezip

我嘗試** infoWindow.setPosition（event.latLng）**但沒有運氣。如何從你的解決方案中得到這個？ – akuljana

問題來自這樣的事實隨時間的infowindow變量的變化（它每次指向一個不同的對象的環內i變化）。

如果更換

poly.addListener('click', function() { 
       infowindow.open(map, poly); 
      });

與

(function(infowindow) { 
      poly.addListener('click', function() { 
      infowindow.open(map, poly); 
      }); 
     })(infowindow);

它會工作，因爲匿名函數將迫使碼來跟蹤好對象。

要在多邊形的中心顯示infowindow，您必須計算此中心的位置。然後將它傳遞給infowindow對象（它有一個position屬性）。

來源

2017-02-26 19:01:53 ValLeNain

谷歌地圖 - InfoWindows多個多邊形

回答

相關問題