在前面的例子中，我们使用了一个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，欢迎访问原出处。
大家都在看