google map 加点

最新推荐文章于 2022-07-21 13:45:42 发布

最新推荐文章于 2022-07-21 13:45:42 发布 · 147 阅读

文章标签：

#Google #XML #JavaScript #XHTML #HTML #ViewUI

本文通过实战案例展示了如何使用 Google Maps JavaScript API 创建交互式地图应用。作者分享了如何加载地图、添加标记并处理用户点击事件的方法。此外，还介绍了如何利用 MarkerManager 自动管理大量标记。

最近在做地图方面的东西，用到了google map ，特拿来跟大家一起分享！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Maps JavaScript API Example</title>
<script
src="http://maps.google.com/maps?file=api&v=2&key="
type="text/javascript"></script>
<script
src="http://gmaps-utility-library.googlecode.com/svn/trunk/labeledmarker/release/src/labeledmarker.js"
type="text/javascript">

</script>

<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js"
type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[

function marks(){
var markerarr = new Array();

//得到xml文件中的地理信息经纬度
GDownloadUrl("markers.xml", function(data, responseCode) {

var xml = GXml.parse(data);
var markers = xml.documentElement
.getElementsByTagName("marker");
for ( var i = 0; i < markers.length; i++) {
var point = new GLatLng(parseFloat(markers[i]
.getAttribute("lat")), parseFloat(markers[i]
.getAttribute("lng")));
//markerarr.push(new GMarker(point));

var marker = new GMarker(point);
//添加点击事件，连数据库
GEvent.addListener(marker, "click", function() {
alert("您点击了图标。");
});
//添加到数组中
markerarr[i] = marker;

}
});

return markerarr;
}
//产生地图
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(36.71299, 119.15698), 10);
// var mm = new MarkerManager(map);
// mm.addMarkers(marks(),11,15);

//var mgrOptions = { borderPadding: 50, maxZoom: 18, trackMarkers: true };
//创建图标器，自动管理，设置课时范围为16层
var mgr = new MarkerManager(map);
mgr.addMarkers(marks(),16);
//刷新显示
mgr.refresh();
}
}

//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 800px; height: 500px"></div>
</body>
</html>