当前位置: 代码迷 >> JavaScript >> 初学 Google Maps JavaScript (2) 切换map
  详细解决方案

初学 Google Maps JavaScript (2) 切换map

热度:288   发布时间:2012-09-16 17:33:16.0
初学 Google Maps JavaScript (2) 切换地图
PS:(<script src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script><!--载入 Google Maps-->)
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no;" />
<meta charset="utf-8" />
<script src="http://maps.google.com/maps/api/js?sensor=false"></script><!--载入 Google Maps-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><!--载入 jQuery-->
<style>
#setType{-webkit-border-radius:10px;border:1px solid #CCC;padding:5px;background:#FFF;cursor:pointer;}
</style>
<script>
$(function(){
	var map = new google.maps.Map($("#map")[0],{
		zoom:10,
		center:new google.maps.LatLng(34.28,117.11),
		mapTypeId:google.maps.MapTypeId.ROADMAP
	});
	var num = 1;
	var mapTypeArr = [
						google.maps.MapTypeId.ROADMAP,
						google.maps.MapTypeId.HYBRID,
						google.maps.MapTypeId.TERRAIN,
						google.maps.MapTypeId.SATELLITE
					];
	$("#setType").mousedown(function(){
		$(this).css('background','#39F');
	}).mouseup(function(){
		$(this).css('background','#FFF');
		num==mapTypeArr.length?num=0:num;
		map.setMapTypeId(mapTypeArr[num]);
		++num;	
	});  
});
</script>
</head>
<body>
<input  type="button"  id="setType" value="切换地图类型">
  	<div id="map" style="width:100%;height:100%;"></div>
</body>
</html>
</html>
  相关解决方案