谷歌舆图 API 开辟之增加标记（剖析以及补充）

2024年2月6日 184次阅读 来源: 旅图灬

本日又看了下官网，发明官网上有舆图标记的细致申明。当时竟然眼瞎看不见，还琢磨了良久…#$%^&，一定是项目太急，没看到(^o^)/~
地点：https://developers.google.com…

增加标记

google.maps.Marker 的组织函数只需传入一个 MarkerOptions 对象字面量，用于指定标记的初始属性。

以下字段迥殊主要，而且在构建标记时通常会举行设置：

  • position（必填）指定用于标识标记的初始位置的 LatLng。 map（可选）指定用来安排标记的

  • Map。假如您在构建标记时未指定舆图，则标记会被建立，但不会附加到（或显现在）舆图上。您今后可以经由过程挪用标记的 setMap() 要领来增加标记。

以下示例将一个简朴的标记增加到乌鲁鲁（位于澳大利亚的中间）的舆图上：

function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

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

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
  });
}

在以上示例中，在构建标记时运用了 MarkerOptions 中的 map 属性将该标记安排在舆图上。或许，您也可以直接运用标记的 setMap() 要领将该标记增加到舆图上，如以下示例中所示：

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
});

// To add the marker to the map, call setMap();
marker.setMap(map);

移除标记

要从舆图上移除标记，请挪用 setMap() 要领并通报 null 作为自变量。

marker.setMap(null);

请注意，上述要领并不会删除该标记。它只是将该标记从舆图上移除。假如您是想删除该标记，则应当从舆图上移除它，然后将该标记自身设置为 null。

假如您愿望治理一组标记，则应当建立一个数组来保留这些标记。运用此数组，您就可以顺次对数组中的每一个标记挪用 setMap() 来移除这些标记。您也可以删除这些标记，只需先将其从舆图上移除，然后将数组的 length 设置为 0，这将移除这些标记的一切援用。

检察示例 (marker-remove.html)

也可以参考上一篇文章，谷歌舆图API 开辟 之 增加标记 实在跟官网的基本原理也是一样的。

以动画体式格局显现标记

您可以经由过程动画的体式格局显现标记，以便它们可以在种种差别的情况下展现出动态挪动的结果。要指定某个标记的动画显现体式格局，请运用该标记的 animation 属性，其范例为 google.maps.Animation。可支撑以下 Animation 值：

  • DROP 示意第一次将该标记安排在舆图上时，该标记应当从舆图顶部下落到其终究位置。一旦标记住手挪动，动画即住手，而且 animation 将还原为 null。在建立 Marker 时，通常会指定这类范例的动画。

  • BOUNCE 示意该标记应当在原地弹跳。弹跳标记将延续弹跳，直到其 animation 属性显式设置为 null。

您可以经由过程对 Marker 对象挪用 setAnimation() 来对现有标记启动动画。

var marker;

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

  marker = new google.maps.Marker({
    map: map,
    draggable: true,   //marker 设为 可拖动
    animation: google.maps.Animation.DROP, //动画属性设为DROP
    position: {lat: 59.327, lng: 18.067}
  });
  marker.addListener('click', toggleBounce); //监听marker点击时实行togglerBounce要领切换动画属性 
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

检察示例 (marker-animations.html)。

标记的图标

在最基本的情况下，图标可以简朴地示意一个要替代默许的 Google Maps 图钉图标的图象。要指定如许的图标，请将标记的 icon 属性设置为某个图象的 URL。Google Maps API 将自动调解图标大小。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151}
  });

  var image = 'images/beachflag.png';
  var beachMarker = new google.maps.Marker({
    position: {lat: -33.890, lng: 151.274},
    map: map,
    icon: image   //图标
  });
}

检察示例 (icon-simple.html)。

好了，谷歌增加标记的就整顿这么多，想深入研究的小伙伴可以第一行的官网检察下。
然后要最先本日的主要内容 怎样猎取当前点击的坐标以及都市街道地点，写到下一篇。

    原文作者：旅图灬
    原文地址: https://segmentfault.com/a/1190000006171960
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞