Google地图API使用说明
. 获取地图 API 密钥
Google为了管理API的用户,会给每个用户分配一个密钥,这个密钥的申请和使用都是免费的,用户只要输入使用地图的网站地址就可以了。
申请密钥网址:
http://code.google.com/intl/zh-CN/apis/maps/signup.html
注意:申请前你必须先用一个Google的Gmail账号。
2. 获取用户的地理信息
地图是根据经度和纬度来定位的,所以要定制地图,就应该知道需要的地图中心的位置,这可以通过访问http://maps.google.com找到相应的目标位置,调整地图,将目标位置置于地图中心位置,单击地图右上方的“链接”这时会弹出下图的两行文本框:
将上一行的文本框内容复制到记事本中会看到如下的内容:
http://maps.google.com/maps?f=q&source=s_q&hl=zh-CN&q=&ie=UTF8&geocode=Ff0r6QEdtLAUBw&split=0&ll=32.128088,118.939705&spn=0.015228,0.027595&z=15
在上面的文字中加粗的就是地图的中心坐标位置,这个参数就用来作为定制地图的坐标信息。
3. 基本的地图代码
下面是基本的地图代码,用户将密钥替换掉“你的密钥”将其放置到一个基本的网页中,并且上传到你指定的网站中就可以打开地图:
<script type="text/javascript" src=http://www.google.cn/jsapi?key=你的密钥></script>
<script type="text/javascript">
google.load("maps", "2.x", {base_domain: "ditu.google.cn", language: "zh-CN"});
// Call this function when the page has been loaded
function initialize() {
var map = new google.maps.Map2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(new google.maps.LatLng(32.124999,118.925157), 12); //(32.124999,118.925157), 12前面是坐标,后是放大的大小
}
google.setOnLoadCallback(initialize);
</script>
<div id="map" style="width: 980px; height: 540px"></div> ; //指定地图的大小
4. 添加标注的地图代码
<script type="text/javascript" src=http://www.google.cn/jsapi?key=你的密钥></script>
<script type="text/javascript">
google.load("maps", "2.x", {base_domain: "ditu.google.cn", language: "zh-CN"});
// Call this function when the page has been loaded
function initialize() {
var map = new google.maps.Map2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(new google.maps.LatLng(32.124999,118.925157), 12);
var home_point = new GLatLng(32.12472,118.94225) ; //指定标注的位置
map.addOverlay(new GMarker(home_point)); //默认标注
}
google.setOnLoadCallback(initialize);
</script>
<div id="map" style="width: 980px; height: 540px"></div> ; //指定地图的大小
5. 添加学校名称作为标注的代码
<script type="text/javascript" src=http://www.google.cn/jsapi?key=你的密钥></script>
<script type="text/javascript">
google.load("maps", "2.x", {base_domain: "ditu.google.cn", language: "zh-CN"});
// Call this function when the page has been loaded
function initialize() {
var map = new google.maps.Map2(document.getElementById("map"));
map.addControl(new GSmallMapControl()); map.setCenter(new google.maps.LatLng(32.124999,118.925157), 12);
var home_point = new GLatLng(32.12472,118.94225) ; //指定标注的位置
var icon1 = new GIcon();
icon1.image = "http://www.njcit.edu.cn/images/njcitmap.gif"; //图片所在位置
icon1.iconSize = new GSize(190, 30); //图片大小
icon1.iconAnchor = new GPoint(95, 14); //图片的锚点
map.addOverlay(new GMarker(home_point, icon1)); //图形标注
map.addOverlay(new GMarker(home_point)); //默认标注
}
google.setOnLoadCallback(initialize);
</script>
<div id="map" style="width: 980px; height: 540px"></div> ; //指定地图的大小
说明:图片可以使用透明背景的GIF图,这样效果比较好。 |