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

最新推荐文章于 2020-07-17 15:29:21 发布

weixin_34007291

最新推荐文章于 2020-07-17 15:29:21 发布

阅读量104

点赞数

本文介绍如何使用XML文档来定义并加载GPolyline和GPolygon对象到Google Maps中，包括XML文件的设计规范、获取及解析XML文档的方法，并提供了具体的JavaScript实现代码。

转自： 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"?>

<!--

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

-->

<!--

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

width属性代表边线宽度

opacity属性代表边线透明度

-->

</polyline>

</polyline>

<!--

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

width属性代表边线宽度

opacity属性代表边线透明度

fillcolor属性代表填充颜色

fillopacity属性代表填充透明度

-->

</polygon>

</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;

}