本文介绍如何注册并使用Google Maps API创建交互式地图。包括获取API密钥、加载JavaScript API库、初始化地图及添加标记等步骤。
首先到http://code.google.com/apis/maps/signup.html 注册Sign up for a Maps API key,例如：我把需要注册的网址为在本机上测试的一个网站：如下图所示
2.注册成功后，你将会得到一个Key：如：
3.在浏览其中输入如下网址，以得到google的javascript函数，
4.输入此网址后，将会得到如下的文件，如下图所示：
5，把此文件保存到网站的根目录下，文件名为maps，才用如下的方法进行调用
<html>
<head>
<title>Google Maps JavaScript API Example - simple</title>
<script src="maps" type="text/javascript">
</script>
<script type="text/javascript">
</script>
</head>
<body onload="Gload()">
<div id="map" style="width: 300px; height: 300px"/></div>
<table align="center" border='1'>
<th>经度:<input type='text' id='east'/> </th>
<th>纬度:<input type='text' id='north'/> </th>
<th> <input type='submit' name='submitName' value='submit' onclick="Gsubmit();"/> </th>
<script type="text/javascript">
var map = new GMap(document.getElementById("map"));
map.setCenter(new GLatLng(39.917, 116.397), 8);
map.addControl(new GSmallMapControl());
function Gload() {
var p1 = new GLatLng(39.917, 116.397);
map.addOverlay(new GMarker(p1));
GEvent.addListener(map, "click", function(marker,point) {
if(marker) {
// var p = marker.getPoint();得到该marker的point。
//map.openInfoWindow(p, document.createTextNode("你好"));
marker.openInfoWindowHtml("<img src='aa.jpg'/>" + "<a href='http://hi.baidu.com/hi521'>我的地盘</a>");
}else {
//point.lat()， point.lng()得到point的坐标
map.addOverlay(new GMarker(point));
}
} );
}
function Gsubmit() {
var ew = document.getElementById("east").value;
var ns = document.getElementById("north").value;
var p = new GLatLng(ns,ew);
map.panTo(p, 8);
var marker = new GMarker(p, {draggable:true})
map.addOverlay(marker);
map.openInfoWindow(p, document.createTextNode(p));
GEvent.addListener(marker, "dragstart", function() { map.closeInfoWindow(); } );
}
</script>
</table>
<div align="center">
<img src='aa.jpg'/>
map.openInfoWindowHtml(point,"<font color='red'>Hello</font>");
</div>
</body>
</html>
6.输入网址：http://localhost:8080/test/test.html，就会出现如下的页面，说明调用成功。
扫一扫
5257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
