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

简介:  开始需要一个包含地图的HTML元素。你可以在这个元素中添加JavaScript不可用或者浏览器不支持的时候要显示的内容。
 
开始需要一个包含地图的 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由于内存溢出的问题变得比较慢。
                                        
提示: http://javascript.weblogsinc.com/2005/03/07/javascript-memory-leaks/ 上,你可以学习到更多有关MSIE内存溢出的东西以及其解决办法
                                        
 
相关文章
|
定位技术 开发工具 开发者
为了让外卖小哥在地图里开上火箭🚀我用FLutter自定义了地图
花了五天时间,用Flutter自定义地图是什么体验?外卖小哥都开上火箭了?什么?我被女朋友赶出家门啦?欢迎观看被女友赶出家门之开火箭送外卖篇~
|
9月前
|
前端开发 定位技术 API
怎么用LarkMap完成地图需求
本文属于技术选型的参考性文章,主要以一个一个的案例分析,来带各位快速的了解到LarkMap能帮助我们完成哪些需求。希望阅读完之后您对LarkMap有一个大致的印象,若后续有地图需求的话,可以考虑使用LarkMap。
334 2
|
9月前
|
前端开发 JavaScript 算法
程序技术好文:高德地图经纬度坐标拾取工具
程序技术好文:高德地图经纬度坐标拾取工具
243 0
|
10月前
|
前端开发 定位技术
前端知识笔记(十七)———地图多点标注功能
前端知识笔记(十七)———地图多点标注功能
172 1
|
数据采集 运维 NoSQL
数据地图?地图数据?傻傻分不清楚!
数据地图?地图数据?傻傻分不清楚!
|
定位技术 Android开发
如何做一个简单的网页版地图
如何做一个简单的网页版地图
258 1
|
JavaScript 前端开发 定位技术
地图开发实战案例:高德地图弧线连接线标注
地图开发实战案例:高德地图弧线连接线标注
171 0
|
定位技术
openlayers4加载百度地图、百度影像图、谷歌地图、谷歌影像图
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/79994141 openlayers4加载百度地图、百度影像图、谷歌地图、谷歌影像图 http://www.
3869 0