• 谷歌地图开发经验分享系列之二:Google Map API基础对象操作和用法(Map类和LatLng类)


    上一节给大家简单介绍了谷歌地图API,从这一节开始,我将陆续为大家介绍谷歌地图API中常见基础对象的操作和用法。

    一、google.maps.Map类

    google.maps.Map类是谷歌地图最基础的类。它包括谷歌地图最基本的地图属性对象规范,绑定方法和触发事件。

    1、构造函数:Map(mapDiv:Node, opts?:MapOptions)  

    在指定的HTML容器中创建谷歌地图。mapdiv:即指定的容器,opts:谷歌地图属性设置。如下图所示:

    2、地图属性对象规范

    地图属性对象规范定义了谷歌地图的基本属性,常见的包括地图的缩放级别,地图的中心位置,地图的默认加载类型等等,再深入研究它还可以设置地图控件的呈现方式与使用规则,同时也可以控制针对地图的相关事件触发方式,比如双击,单击,地图拖拽等。

    (1)center:初始的地图中心。必填

    (2)mapTypeId:初始的地图类型。必填

    (3)zoom:初始的地图缩放级别。必填

    (4)mapTypeControl:地图类型控件的初始启用/停用状态。

    (5)maxZoom:在地图上显示的最大缩放级别。如果将该属性省略或设置为Null,则系统会改为使用当前地图类型的最大缩放级别(21)。

    (6)minZoom:在地图上显示的最小缩放级别。如果将该属性省略或设置为Null,则系统会改为使用当前地图类型的最小缩放级别(0)。

    (7)draggable:地图是否允许拖动,默认为允许拖动。

    (8)overviewMapControl:总览图控件的启用/停用状态。

    (9)zoomControl:缩放控件的启用/停用状态。

    (10)panControl:平移控件的启用/停用状态。

    (11)rotateControl:旋转控件的启用/停用状态。

    (12)scaleControl:比例控件的初始启用/停用状态。

    (13)scrollwheel:通过滚轮缩放地图的启用/停用状态。默认情况下启用滚轮功能。

    (14)streetViewControl:街景小人控件的初始启用/停用状态。

    3、map对象常见方法

    (1)getCenter():获取地图中心的经纬度。

    (2)getZoom():获取地图当前缩放级别。

    (3)setCenter(latlng:LatLng):设置地图中心的经纬度。

    (4)setZoom(zoom:number):设置地图的缩放级别。

    (5)setOptions(options:MapOptions) :设置地图的多个属性。

    4、map对象常见事件

    (1)click:左键单击地图触发此事件。

    (2)rightclick:右键单击地图触发此事件。

    (3)dblclick:左键双击地图触发此事件,默认双击事件是放大地图。单击事件与双击事件同时存在时,只能监听到单击事件

    (4)zoom_changed:当地图缩放级别变化时触发此事件。

    上述只是列举了一些常用的属性、方法和事件,更多内容还请参看API文档。

    二、google.maps.LatLng类

    1、构造函数: LatLng(lat:number, lng:number, noWrap?:boolean)

    请注意纬度和经度的顺序。如果 noWrap标记为 True,则在传递时会使用这些数字,否则纬度会限定在 -90 度和 +90 度之间,而经度会限定在 -180 度和 + 180 度之间。noWrap默认为False。

    2、常见方法

    (1)lat() :用于返回纬度值(以度为单位)。

    (2)lng() :用于返回经度值(以度为单位)。

    (3)toString() :转换为字符串表示。

     针对上述内容,DEMO中均有使用介绍。大家有什么疑问,可以提出来大家一起交流学习。DEMO下载:http://files.cnblogs.com/allon6318/gmap2.zip

     

     

  • 相关阅读:
    大厂机密!30 个提升团队研发效能的锦囊
    爆肝 200 小时,我做了个编程导航!
    AJAX数据传输之请求与发送
    JS高级技巧之函数节流
    JS实战笔记
    JS获取DOM元素位置与大小
    JS实现快排算法
    构造可重用的Ajax对象
    JS字符串操作总结
    JS常用函数小结
  • 原文地址:https://www.cnblogs.com/allon6318/p/3429855.html
Copyright © 2020-2023  润新知