今天又看了下官网,发现官网上有地图标记的详细说明。当时居然眼瞎看不见,还琢磨了好久...#$%^&,一定是项目太急,没看到(^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,这将移除这些标记的所有引用。
也可以参考上一篇文章,谷歌地图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 //图标
});
}
好了,谷歌添加标记的就整理这么多,想深入研究的小伙伴可以第一行的官网查看下。
然后要开始今天的重要内容 如何获取当前点击的坐标以及城市街道地址,写到下一篇。