选项卡中加载Google Map

最新推荐文章于 2024-01-25 19:14:08 发布

pixy1989

最新推荐文章于 2024-01-25 19:14:08 发布

阅读量115

点赞数

分类专栏： GoogleMap 文章标签： Google JavaScript ITeye ViewUI

本文链接：https://blog.csdn.net/pixy1989/article/details/83892083

版权

GoogleMap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

[size=medium]网上大多数Google map的例子都是页面加载的时候把Map也加载,按照这样的方式把google map放到选项卡中(显示map的选项卡默认是display: none的),map将无法正常显示.
原因不是很清楚,应该是google map的Js加载问题
实现的效果如图:[/size]
[img]http://dl.iteye.com/upload/attachment/464530/0e0a77a3-86b9-3fc8-8ee9-7edbcdb2f763.jpg[/img]

下面的关键的代码,详细的例子请参考附件

<script	src="http://ditu.google.com/maps?file=api&v=2&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;   
	}