<div id="map" style="width: 100%;
height: 100%;"></div>
<script type="text/javascript">
//Populate locations from SQL database
var locations =
[<ASP:Repeater id="MyRepeater" runat="server"><ItemTemplate>['<%# DataBinder.Eval(Container.DataItem, "City") %>', ' <%# DataBinder.Eval(Container.DataItem, "StreetAddress") %>, <%# DataBinder.Eval(Container.DataItem, "State") %>, <%# DataBinder.Eval(Container.DataItem, "Zipcode") %>','<%# DataBinder.Eval(Container.DataItem, "Status") %>','<%# DataBinder.Eval(Container.DataItem, "CompanyName") %>','<%# DataBinder.Eval(Container.DataItem, "Id") %>' ],</ItemTemplate></ASP:Repeater>];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(28.4811689,-81.36875),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var geocoder = new google.maps.Geocoder();
var marker, i;
for (i = 0; i < locations.length; i++) {
geocodeAddress(locations[i]);
icon = "http://maps.google.com/mapfiles/ms/icons/" + location[2] + ".png"
}
function geocodeAddress(location) {
setTimeout( function () {
geocoder.geocode( { 'address': location[1]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
createMarker(results[0].geometry.location,location[0]+"<br>"+location[1]+"<br><div style=background-color:"+location[2]+";></div><br>"+location[3]+"<br><a target='_blank' href='editrequest.aspx?Id="+location[4]);
}
else
{
alert("some problem in geocode" + status);
}
}); }, i * 500);
}
function createMarker(latlng,html){
var marker = new google.maps.Marker({
position: latlng,
map: map,
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
}
</script>
icon
-变量将在循环中被覆盖。将颜色作为参数传递给createMarker:
if (status == google.maps.GeocoderStatus.OK) {
createMarker(results[0].geometry.location,
'the infowindowhtml',
location[4]//as it seems the color is not location[2]
);
}
function createMarker(latlng,html,color){
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon : "http://maps.google.com/mapfiles/ms/icons/" + color + ".png"
});
//mouseover & mouseout....
}
它很管用!我不得不修改SQL语句,使用LOWER(Status) AS StatusL
将"Status"转换为全小写,然后将location[2]
从<%# DataBinder.Eval(Container.DataItem, "Status") %>
更改为<%# DataBinder.Eval(Container.DataItem, "StatusL") %>
。
我还必须将OVER QUERY LIMIT的超时时间从500增加到1500,并在createMarker函数中将+ color +
更改为+color+
。