以下代码只需更换key串即可测试使用
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API 使用测试</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA7546_kWizM4_kWhYetCufRQjVjQEHk97zUNSUtZ4OwaLvVchoxTxzuBN58qm9mT50olHlLZ8u5HTIg"
type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
//地图对象
var map = new GMap2(document.getElementById("map"));
//地图、卫星、混合
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
/*
*北纬(北大南小)、东经(东大西小),1-22放大
*进入谷歌地图网页:http://ditu.google.cn/maps?ct=reset
*将要查询的地址移动处于地图区域的中心,地址栏输入如下:
*javascript:void(prompt('',gApplication.getMap().getCenter())); 回车
*弹出的数据即为需要的坐标
*/
var center = new GLatLng(39.94129572403184, 116.42202258110046);
map.setCenter(center,19);
map.openInfoWindow(map.getCenter(),document.createTextNode("\u9999\u53E3\u9C7C"));
/*-------------多选项卡内容展示------------*/
var infoTabs = [
new GInfoWindowTab("介绍", "<span style\='color\:green;'>北京香口鱼餐厅<br/> 关联单位:河北香口鱼餐饮有限公司<br/>制作人:牛金明</span>"),
new GInfoWindowTab("主营", "<span style\='color\:green;'>烤鱼、烤串<br/> 各种鲜美炒菜</span>")
];
// Place a marker in the center of the map and open the info window
// automatically
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs);
});
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);
//-----------------------------------------
/*----------------------拖拽标记弹跳--------
var marker = new GMarker(center, {draggable: true});
GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml("标记");
});
map.addOverlay(marker);
//---------------------------------------*/
/*--------------点击处添加标记---------------
GEvent.addListener(map, "click", function(marker, point) {
if (marker) {
map.removeOverlay(marker);
} else {
map.addOverlay(new GMarker(point));
}
});
//---------------------------------------*/
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 900px; height: 600px"></div>
</body>
</html>
效果如下图:
- 大小: 113.8 KB
分享到:
相关推荐
Google Maps API编程资源大全
书中详细介绍Google Maps API的应用,从开发环境搭建到事件、控件、叠加层、地址解析、本地搜索等,全面介绍,网点管理系统和地图搜索应用实例。
Google Maps API android demo Eciplse project source code and javacript version Google Maps API and Place Search example html.
Google Maps API开发大全code.rar Google Maps API开发大全code.rar
GoogleMaps API V3离线下载工具及使用.zip 主要对其地图的下载,及自我编制。 离线下完全可以使用,只需先进行地图的下载。 添加了控件,离线下可进行操作。。。
Google Maps API示例CHM文档下载
Google Maps API开发大全 (华章原创精品) - 陈育春.mobi
├─07 Google Maps API深度历险 │ ├─7.1 导入Google Maps API库 │ │ ├─7.1.2 导入不同语言的Google Maps API库文件 │ │ └─7.1.3 在不同URL地址下使用Google Maps API │ ├─7.2 挖掘Google Maps API中...
Kindle资源,Google Maps API开发大全。可使用Kindle PC端的软件阅读。
google maps api 开发大全 的光盘源代码 网上找了个遍,也没找到。 就自己买了这本书,现在发上来了,呵呵。
本书从易到难、由浅入深、循序渐进地介绍了Google Maps API和Google Earth API的开发技术。本书知识讲解通俗易懂,并有大量的实例供读者更加深刻地巩固所学习的知识,帮助读者更好地进行开发实践。 本书共分为18...
Google Maps API开发大全Google Maps API开发大全Google Maps API开发大全
用于 JavaScript 的 Google Maps API V3 中文参考文档 与官网文档格式基本相同
java实现google maps api接口实例
– HelloWorld程序,Maps控件,事件处理,信息窗口,层,点、折线以及多 边型等 • 高级功能简介 – 异步HTTP通讯:GXmlHttp, GDownloadUrl – 创建自己的控件:控件子类化 – 地址定位 • 最新功能 – KML与GeoRSS...
详细介绍了GOOGLE MAPS API V3版的详细功能,有利于使用者更了解GOOGLE MAPS API
2014-3-5打包 示例中含中国离线地图1-5级
详细介绍Google Maps API的应用,光盘配有源代码示例和辅助工具
google maps api的PHP版本, 可以根据地址返回多个可能的地址列表和经纬度