Google Maps API 初探

njmnjx

浏览: 234748 次
性别:
来自: 北京

最近访客更多访客>>

belllab

gathers520

zhaodengfeng1989

lcc_lzc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Google Maps API

Google JavaScript XHTML HTML

以下代码只需更换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/>&nbsp;&nbsp;&nbsp;&nbsp;关联单位：河北香口鱼餐饮有限公司<br/>制作人：牛金明</span>"),
				new GInfoWindowTab("主营", "<span style\='color\:green;'>烤鱼、烤串<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;各种鲜美炒菜</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>

效果如下图：