如何对谷歌地图做客户化定制（进阶）

google-map-customization-advanced

在上一篇文章中我们介绍了谷歌地图客户化方法基础部分的内容，本篇文章将以此为基础进一步介绍进阶部分的内容，包括地图界面操作接口定制、地图相关事件的响应处理、地图标记客户化。另外更多的针对地图定制化的功能和应用（如图层、绘制、矢量符号等），可以参考谷歌地图相关的文档指南。

一、地图界面操作接口

我们在使用谷歌地图的时候都是通过一些界面元素（控件）来完成的，比如地图类型选择按钮、放大缩小按钮、全屏按钮、街景按钮等，这些界面元素都是可以根据需求来做定制的（启用/禁用、样式、位置）。

1、界面控件定制

谷歌地图包含的界面元素控件有缩放（zoomControl）、类型（mapTypeControl）、街景（streetViewControl）、旋转（rotateControl）、比例（scaleControl）、全屏（fullscreenControl），可以对这些控件启用或停用，修改显示样式和位置。例如不显示缩放按钮可以使用如下的代码：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 39.9042, lng: 116.4074},
    zoomControl: false
  });
}

界面元素控件都有相应的属性来控制显示方式，例如地图类型选择缺省是显示按钮，如果要显示下拉菜单，可以使用下面的代码：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 39.9042, lng: 116.4074},
    mapTypeControl: true,
    mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
    mapTypeIds: ['roadmap', 'satellite']
   }
  });
}

地图界面元素的位置属性包括：顶左（TOP_LEFT）、左顶（LEFT_TOP）、左中（LEFT_CENTER）、左下（LEFT_BOTTOM）、下左（BOTTOM_LEFT、顶中（TOP_CENTER）、下中（BOTTOM_CENTER）、下右（BOTTOM_RIGHT）、顶右（TOP_RIGHT）、右顶（RIGHT_TOP）、右中（RIGHT_CENTER）、右下（RIGHT_BOTTOM）。如果要在地图顶左的位置显示界面控件，可以使用下面的代码：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: 39.9042, lng: 116.4074},
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_LEFT
    }
  });
}

另外，在地图上创建用户控件的方法可以参考谷歌地图相关的文档指南。

2、地图缩放、移动控制

当在网页中与地图界面进行交互的时候，可能需要控制地图的响应方式，比如当滚动网页到地图视口的时候不希望缩放、移动地图。谷歌地图使用 gestureHandling 属性来控制与用户交互时地图的响应方式，分别有四种设置：

（1）greedy：允许地图滚动和移动，包括使用触屏的时候单指可以移动地图

（2）cooperative：在使用触屏的时候需要两指来移动地图

（3）none：禁用滚动网页时缩放和移动地图

（4）auto（缺省）：如果网页尺寸大于地图视口或者无法确定网页尺寸时设置成cooperative；如果网页尺寸不大于地图视口设置成 greedy。

例如，禁用缩放和移动地图可以使用下面的代码：

function initMap() {
  var beijing = {lat: 39.9042, lng: 116.4074};
  var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 8,
  center: beijing,
  gestureHandling: 'none',
  zoomControl: false
 });
}

二、地图事件响应

当用户在地图上做操作时会产生事件，比如鼠标点击、拖拽地图、地图尺寸变化等，如果需要响应这些事件并做处理，就需要借助事件响应接口来完成。谷歌地图提供了两种类型的事件，即用户触发事件和地图对象状态改变通知，两种类型的事件都是通过关联相应的事件处理函数来响应事件并做处理。谷歌地图完整的事件列表可以参看相关的文档指南，下面列出常用的事件：

1、UI 事件

‘click’ | ‘dblclick’ | ‘mouseup’ | ‘mousedown’ | ‘mouseover’ | ‘mouseout’

2、通知

‘center_changed’ | ‘heading_changed’ | ‘maptypeid_changed’ | zoom_changed

对上面的事件设置响应是通过在具体的地图对象上调用函数 addListener() 建立事件关联，当事件被触发后将调用所关联的函数。下面用代码举例说明（引用谷歌地图相关文档指南）：

function initMap() {
  var beijing = {lat: 39.9042, lng: 116.4074};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: beijing
  });

  var marker = new google.maps.Marker({
    position: beijing,
    map: map,
    title: '点击 缩放'
  });
  //地图中心改变事件处理函数定义
  map.addListener('center_changed', function() {
    // 等待3秒钟把地图中心设置成标记所在位置
    window.setTimeout(function() {
      map.panTo(marker.getPosition());
    }, 3000);
  });
  //标记相关事件（点击标记）处理函数定义
  marker.addListener('click', function() {
    map.setZoom(6); // 地图放大
    map.setCenter(marker.getPosition()); // 地图中心为标记所在位置
  });
}

三、地图标记定制

对地图做标记是我们经常会用到的一项功能，下面就针对地图标记介绍两个定制方案。

1、定制动画标记

谷歌地图的标记对象有动画属性，设置成相应的值可以让标记产生动画效果：

（1）DROP：从地图顶部下落到标记所在位置

（2）BOUNCE：标记在其位置处做弹跳

示例代码如下（引用谷歌地图相关文档指南）：

var marker;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 39.9042, lng: 116.4074}
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP, //标记初始动画
    position: {lat: 39.9042, lng: 116.4074}
  });
  marker.addListener('click', toggleBounce); // 点击标记，启动动画
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null); // 动画停止
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE); // 动画开始
  }
}
2、修改标记图标

除了使用谷歌地图标记内置的图标以外，还可以设置用户自定义的图标。下面的示例代码设置用户自定义的信息标记图标（引用谷歌地图相关文档指南）：

<script>
  var map;
  function initMap() {
    map = new google.maps.Map(
        document.getElementById('map'),
        {center: new google.maps.LatLng(-33.91722, 151.23064), zoom: 16});

    var iconBase =
            'https://developers.google.com/maps/documentation/javascript/examples/full/images/'; // 图标库位置

    var icons = {
      info: {
        icon: iconBase + 'info-i_maps.png' // 图标文件名
      }
    };
    // 设置三个标记位置和类型
    var features = [
      {
        position: new google.maps.LatLng(-33.91721, 151.22630),
        type: 'info'
      }, {
        position: new google.maps.LatLng(-33.91539, 151.22820),
        type: 'info'
      }, {
        position: new google.maps.LatLng(-33.91747, 151.22912),
        type: 'info'
      }
    ];

    // 创建标记
    for (var i = 0; i < features.length; i++) {
      var marker = new google.maps.Marker({
        position: features[i].position,
        icon: icons[features[i].type].icon,
        map: map
      });
    };
  }
</script>

发表评论

邮箱地址不会被公开。 必填项已用*标注