为你的博客添加Google地图(Use googlemap api)

作者：Wupei  |  发表时间：  |  所属分类：网站开发

早就听说能加Google地图了, 这次就试了一下, 效果还是不错的, 页面右边就是用本篇文章的方法做了
大家试试~本篇介绍 Goole API 的简单应用

设计思路:
一开始想就是一组javascripte应该,插入到博客的模板文件就可以了, 但是在服务器上测试以后,才知道,需要修改很多值, 尤其是HTML主要标签的属性也需要改, 这样的话,就很容易使本身的博客程序, 发生异常情况…
所以就应该换一种思路, 用<iframe>标签可以达到嵌入页面的效果, 也就是页面中再包含一个页面, 这样也可以避免google map key的失效, 也非常方便, 把响应的googlemap api放在一个html文件文件中就可以了


<IFRAME>标签代码 — 插入到您想显示的地方

<div>
<IFRAME  id=adv   name=adv   align=center   marginWidth=0   marginHeight=0   src="http://www.yoursite.com/google.html"   frameBorder=0   width=210   height=276 scrolling=no></IFRAME><br />
</div>
其中div标签的css样式可以自己添加, src是你的html文件的位置, 还有一些显示的属性, 可以自己调一下




前面的工作: 

1. 在使用该 API 之前,您需要先申请一个API Key

2. 用你的域名申请一个API key,一个地图 API Key 只对您网络服务器上的一个“目录”有效, 所以需要填写真实的目录,否则google地图将无法正常显示



开始制作自己的google.html

1. 新建一个记事本,改变扩展名为html,编辑

2. 添加如下代码(通过我编写的代码, 你差不多就可以了解googlemap的简单工作过程了)

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <style type="text/css">
    v:* {
      behavior:url(#default#VML);
    }
    </style>
    <script src="http://maps.google.com/maps?file=api&v=2&key=YourKey"
      type="text/javascript"></script>
    <script type="text/javascript">

//<![CDATA[

function load(){ //加载google地图API
	if (GBrowserIsCompatible()){ //判断当前浏览器是否支持
		var map = new GMap2(document.getElementById("map")); //取得map对象

		//设置显示区域的中心点(经度,纬度)
		var center_point = new GLatLng(38.41055825094609, 115.42236328125);
		map.setCenter(center_point, 6);	//参数:1.中心点变量 2.精度值(高度值?)
		map.addControl(new GSmallMapControl()); //加入缩放按钮
		map.addControl(new GScaleControl()); //加入小地图显示
		
		//显示标记所用的图片(未使用阴影图片)
		var icon1 = new GIcon();
		icon1.image = "http://www.yoursite.com/images/a.gif"; //图片所在位置
		icon1.iconSize = new GSize(16, 16); //图片大小
		icon1.iconAnchor = new GPoint(8, 13); //图片的锚点

		var home_point = new GLatLng(37.056136,114.457626); //标记坐标
		//添加标记,参数:1.坐标 2.标记图片(第二个参数省略以后,用默认图片)
		map.addOverlay(new GMarker(home_point, icon1)); 
		
		//折线终止点
		var go_point = new GLatLng(39.98738,116.320152);	
		
		//添加折线
		var second_points = []; //折线点数组
		second_points.push(home_point); //添加第一个点
		second_points.push(go_point); //添加第二个点
		map.addOverlay(new GPolyline(second_points)); //添加折线
		
		//添加自定义控件(实现地图与卫星图的转换)
		function TextualZoomControl() {
		}

		TextualZoomControl.prototype = new GControl();
		
		TextualZoomControl.prototype.initialize = function(map) {
		  var container = document.createElement("div");

		  var zoomInDiv = document.createElement("div");
		  this.setButtonStyle_(zoomInDiv);
		  container.appendChild(zoomInDiv);
		  zoomInDiv.appendChild(document.createTextNode("地图"));
		  GEvent.addDomListener(zoomInDiv, "click", function() {
			map.setMapType(G_NORMAL_MAP); //改变形式为地图
		  });

		  var zoomOutDiv = document.createElement("div");
		  this.setButtonStyle_(zoomOutDiv);
		  container.appendChild(zoomOutDiv);
		  zoomOutDiv.appendChild(document.createTextNode("卫星图"));
		  GEvent.addDomListener(zoomOutDiv, "click", function() {
			map.setMapType(G_HYBRID_MAP); //改变形式为卫星图
		  });

		  map.getContainer().appendChild(container);
		  return container;
		}

		TextualZoomControl.prototype.getDefaultPosition = function() {
		  //自定义控件的显示位置
		  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(55, 7));
		}

		TextualZoomControl.prototype.setButtonStyle_ = function(button) {
		  //自定义控件的样式
		  button.style.color = "#ffffff";
		  button.style.backgroundColor = "#000000";
		  button.style.font = "small Arial";
		  button.style.padding = "2px";
		  button.style.marginTop = "5px";
		  button.style.textAlign = "center";
		  button.style.width = "3em";
		  button.style.cursor = "pointer";
		}
		
		//添加自定义控件
		map.addControl(new TextualZoomControl());
	}
}

//]]>
    </script>
  </head>
  <body  >
    <div id="map" style="width: 200px; height: 266px;border:5px solid black;"></div>
  </body>
</html>


HTML的相关说明:


1. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

2. <style type="text/css">

   v:* {

    behavior:url(#default#VML);

   }

   </style>

 说明: 两个是为了在IE下, 正常显示折线而添加的


3. <script src="http://maps.google.com/maps?file=api&v=2&key=YourKey" type="text/javascript"></script>

 说明:这里的YourKey就是要放你上面申请的Key的值的地方


4. <body>标签的load()事件和GUnload()事件

 说明: 前者是页面直接加载googlemap, 后者会消除大多数导致内存泄露的循环引用, 以避免您应用程序可能带来的内存泄露问题

5. <div id="map" style="width: 200px; height: 266px;border:5px solid black;"></div>

 说明:这个div标签,是显示google地图的标签,可以设定宽度和高度,border是边框,我是为了适应我的模板加上的


官方文档: 

Google地图API(官方中文)

Google地图API博客(官方英文)

关于IE下显示折线的官方解释


这里只是googlemap的简单的应用,高级应用未接触,仅供参考

Trackback from your site.

请在这里留言：