`
pixy
  • 浏览: 36081 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

选项卡中加载Google Map

阅读更多
网上大多数Google map的例子都是页面加载的时候把Map也加载,按照这样的方式把google map放到选项卡中(显示map的选项卡默认是display: none的),map将无法正常显示.
原因不是很清楚,应该是google map的Js加载问题
实现的效果如图:



下面的关键的代码,详细的例子请参考附件
<script	src="http://ditu.google.com/maps?file=api&amp;v=2&amp;key=&hl=zh-CN" type="text/javascript"></script>

    var cenx = 22.50128;
	var ceny = 113.914619;
	var stzoom = 14;
	var map;
        //使用google的jsapi来加载google map
	function initLoader() {
		var script = document.createElement("script");
		script.src = "http://www.google.com/jsapi?key=abc&callback=loadMaps";
		script.type = "text/javascript";
		document.getElementsByTagName("head")[0].appendChild(script);
	}
	function loadMaps() {
		google.load("maps", "2", {"callback" : initialize()});
	}
	function initialize()
		map=new GMap2(document.getElementById("map_canvas"));
		//设置地图的中心坐标.
	    var loc = new GLatLng(cenx,ceny);
	    map.setCenter(loc,stzoom);	                
		map.addOverlay(createMarker(loc));
		
	}
	//增加标注
	function createMarker(point) {
		var marker = new GMarker(point);
		GEvent.addListener(marker, "click", function(){marker.openInfoWindowHtml("标注");});   
		return marker;   
	} 

  • 大小: 25.7 KB
分享到:
评论

相关推荐

    Google Android SDK开发范例大全(PDF高清完整版1)(4-1)

    9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 10.1 ...

    Open inline map-crx插件

    语言:English 打开Google地图内联 “打开内联地图”是从您所选择的单词加载Google Map的扩展名。... * Google Map加载内联,因此您无需打开一个新选项卡。 资源 https://github.com/kyo-ago/open-inline-map-extense

    Google Android SDK开发范例大全(第3版) 4/5

    8.20 网络下载过程中显示加载中 8.21 快照WebView加载的网页画面 8.22 网页的放大与缩小 8.23 WebView网页载入中、载入完成样版 8.24 通过内嵌Flash Player播放FLV电影 8.25 WebView网站Session Cookie判断与访问 ...

    Google Android SDK开发范例大全(第3版) 3/5

    8.20 网络下载过程中显示加载中 8.21 快照WebView加载的网页画面 8.22 网页的放大与缩小 8.23 WebView网页载入中、载入完成样版 8.24 通过内嵌Flash Player播放FLV电影 8.25 WebView网站Session Cookie判断与访问 ...

    Google Android SDK开发范例大全(第3版) 5/5

    8.20 网络下载过程中显示加载中 8.21 快照WebView加载的网页画面 8.22 网页的放大与缩小 8.23 WebView网页载入中、载入完成样版 8.24 通过内嵌Flash Player播放FLV电影 8.25 WebView网站Session Cookie判断与访问 ...

    Google Android SDK开发范例大全(第3版)part2

     9.6 移动版Google Map  9.7 规划导航路径  9.8 移动设备上的Picasa相册  9.9 随身翻译机  9.10 通过YouTube ID调用YouTube播放影片  9.11 Google Analytics分析手机用户行为  第10章 创意Android程序...

    Google Android SDK开发范例大全(第3版) 1/5

    8.20 网络下载过程中显示加载中 8.21 快照WebView加载的网页画面 8.22 网页的放大与缩小 8.23 WebView网页载入中、载入完成样版 8.24 通过内嵌Flash Player播放FLV电影 8.25 WebView网站Session Cookie判断与访问 ...

    Google Android SDK开发范例大全(PDF高清完整版3)(4-3)

    9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 10.1 ...

    google android sdk开发范例大全 第二版 PDF 光盘代码

     9.6 移动版Google Map   9.7 规划导航路径   9.8 移动设备上的Picasa相册   9.9 随身翻译机  第10章 创意Android程序设计   10.1 手机手电筒   10.2 GPS轨迹记录器   10.3 女性贴身...

    Google Android SDK开发范例大全(PDF完整版4)(4-4)

    9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 10.1 ...

    Google Android SDK开发范例大全的目录

    9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 10.1 ...

    Project-5-Neighborhood-Map:Udacity项目5

    项目5-邻里地图Udacity项目5 波特兰是我想再次... 单击搜索结果右侧的“隐藏/显示”选项卡会将结果移出屏幕,以更好地查看地图。 使用进行了测试,为各种尺寸的屏幕添加了响应式设计更改。 使用下面的URL签出我的项目。

    IP请求映射器「IP Request Mapper」-crx插件

    v1.4.1发行说明修复了针对非HTTP协议的主机名的错误修复程序v1.4.0发行说明切换到onBeforeSendHeaders以捕获更多请求主要重构和代码清理更新至jQuery v1.3.8的最新版本发行说明切换至窗口从地图的标签选项卡-----此...

    《Google Android SDK开发范例大全(第3版)》.pdf

    9.6 移动版google map 653 9.7 规划导航路径 658 9.8 移动设备上的picasa相册 664 9.9 随身翻译机 677 9.10 通过youtube id调用youtube播放影片 681 9.11 google analytics分析手机用户行为 686 ...

    Google Android SDK开发范例大全(完整版附部分源码).pdf

    9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 ...

    Google Android SDK 开发范例大全01

    9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 10.1 ...

    Google Android SDK 开发范例大全02

    9.6 移动版GoogleMap——Geocoder反查Address对象 9.7 规划导航路径——DirectionsRoute 9.8 移动设备上的Picasa相册——GooglePicasaAPI 9.9 随身翻译机——GoogleTranslateAPI 第10章 创意Android程序设计 10.1 ...

Global site tag (gtag.js) - Google Analytics