在前面的例子中,我们使用了一个Map类,并设置了一个HTML ID作为参数。现在我们来更深入一点,一起来看看下面的地图选项:
程序演示
代码
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style> <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"> </script> <script> function initialize() { var latlng = new google.maps.LatLng(36.1733569352216, 106.171875); var options = { zoom: 5, center: new google.maps.LatLng(36.1733569352216, 106.171875), mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, poistion: google.maps.ControlPosition.TOP_RIGHT, mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.SATELLITE] }, navigationControl: true, navigationControlOptions: { style: google.maps.NavigationControlStyle.ZOOM_PAN }, scaleControl: true, disableDoubleClickZoom: true, draggable: false, streetViewControl: true, draggableCursor: 'move' }; var map = new google.maps.Map(document.getElementById("map_canvas"), options); } window.onload = initialize; </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>
我们应用了地图的所有属性,你可以根据需要来选择在地图、卫星图或者地形图中使用它们。
Map类的属性说明如下表所示:
属性 | 类 | |||||||||||
MapTypeControl:true/false | mapTypeControlOptions
|
|||||||||||
navigationControl:true/false |
|
|||||||||||
scaleControl:true/false | scaleControlOptions : 和 navigationControl有一样的属性 ( position , style) 方法也一样. | |||||||||||
disableDoubleClickZoom: true/false | ||||||||||||
scrollwheel: true/false | ||||||||||||
draggable: true/false | ||||||||||||
streetViewControl: true/false |
延伸阅读
此文章所在专题列表如下:
- Google Maps API指南:在网页中嵌入GMaps
- Google Maps API指南:设置地图选项
- Google Maps API指南:地图标记与信息窗口
- Google Maps API指南:地图事件
- Google Maps API指南:点击添加标注
- Google Maps API指南:添加多个随机标注
本文地址:http://www.nowamagic.net/librarys/veda/detail/1688,欢迎访问原出处。
大家都在看