天天看点

用Google地图为你的网站添加地图之二

开始需要一个包含地图的HTML元素。你可以在这个元素中添加JavaScript不可用或者浏览器不支持的时候要显示的内容。这个内容可以是任何的HTML、文本,甚至同一地图的一个静态图片。后者是一个比较好的选择,可以确保向后兼容;你只需要确保不要在文本中的任何地方告诉用户地图是动态的就可以了,因为它可能会不是动态的。

exampleGoogleMaps.html (摘录)

<div id="map">

<p>Here you should see an interactive map, but you

either have scripting disabled or your browser

is not supported by Google Maps.</p>

</div>

确保你在CSS中已经给出了那个元素的尺寸,因为不然的话地图会显得很没有规律。

googleMaps.css

#map{

width:400px;

height:300px;

border:1px solid #999;

margin:1em;

}

要把地图添加到你的HTML文档中,需要在你像前面说明的那样添加主要的Google地图代码之后嵌入下面的脚本(包含文件或者放到SCRIPT元素中)。

googleMaps.js

function addMap() {

if ( GBrowserIsCompatible() ) {

var mapContainer = document.getElementById( 'map' );

var map = new GMap2( mapContainer );

var point = new GLatLng( 51.5623, -0.0934 );

map.setCenter( point, 13 );

window.onload = addMap;

window.onunload = GUnload;

API的GBrowserIsCompatible()函数会检查浏览器是否支持Google地图,如果是的话则返回true。在文档加载完成后,你可以调用自己的函数addMap(),当文档关闭的时候,调用API提供的GUnload()函数(因为关闭窗口会触发unload事件)。后者是必需的,因为这个地图使用了许多的事件处理,这可能会使得MSIE由于内存溢出的问题变得比较慢。

                                        

■提示:在[url]http://javascript.weblogsinc.com/2005/03/07/javascript-memory-leaks/[/url]上,你可以学习到更多有关MSIE内存溢出的东西以及其解决办法。

本文转自 牛海彬 51CTO博客,原文链接:http://blog.51cto.com/newhappy/76852,如需转载请自行联系原作者

继续阅读