读书人

初学 Google Maps JavaScript (2) 切换

发布时间: 2012-09-16 17:33:16 作者: rapoo

初学 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>

读书人网 >JavaScript

热点推荐