<!-- ABQIAAAAR_Bbv4Qk4bJAn4uAvrMcDRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRyvpuo6qQBAx09NvvLcCY4JDIjdA -->
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>GMap例子</title>
<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAR_Bbv4Qk4bJAn4uAvrMcDRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRyvpuo6qQBAx09NvvLcCY4JDIjdA&hl=zh-CN"
type="text/javascript"></script>
<script type="text/javascript">
var map;
//信息提示
function showMessage(msg, x, y) {
map.setCenter(new GLatLng(x, y), 14);
map.openInfoWindow(map.getCenter(), document.createTextNode(msg));
}
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
/* * G_NORMAL_MAP- 默认视图
* G_SATELLITE_MAP - 显示 Google 地球卫星图像
* G_HYBRID_MAP - 混合显示普通视图和卫星视图
* G_DEFAULT_MAP_TYPES - 这三个类型的数组，在需要重复处理的情况下非常有用
*/
map.setMapType(G_HYBRID_MAP);
map.setCenter(new GLatLng(22.25335393931268, 113.54593276977539), 14);
//等待两秒钟，然后平移到新中心点。panTo 方法将地图中心设置在指定点处
//window.setTimeout(function() {
// map.panTo(new GLatLng(39.927, 116.407));
//}, 1000);
// 随机创建点
// Creates a marker at the given point
// The five markers show a secret message when clicked
// but that message is not within the marker's instance data
// 创建图标
var tinyIcon = new GIcon();
tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
tinyIcon.iconSize = new GSize(12, 20);
tinyIcon.shadowSize = new GSize(22, 20);
tinyIcon.iconAnchor = new GPoint(6, 20);
tinyIcon.infoWindowAnchor = new GPoint(5, 1);
// Set up our GMarkerOptions object
markerOptions = { icon: tinyIcon };
function createMarker(point, number) {
var marker = new GMarker(point, markerOptions);
var message = ["设备1", "设备2", "设备3", "设备4", "设备5"];
marker.value = number;
GEvent.addListener(marker, "click", function() {
var myHtml = "<b>#" + number + "</b><a target='_bank' href='http://www.baidu.com'>详细</a><br/>" + message[number - 1];
map.openInfoWindowHtml(point, myHtml);
});
return marker;
}
// Add 5 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 5; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i + 1));
}
//添加缩放，控制工具
var mapControl = new GMapTypeControl();
map.addControl(mapControl);
map.addControl(new GLargeMapControl());
//监听器也能够捕获事件的环境。在下面的示例代码中，显示用户拖动地图后地图中心的经度和纬度
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("jwd").innerHTML = center.toString();
});
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 900px; height: 600px"></div>
<div id="jwd"></div>
<a href="#" onclick="showMessage('设备一',22.25335393931268, 113.54593276977539)">test</a>
</body>
</html>
