Google Maps API指南:设置地图选项

一起来看看下面的地图选项
服务器君一共花费了321.394 ms进行了8次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

在前面的例子中,我们使用了一个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
属性
style
  • DEFAULT
  • HORIZONTAL_BAR
  • DROPDOWN_MENU
  • position
  • BOTTOM
  • BOTTOM_LEFT
  • BOTTOM_RIGHT
  • LEFT
  • RIGHT
  • TOP
  • TOP_LEFT
  • TOP_RIGHT
  • mapTypeIds
  • ROADMAP
  • SATELLITE
  • Hybrid
  • Terrain
  • navigationControl:true/false
  • navigationControlOptions
  • 属性
    Position
  • BOTTOM
  • BOTTOM_LEFT
  • BOTTOM_RIGHT
  • LEFT
  • RIGHT
  • TOP
  • TOP_LEFT
  • TOP_RIGHT T
  • style
  • DEFAULT
  • SMALL
  • ANDROID
  • scaleControl:true/false scaleControlOptions : 和 navigationControl有一样的属性 ( position , style) 方法也一样.
    disableDoubleClickZoom: true/false
    scrollwheel: true/false
    draggable: true/false
    streetViewControl: true/false

    延伸阅读

    此文章所在专题列表如下:

    1. Google Maps API指南:在网页中嵌入GMaps
    2. Google Maps API指南:设置地图选项
    3. Google Maps API指南:地图标记与信息窗口
    4. Google Maps API指南:地图事件
    5. Google Maps API指南:点击添加标注
    6. Google Maps API指南:添加多个随机标注

    本文地址:http://www.nowamagic.net/librarys/veda/detail/1688,欢迎访问原出处。

    不打个分吗?

    转载随意,但请带上本文地址:

    http://www.nowamagic.net/librarys/veda/detail/1688

    如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
    小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

    大家都在看

    阅读一百本计算机著作吧,少年

    很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

    奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

    所以,阅读一百本计算机著作吧,少年!

    《算法导论(原书第2版)》 科曼(Cormen T.H.) (作者), 等 (作者, 译者), 潘金贵 (译者)

    《算法导论(原书第2版)》一书深入浅出,全面地介绍了计算机算法。对每一个算法的分析既易于理解又十分有趣,并保持了数学严谨性。本书的设计目标全面,适用于多种用途。涵盖的内容有:算法在计算中的作用,概率分析和随机算法的介绍。本书专门讨论了线性规划,介绍了动态规划的两个应用,随机化和线性规划技术的近似算法等,还有有关递归求解、快速排序中用到的划分方法与期望线性时间顺序统计算法,以及对贪心算法元素的讨论。本书还介绍了对强连通子图算法正确性的证明,对哈密顿回路和子集求和问题的NP完全性的证明等内容。全书提供了900多个练习题和思考题以及叙述较为详细的实例研究。

    更多计算机宝库...