GMap初体験
5372 ワード
<!-- 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>