谷歌地图-信息窗口弹出随机标记每3秒

Google map - infowindow pop-up on random marker every 3 seconds

本文关键字：随机 3秒 信息 信息窗 窗口 谷歌地图      更新时间：2023-09-26

问题在这里。

  • 我需要用多个标记制作一个谷歌地图。
  • 每个标记都有一个不同内容的信息窗口。当你打开网站后3秒信息窗口弹出一个随机标记。
  • 然后关闭，3秒后弹出信息窗口形成另一个随机标记，依此类推
  • 信息窗口也需要自动显示，而不是点击标记

我需要什么才能做到这一点?

很简单。首先，您需要设置具有多个标记的地图，将所有这些标记存储在数组中，然后对它们使用setInterval触发单击事件。

HTML: 

<div>
    <div id="map" style="width: 500px; height: 400px;"></div>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</div>

JS: 

//Define markers attribute
var locations = [
    [
        "New Mermaid",
    36.9079, -76.199,
    1,
        "Georgia Mason",
        "",
        "Norfolk Botanical Gardens, 6700 Azalea Garden Rd.",
        "coming soon"],
    [
        "1950 Fish Dish",
    36.87224, -76.29518,
    2,
        "Terry Cox-Joseph",
        "Rowena's",
        "758 W. 22nd Street in front of Rowena's",
        "found"],
    [
        "A Rising Community",
    36.95298, -76.25158,
    3,
        "Steven F. Morris",
        "Judy Boone Realty",
        "Norfolk City Library - Pretlow Branch, 9640 Granby St.",
        "found"],
    [
        "A School Of Fish",
    36.88909, -76.26055,
    4,
        "Steven F. Morris",
        "Sandfiddler Pawn Shop",
        "5429 Tidewater Dr.",
        "found"],
    [
        "Aubrica the Mermaid (nee: Aubry Alexis)",
    36.8618, -76.203,
    5,
        "Myke Irving/ Georgia Mason",
        "USAVE Auto Rental",
        "Virginia Auto Rental on Virginia Beach Blvd",
        "found"]
]
//Set up map.
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    // center: new google.maps.LatLng(-33.92, 151.25),
    center: new google.maps.LatLng(36.8857, -76.2599),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = [];
for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
    });
    markers.push(marker); // Store the markers in an array.
    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent(locations[i][0], locations[i][6]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}
var i = 0;
setInterval(function () {
    if (i == markers.length) i = 0;
    google.maps.event.trigger(markers[i], 'click'); // Trigger click on marker after 3s
    i++;
}, 3000);

Demo: http://jsfiddle.net/lotusgodkk/pGBZD/153///顺序顺序

Demo: http://jsfiddle.net/lotusgodkk/pGBZD/154///用于随机排序

相关文章：