zoukankan      html  css  js  c++  java
  • google map添加控件并设置控件的位置

    google地图包含允许用户与地图交互的 UI 元素,这些元素称为“控件”。您可以在 Google 地图中组合使用这些控件来设置地图的样式。

    地图 API 带有大量可以在地图中使用的内置控件:

    • GLargeMapControl - 一个在 Google 地图上使用的大平移/缩放控件。默认情况下显示在地图的左上角。
    • GSmallMapControl - 一个在 Google 地图上使用的小一点的平移/缩放控件。默认情况下显示在地图的左上角。
    • GSmallZoomControl - 小型缩放控件(无平移控件),用于在 Google 地图上显示行车路线的小地图弹出窗口。
    • GScaleControl - 地图比例尺
    • GMapTypeControl - 让用户切换地图类型(例如“地图”和“卫星”)的按钮
    • GHierarchicalMapTypeControl - 用于放置多个地图类型选择器的一组精选的嵌套按钮和菜单项(可以在卫星地图的模式下显示地名和街道名)。
    • GOverviewMapControl - 位于屏幕一角的可折叠概览地图(在屏幕右下的鸟瞰图)。

    所有这些控件都基于 GControl 对象。

    1 //添加缩放控件
    2 map.addControl(new google.maps.LargeMapControl());
    3 //添加地图比例尺
    4 map.addControl(new google.maps.ScaleControl());
    5 //位于屏幕右下的鸟瞰地图
    6 map.addControl(new google.maps.OverviewMapControl());
    7 //放置多个地图类型选择器的一组精选的嵌套按钮和菜单项
    8 map.addControl(new google.maps.HierarchicalMapTypeControl());

    设置地图类型 

    下面是当前支持的地图类型列表:

    • G_NORMAL_MAP 显示 Google 地图默认的普通二维图块
    • G_SATELLITE_MAP 显示拍摄的图块
    • G_HYBRID_MAP 同时显示拍摄的图块和普通(突出显示道路、城市名等明显地图特征)图块
    • G_PHYSICAL_MAP 根据地形信息显示实际地图图块

    默认情况下,Google 地图 API 提供三种地图类型:G_NORMAL_MAPG_SATELLITE_MAPG_HYBRID_MAP。您可以通过这两种方式来改变地图上可用的地图类型:使用 GMap2.removeMapType() 删除地图类型;使用 GMap2.addMapType() 添加地图类型。无论您何时创建地图类型控件,它都使用当前地图上已经添加的地图类型,并通过控件让用户可以切换这些地图类型。

    1 //切换地图类型
    2 map.setMapType(G_NORMAL_MAP);
    3 //移除
    4 map.removeMapType(G_NORMAL_MAP);
    5 //添加
    6 map.addMapType(G_NORMAL_MAP);

    在地图上放置控件

    addControl 方法有第二个可选的参数 GControlPosition,可用于指定控件在地图上的位置。它可以是以下值之一,这些值分别指定要放置控件的地图某个角:

    • G_ANCHOR_TOP_RIGHT
    • G_ANCHOR_TOP_LEFT
    • G_ANCHOR_BOTTOM_RIGHT
    • G_ANCHOR_BOTTOM_LEFT

    如果不包含此参数,则地图 API 会使用控件指定的默认位置。

    GControlPosition 还可以指定偏移量,来指示控件的放置位置与地图边界间隔多少像素。这些偏移量使用 GSize 对象指定。

    GMapTypeControl 添加到地图的右上角,填充为 10 个像素。

    1 var map = new GMap2(document.getElementById"map_canvas"));
    2 var mapTypeControl = new GMapTypeControl();
    3 var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));
    4 map.addControl(mapTypeControl, topRight);
  • 相关阅读:
    javaweb基础(6)_servlet配置参数
    javaweb基础(5)_servlet原理
    读书笔记:java特种兵(上)
    基础算法(四):海量数据的处理方法
    基础算法(三)动态规划和贪心算法
    基础算法(二):堆排序,快速排序
    基本算法(一):插入排序,归并排序
    JVM基础和调优(六)
    JVM基础和调优(五)
    JVM基础和调优(四)
  • 原文地址:https://www.cnblogs.com/hyl8218/p/1641980.html
Copyright © 2011-2022 走看看