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

今天又看了下官网，发现官网上有地图标记的详细说明。当时居然眼瞎看不见，还琢磨了好久...#$%^&，一定是项目太急，没看到(^o^)/~
地址：https://developers.google.com...

添加标记

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

以下字段特别重要，并且在构建标记时通常会进行设置：

position（必填）指定用于标识标记的初始位置的 LatLng。 map（可选）指定用来放置标记的
Map。如果您在构建标记时未指定地图，则标记会被创建，但不会附加到（或显示在）地图上。您以后可以通过调用标记的 setMap() 方法来添加标记。

以下示例将一个简单的标记添加到乌鲁鲁（位于澳大利亚的中心）的地图上：

var map = new google.maps.Map(document.getElementById('map'), {

zoom: 4,

center: myLatLng

});

var marker = new google.maps.Marker({

position: myLatLng,

map: map,

});

}" title="" data-original-title="复制">

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 marker = new google.maps.Marker({

position: myLatlng,

});

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

marker.setMap(map);

" title="" data-original-title="复制">

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() 来对现有标记启动动画。

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);

}

}" title="" data-original-title="复制">

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 将自动调整图标大小。

var image = 'images/beachflag.png';

var beachMarker = new google.maps.Marker({

position: {lat: -33.890, lng: 151.274},

map: map,

icon: image //图标

});

}" title="" data-original-title="复制">

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)。

好了，谷歌添加标记的就整理这么多，想深入研究的小伙伴可以第一行的官网查看下。
然后要开始今天的重要内容如何获取当前点击的坐标以及城市街道地址，写到下一篇。