Googlemaps在更新標記時停止重新標記

我對javascript和googlemaps api都是全新的，但在過去幾天對這裏有很大的幫助，並且我的網站進步很多（謝謝！）。現在，我有一個新問題。我想要做的是從數據庫加載一組標記到地圖，然後允許用戶將值輸入到表單中以過濾標記（例如，放置最小和最大長度字段）。Googlemaps在更新標記時停止重新標記

這裏是我的代碼，我希望這是可以理解的：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
//<![CDATA[ 

var icons = { 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
}; 

function load() { 
    var map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(51.5100, 0.0000), 
    zoom: 10, 
    mapTypeId: 'roadmap' 
    }); 

    var infoWindow = new google.maps.InfoWindow; 

    //min and max ride lengths sent from form 
    var minlength = document.getElementById("minlength").value; 
    var maxlength = document.getElementById("maxlength").value; 

    // Change this depending on the name of your PHP file 
    downloadUrl("phpsqlajax_genxml.php", function(data) { 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 

    var length = markers[i].getAttribute("length"); 

    if (minlength < length && length < maxlength) { 
     var date = markers[i].getAttribute("date"); 
     var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
     var html = "<b>Date: " + date + "</b> <br/>Length: " + length; 
     var icon = icons; 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     icon: icon.icon, 
     shadow: icon.shadow 
     }); 
     bindInfoWindow(marker, map, infoWindow, html); 
    } 
    } 
    }); 
} 

function bindInfoWindow(marker, map, infoWindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
} 

function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
     new ActiveXObject('Microsoft.XMLHTTP') : 
     new XMLHttpRequest; 

    request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 
     callback(request, request.status); 
    } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
} 

function doNothing() {} 

//]]> 

</script> 
</head> 

<link rel="stylesheet" type="text/css" href="style.css" /> 
<body onload="load()"> 
<div id="container"> 
<div id="maincontent"> 
<form name="findride"> 
Min length: <input type="number" id="minlength">(miles)<br> 
Max length: <input type="number" id="maxlength">(miles)<br> 
<input type="button" value="Update" onClick="load()"/> 
<div id="map"></div> 
</div> 
</div>

我遇到的問題，是用戶在外地和更新填充前的地圖不顯示點（我試圖設置一些初始的最大長度和最小長度值，但那也沒有效果）。用戶輸入這些數據後，會顯示這些點，但地圖會一直重新居中 - 我寧願將它保留在相同的位置，只是標記更改。

好吧，也許這是有點不在我的範圍內，但如果它可以簡單地完成，我會非常感謝幫助。

來源

2012-04-17 NickF

改變你的HTML這樣的：

Min length: <input type="number" id="minlength" value="5">(miles)<br> 
Max length: <input type="number" id="maxlength" value="5">(miles)<br>

我已經加入value="5"既input s此意味着，當腳本負荷運行時，它應該添加一些標記 - 您可能需要5號更改爲更適合的值

應該在啓動時修復標記問題。

，並默認地圖犯規中心添加標記時 - see this simple example我在負荷中心點添加標記，然後3秒後添加其他製造商 - 地圖犯規中心....

來源

2012-04-17 12:54:52 ManseUK

謝謝，幫助很多。我也做錯了一件事是把'var map'而不是在加載函數之外。這使它更容易！ – NickF 2012-04-17 14:07:06

@NickF不知道爲什麼你的地圖集中在添加標記雖然..... – ManseUK 2012-04-17 14:10:24

它居中，因爲每一次，我再次調用load（）函數，而不是定義一個單獨的添加標記函數，即重新加載整個地圖。現在它運行得更好 - 仍然需要一些調整，但到了那裏。 – NickF 2012-04-17 14:24:31

Googlemaps在更新標記時停止重新標記

回答

相關問題