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;

}