Google Maps API 进级：通过XML文档加载Gpolyline或者Gpolygon

转自：http://hi.baidu.com/xfm_zhr/blog/item/20e2e6f99c723e5e242df229.html

1.       通过XML文档加载Gpolyline或者Gpolygon

基本思路：

a.       设计规范明确的XML文档。该文档在后台修改维护。

b.       获取XML文档。

c.       解析XML文档，生成对应的Gpolyline或者Gpolygon对象。

d.       将生成的对象在GoogleMaps上进行处理。

具体示例代码：

XML文档的设计示例

<?xml version="1.0" encoding="UTF-8"?>

<overlays>

<!--

point节点的lat,lng属性 分别代表经纬度

-->

<!--

polyline节点的color属性代表边线颜色

               width属性代表边线宽度

               opacity属性代表边线透明度

-->

<polyline color="#FF0000" width="8" opacity="0.5">

   <point lat="43.6" lng="110" />

   <point lat="35.8" lng="119" />

   <point lat="37.9" lng="102" />

</polyline>

<polyline color="#0000FF" width="6" opacity="0.5">

   <point lat="42" lng="120" />

   <point lat="45.8" lng="125" />

   <point lat="37.9" lng="126" />

   <point lat="47.9" lng="130" />

</polyline>

<!--

polygon节点的 color属性代表边线颜色

               width属性代表边线宽度

               opacity属性代表边线透明度

               fillcolor属性代表填充颜色

               fillopacity属性代表填充透明度

-->

<polygon color="#008800" width="4" alpha="0.8" fillcolor="#FF00FF" fillopacity="0" >

   <point lat="39" lng="105" />

   <point lat="43" lng="118" />

   <point lat="35" lng="125" />

   <point lat="31" lng="116" />

   <point lat="36" lng="106" />

   <point lat="39" lng="105" />

</polygon>

<polygon color="#000000" width="2" alpha="1" fillcolor="#FF00FF" fillopacity="1" >

   <point lat="27" lng="100" />

   <point lat="30" lng="100" />

   <point lat="30" lng="105" />

   <point lat="27" lng="105" />

   <point lat="27" lng="100" />

</polygon>

</overlays>

获取XML文档示例

   

    function loadXmlData(xmlfile)

    {

      //创建GXmlHttp

      var request = GXmlHttp.create();

      request.open("GET", xmlfile, true);

      request.onreadystatechange = function() {

        if (request.readyState == 4) {

          var xmlDoc = request.responseXML;

         

          // ========= 获取polyline节点 ===========

          var polylines = xmlDoc.documentElement.getElementsByTagName("polyline");

          // 处理每一个节点

          for (var i = 0; i < polylines.length; i++)

          {

            addPolyline(polylines[i]);

          }

          // ========= 获取polylgon节点 ===========

          var polygon = xmlDoc.documentElement.getElementsByTagName("polygon");

          // 处理每一个节点

          for (var i = 0; i < polylines.length; i++)

         {

            addPolygon(polygon[i]);

          }

          // ================================================

        }

      }

      request.send(null);

}

解析XML文档示例

//加载折线，返回值为被添加的折线

    function addPolyline(node){

      //加载边线颜色，宽度，透明度

      var color = node.getAttribute("color");

      var width = parseFloat(node.getAttribute("width"));

      var opacity = parseFloat(node.getAttribute("opacity"));

     

      //加载顶点

      var points = node.getElementsByTagName("point");

      var pts = [];

      for (var i = 0; i < points.length; i++)

      {

         pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),

                             parseFloat(points[i].getAttribute("lng")));

      }

     

      //添加折线

      var polyline = new GPolyline(pts, color, width, opacity);

      map.addOverlay(polyline);

      return polyline;

    }

   

    //加载多边形，返回值为被添加的多边形

    function addPolygon(node)

    {

      //加载边线颜色，宽度，透明度

      var color = node.getAttribute("color");

      var width = parseFloat(node.getAttribute("width"));

      var opacity = parseFloat(node.getAttribute("opacity"));

     

      //加载填充颜色，透明度

      var fillcolor = node.getAttribute("fillcolor");

      var fillopacity = parseFloat(node.getAttribute("fillopacity"));

     

     //加载顶点

      var points = node.getElementsByTagName("point");

      var pts = [];

      for (var i = 0; i < points.length; i++)

      {

         pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),

                             parseFloat(points[i].getAttribute("lng")));

      }

     

      //添加多边形

      var polygon = new GPolygon(pts, color, width, opacity, fillcolor, fillopacity);

      map.addOverlay(polygon);

      return polygon;

}