Google Maps API 进级：通过XML文档加载Gpolyline或者Gpolygon
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;
}
