根据生成的XML中的SEVERITY，Google映射默认标记图标的不同颜色

我已经生成了格式的XML（alands.XML）

<markers>
 <marker lat="41.932797" lng="21.483765" alarm="Boston" severity="0"   />
 <marker lat="41.732797" lng="21.183765" alarm="Toronto" severity="2"   />
</markers>

根据严重程度，需要显示默认标记的不同颜色：

0-green
1-violet
2-ocher

等等。

我在这个简单的html文件中需要更改什么？

感谢的帮助

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Google Maps</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;" type="text/javascript"></script>
  </head>
  <body onunload="GUnload()">
    <table border=1>
      <tr>
        <td>
           <div id="map" style="width: 1550px; height: 1450px"></div>
        </td>
      </tr>
    </table>

    <script type="text/javascript">
    //<![CDATA[
    if (GBrowserIsCompatible()) {
      var gmarkers = [];

      function createMarker(point,name,alarm) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(alarm);
        });
        return marker;
      }

      function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
      }

      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng( 41.932797,21.483765), 10);

      GDownloadUrl("alarms.xml", function(doc) {
        var xmlDoc = GXml.parse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new GLatLng(lat,lng);
          var alarm = markers[i].getAttribute("alarm");
          var label = markers[i].getAttribute("label");
          // create the marker
          var marker = createMarker(point,label,alarm);
          map.addOverlay(marker);
        }
      });
    }


    //]]>
    </script>
  </body>
</html>

在添加标记之前，按严重级别设置一个自定义图标：

var severity = parseInt(markers[i].getAttribute("severity"));
var severityIcon = new GIcon(G_DEFAULT_ICON);
var color;
if (severity == 1) color = "red";
else if (severity == 2) color = "blue";
else if (severity == 3) color = "green";
else color = "yellow";
severityIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/" + color + "-dot.png";
markerOptions = { icon:severityIcon };

然后将其添加到地图中，如下所示：

map.addOverlay(new GMarker(latlng, markerOptions));

这是从优秀的谷歌地图示例网站上截取的：https://google-developers.appspot.com/maps/documentation/javascript/v2/examples/icon-simple

相关内容

最新更新

热门标签：