我需要使用位置[2](状态字段)基于SQL数据库字段对标记进行着色


  <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+

最新更新