资讯专栏INFORMATION COLUMN

谷歌地图 API 开发之添加标记(解析以及补充)

崔晓明 / 2820人阅读

摘要:今天又看了下官网,发现官网上有地图标记的详细说明。请注意,上述方法并不会删除该标记。查看示例也可以参考上一篇文章,谷歌地图开发之添加标记其实跟官网的基本原理也是一样的。表示该标记应该在原地弹跳。将自动调整图标大小。

今天又看了下官网,发现官网上有地图标记的详细说明。当时居然眼瞎看不见,还琢磨了好久...#$%^&,一定是项目太急,没看到(^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://www.ucloud.cn/yun/90869.html

相关文章

  • 谷歌地图 API 开发添加标记

    摘要:创建地图之后,基本上都需要标记位置的,就是那个圆点。然后参考谷歌的,找了许久,网址代码如下创建对象地图居中到当前坐标这段运行效果,就是你点击地图就会添加一个标记。 创建地图之后,基本上都需要标记位置的,就是那个圆点。然后参考谷歌的API,找了许久,网址:https://developers.google.com... 代码如下: Accessing arg...

    huaixiaoz 评论0 收藏0
  • 谷歌地图 API 开发信息窗口

    摘要:信息窗口具有一个内容区域和一个锥形柄。添加信息窗口构造函数采用了对象字面量,后者为显示信息窗口指定了一组初始参数。其中包含此信息窗口锚定位置的。在标记上打开信息窗口将自动更新。用于指定信息窗口的最大宽度以像素为单位。 信息窗口 简介 InfoWindow 在地图上方给定位置的弹出窗口中显示内容(通常为文本或图像)。信息窗口具有一个内容区域和一个锥形柄。柄顶部与地图上的某指定位置相连。 ...

    princekin 评论0 收藏0
  • 谷歌地图 API 开发信息窗口

    摘要:信息窗口具有一个内容区域和一个锥形柄。添加信息窗口构造函数采用了对象字面量,后者为显示信息窗口指定了一组初始参数。其中包含此信息窗口锚定位置的。在标记上打开信息窗口将自动更新。用于指定信息窗口的最大宽度以像素为单位。 信息窗口 简介 InfoWindow 在地图上方给定位置的弹出窗口中显示内容(通常为文本或图像)。信息窗口具有一个内容区域和一个锥形柄。柄顶部与地图上的某指定位置相连。 ...

    rubyshen 评论0 收藏0
  • 学习设计模式前需要知道的事情

    摘要:为什么要学习设计模式做事情之前问个为什么总是好的。设计模式的使用方法关于使用方式,像我这种初学者最容易犯的错误就是生搬硬套,但是模仿本来也是学习的一个过程,最重要的事情是在模仿中要学会思考。 为什么要学习设计模式? 做事情之前问个为什么总是好的。关于设计模式的好坏,我在知乎上也看过一些讨论,有知友对其提出过一些疑问,里面有一些关于设计模式的观点: 设计模式有何不妥,所谓的荼毒体现在哪...

    kviccn 评论0 收藏0
  • 谷歌地图 API 开发新建地图

    摘要:最近项目用到谷歌地图,但是看谷歌文档,对于国人来说,还是比较吃力的,网上找资料也并没有太多的资料,所以就想分享给大家。显示了整个地球地图的完全缩放。 最近项目用到谷歌地图,但是看谷歌api文档,对于国人来说,还是比较吃力的,网上找资料也并没有太多的资料,所以就想分享给大家。但是因为本人太懒了,每次研究技术完事时间一久就忘了,更别提分享了,在朋友的鼓励支持之下,重新开始写博客,共享给大家...

    Winer 评论0 收藏0

发表评论

0条评论

崔晓明

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<