<!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>East Pacific</title>
<style>
div{ font-size:12px; line-height:16px;}
h2,h3,h4{ margin:0; padding:0;}
h2{ font-size:14px; color:#A40182;}
h3{ font-size:12px; color:#4C9406; padding-bottom:5px;}
.fr{ float:right;}
</style>
<form action="" method="get">
请输入坐标：<input type="text" name="x"/><input type="text" name="y"/><br/>
<input type="button" value="转到" onclick="initialize(x.value,y.value)"/><br/>
<input type="button" value="北京" onclick="initialize(39.904212,116.40741,9)"/>
<input type="button" value="上海" onclick="initialize(31.230399,121.4737,9)"/>
<input type="button" value="杭州" onclick="initialize(30.274125,120.155067,9)"/>
</form>
//貌似是通过这个来调用谷歌那边的函数实现地图的显示。
<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAS8q2-0zGCWhWYNtTQetTqhS4iLh5Q44VzEAgMJv7_b39vnBXdBRaVMG6mLMf5oUgfBxVTPJoDywHrg&hl=zh-CN" type="text/javascript"></script>
<!--<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAA83fbm5eqM4g9WMClULdiGRSb7MfVPrwjqMAH3nvTtdOlGYFo_hRjdv0bU7qls1zdceXRh6dcMUXq1w" type="text/javascript"></script>-->
<script type="text/javascript">
//三个值，分别是坐标和地图缩放的大小。
function initialize($_x,$_y,$_size){
//默认地址。
$x=27.92291;
$y=120.710607;
$size=15;
//如果不为空，也就是有值传过来，就显示传过来的地址。
if($_x!=null && $_y!=null){
$x=$_x;
$y=$_y;
$size=$_size;
}
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
//坐标1
map.setCenter(new GLatLng($x,$y), 14);
map.setZoom($size); //设置地图的缩放大小
map.addControl(new GSmallMapControl());
// 为所有标记创建指定阴影、图标尺寸灯的基础图标
var baseIcon = new GIcon();
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
// 创建信息窗口显示对应给定索引的字母的标记
function createMarker(point,title) {
var letteredIcon = new GIcon(baseIcon);
letteredIcon.image = "../public/images/default/marker.gif";
// 设置 GMarkerOptions 对象
markerOptions = { icon:letteredIcon };
var marker = new GMarker(point, markerOptions);
marker.openInfoWindowHtml("<h2>East Pacific</h2>"+title);
GEvent.addListener(marker, "mouseover", function() {
marker.openInfoWindowHtml("<h2>East Pacific</h2>"+title);
});
return marker;
}
//坐标2
var latlng = new GLatLng($x,$y);
map.addOverlay(createMarker(latlng,'<div class=fr><a href=# target=_blank><img src=../public/images/default/look.png></a></div><h3>Opening Soon...</h3>Customer Service Hotline:<br>'));
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style=" 425px; height: 350px"></div>
</body>
</html>
效果入下：
