为你的博客添加Google地图(Use googlemap api)
早就听说能加Google地图了, 这次就试了一下, 效果还是不错的, 页面右边就是用本篇文章的方法做了
大家试试~本篇介绍 Goole API 的简单应用
设计思路:
一开始想就是一组javascripte应该,插入到博客的模板文件就可以了, 但是在服务器上测试以后,才知道,需要修改很多值, 尤其是HTML主要标签的属性也需要改, 这样的话,就很容易使本身的博客程序, 发生异常情况…
所以就应该换一种思路, 用<iframe>标签可以达到嵌入页面的效果, 也就是页面中再包含一个页面, 这样也可以避免google map key的失效, 也非常方便, 把响应的googlemap api放在一个html文件文件中就可以了
<IFRAME>标签代码 — 插入到您想显示的地方
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
<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></html> 其中div标签的css样式可以自己添加, src是你的html文件的位置, 还有一些显示的属性, 可以自己调一下<br /> <br /> 前面的工作: <br /> 1. 在使用该 API 之前,您需要先<a href="http://www.google.cn/apis/maps/signup.html" target="_blank">申请一个API Key</a><br /> 2. 用你的域名申请一个API key,一个地图 API Key 只对您网络服务器上的一个“目录”有效, 所以需要填写真实的目录,否则google地图将无法正常显示<br /> <br /> 开始制作自己的google.html<br /> 1. 新建一个记事本,改变扩展名为html,编辑<br /> 2. 添加如下代码(通过我编写的代码, 你差不多就可以了解googlemap的简单工作过程了) <pre cpp> <!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.