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在更新标记时停止重新标记

回答

相关问题