Google Maps API 初探

最新推荐文章于 2019-02-24 13:33:18 发布

njm168

最新推荐文章于 2019-02-24 13:33:18 发布

阅读量87

点赞数

分类专栏： Google Maps API 文章标签： Google JavaScript XHTML HTML ViewUI

Google Maps API 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

[color=green][size=large]以下代码只需更换key串即可测试使用[/size][/color]


<!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>

[color=green][size=large]效果如下图：[/size][/color]

[img]http://dl.iteye.com/upload/attachment/242303/e3502bec-3fca-3a08-9566-d75396dbe4f6.png[/img]

njm168

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Google Maps API 初探

[color=green][size=large]以下代码只需更换key串即可测试使用[/size][/color][code="html"] Google Maps JavaScript API 使用测试 // [/code][color=green][size=l...
复制链接

扫一扫

专栏目录