谷歌地圖infowindow與多義線定位

-1

我有一個多條多段線的地圖，我正在尋找顯示每行的infowindow。我有infowindow工作，但它沒有定位到事件點擊，因爲它應該是。相反，每個窗口都顯示在同一個地方。似乎無法追查問題的根源。谷歌地圖infowindow與多義線定位

<script type="text/javascript"> 

var contentString = ""; 

var infowindow = new google.maps.InfoWindow({ 
    content: contentString, 
}); 

function initialize() { 
    var myLatlng = new google.maps.LatLng(30.695895, -97.354080); 
    var mapOptions = { 
    zoom: 5, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.TERRAIN, 
}; 

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

downloadUrl("data.xml", function(data) { 

    var xml = xmlParse(data); 
    var polylines = xml.documentElement.getElementsByTagName("polyline"); 
    var polylineData = new Array(); 
    for (var i = 0; i < polylines.length; i++) { 
    polylineData[i] = {id:polylines[i].getAttribute("id"), 
         name:polylines[i].getAttribute("name"), 
         olat:polylines[i].getAttribute("olat"), 
         olng:polylines[i].getAttribute("olng"), 
         dlat:polylines[i].getAttribute("dlat"), 
         dlng:polylines[i].getAttribute("dlng")} 
    } 

    for (var j = 0; j < polylineData.length; j++) { 
    var path = [ 
     new google.maps.LatLng(parseFloat(polylineData[j].olat), parseFloat(polylineData[j].olng)), 
     new google.maps.LatLng(parseFloat(polylineData[j].dlat), parseFloat(polylineData[j].dlng)) 
    ]; 

    var polyline = new google.maps.Polyline({ 
     path: path, 
     strokeWeight: 2 
    }); 


    google.maps.event.addListener(polyline, 'click', (function(event,index){ 
     return function(){ 
     infowindow.content = '<div class="infobox" style="width:280px;"><span class="name">' + polylineData[index].name + '</span></div>'; 
     var point = event.latLng; 
     infowindow.setPosition(point); 
     infowindow.open(map); 
     }; 

    })(event,j)); 

    polyline.setMap(map); 
    } 

}); 

} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script>

XML數據是這樣的：

<polylines> 
    <polyline id="176" name="Line Name" olat="53.545204" olng="-113.369492" dlat="53.545204" dlng="-113.369492"/> 
</polylines>

我看過一些類似的職位，但一切答案都在這種情況下，迄今工作。謝謝！

來源

2014-10-28 akaimo

請提供[最小，完整，測試和可讀示例]（http://stackoverflow.com/help/mcve），樣品data.xml中的數據將有助於重現您的問題。你可能不想在'event'上關閉函數，我會建議將infowindow的位置固定到多段線（一端，另一端或者中心），但是很難說沒有折線的一個例子。 – geocodezip 2014-10-28 23:26:15

[工作示例]（http://www.geocodezip.com/v3_GenericMapBrowser.asp?filename=flights090427.xml）我的（實際上[Mike Williams']（http://econym.org.uk/gmap/）） XML格式，不是你的） – geocodezip 2014-10-28 23:32:22

我已經添加了一個xml數據的樣本。感謝這個例子，我期望在更簡單的層面上做類似的事情 – akaimo 2014-10-28 23:39:35

event必須傳遞給返回函數的參數：

google.maps.event.addListener(polyline, 'click', (function(index){ 
//_________________________________________________________^:the index of the item 
    return function(event){ 
//________________^:the event 
    infowindow.content = '<div class="infobox" style="width:280px;"><span class="name">' + polylineData[index].name + '</span></div>'; 
    var point = event.latLng; 
    infowindow.setPosition(point); 
    infowindow.open(map); 
    }; 

})(j));

來源

2014-10-29 01:07:07

謝謝那就是訣竅 - 感覺這很簡單。 – akaimo 2014-10-29 15:36:51

谷歌地圖infowindow與多義線定位

回答

相關問題