谷歌地图Javascript与InfoWindows

Google Maps Javascript with InfoWindows

本文关键字：InfoWindows Javascript 谷歌地图      更新时间：2023-09-26

我有一个像下面这样的javascript文件，即init在联系我们页面。我添加了几乎所有我想要的东西，但无法弄清楚如何为每个标记设置工作信息窗口。事实上，我知道如何设置和使用infoWindow，但不知道把它放在这段代码的哪里。

var ContactUs = function () {
    return {
        //main function to initiate the module
        init: function () {
            var neighborhoods = [
              { lat: 41.02688344, lng: 28.97104517, icon: '../Content/blue_MarkerSS.png', content: "a" },
              { lat: 41.07992535, lng: 29.02025431, icon: '../Content/blue_MarkerL.png', content: "b" },
              { lat: 41.059097, lng: 28.983857, icon: '../Content/blue_MarkerB.png', content: "c" },
              { lat: 41.08476948, lng: 28.97748649, icon: '../Content/blue_MarkerK.png', content: "d" },
              { lat: 41.05635465, lng: 28.95114452, icon: '../Content/red_MarkerS.png', content: "e" }
            ];
            var markers = [];
            var map;
            map = new google.maps.Map(document.getElementById("map"), {
                zoom: 12,
                center: { lat: 41.052244, lng: 28.985637 }
            });
            function addMarkerWithTimeout(position, timeout, icon, content) {
                window.setTimeout(function () {
                    markers.push(new google.maps.Marker({
                        position: position,
                        map: map,
                        animation: google.maps.Animation.DROP,
                        icon: icon
                    }));
                }, timeout);
            }
            for (var i = 0; i < neighborhoods.length; i++) {
                addMarkerWithTimeout(neighborhoods[i], i * 300, neighborhoods[i].icon, neighborhoods[i].content);
            }
        }
    };
}();

更新:

我有一个像这样的工作脚本包含infoWindows。我想在第一个问题中添加addMarkerWithTimeout。考虑合并两个包含infoWindows和addMarkerWithTimeout的脚本。我的问题就是这个。

原来的addMarkerWithTimeout的例子是在这里(我不需要那个按钮)!

var ContactUs = function () {
    return {
        init: function () {
            var locations = [
              ['a', 41.02688344, 28.97104517, 4, './Content/blue_MarkerSS.png'],
              ['b', 41.07992535, 29.02025431, 5, '../Content/blue_MarkerSS.png'],
              ['c', 41.059097, 28.983857, 3, '../Content/blue_MarkerSS.png'],
              ['d', 41.08476948, 28.97748649, 2, '../Content/blue_MarkerK.png'],
              ['e', 41.05635465, 28.95114452, 1, '../Content/red_MarkerS.png']
            ];
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                center: new google.maps.LatLng(41.052244, 28.985637),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            var infowindow = new google.maps.InfoWindow();
            var marker, i;
            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,
                    icon: locations[i][4]
                });
                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }
        }
    };
}();
  • 保持引用你的标记。而不是:
markers.push(new google.maps.Marker({
                position: position,
                map: map,
                animation: google.maps.Animation.DROP,
                icon: icon
           }));

: 

var marker = new google.maps.Marker({
                    position: position,
                    map: map,
                    animation: google.maps.Animation.DROP,
                    icon: icon
                });
markers.push(marker);
  • 然后将点击监听器添加到标记(或者您可以将其添加到markers[markers.length-1]…):
google.maps.event.addListener(marker,'click', function(e) {
  infowindow.setContent(content);
  infowindow.open(map,marker);
});

概念验证

代码片段:

var ContactUs = function() {
  return {
    //main function to initiate the module
    init: function() {
      var markers = [];
      var map;
      var infowindow = new google.maps.InfoWindow();
      map = new google.maps.Map(document.getElementById("map"), {
        zoom: 12,
        center: {
          lat: 41.052244,
          lng: 28.985637
        }
      });
      function addMarkerWithTimeout(position, timeout, icon, content) {
        window.setTimeout(function() {
          var marker = new google.maps.Marker({
            position: position,
            map: map,
            animation: google.maps.Animation.DROP,
            icon: icon
          });
          google.maps.event.addListener(marker, 'click', function(e) {
            infowindow.setContent(content);
            infowindow.open(map, marker);
          });
          markers.push(marker);
        }, timeout);
      }
      var neighborhoods = [{
        lat: 41.02688344,
        lng: 28.97104517,
        icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png',
        content: "a"
      }, {
        lat: 41.07992535,
        lng: 29.02025431,
        icon: 'http://maps.google.com/mapfiles/ms/micons/green.png',
        content: "b"
      }, {
        lat: 41.059097,
        lng: 28.983857,
        icon: 'http://maps.google.com/mapfiles/ms/micons/yellow.png',
        content: "c"
      }, {
        lat: 41.08476948,
        lng: 28.97748649,
        icon: 'http://maps.google.com/mapfiles/ms/micons/orange.png',
        content: "d"
      }, {
        lat: 41.05635465,
        lng: 28.95114452,
        icon: 'http://maps.google.com/mapfiles/ms/micons/red.png',
        content: "e"
      }];
      for (var i = 0; i < neighborhoods.length; i++) {
        addMarkerWithTimeout(neighborhoods[i], i * 300, neighborhoods[i].icon, neighborhoods[i].content);
      }
    }
  };
}();
ContactUs.init();
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>

这方面的文档非常好:docs

根据文档，你所需要做的就是初始化信息窗口，然后添加一个事件处理程序，或者你想触发它并调用:

infowindow.open(map, marker);

您正在使用的IIFE将建议使用事件处理程序将是最好的。否则，您可以添加一个额外的闭包来触发open方法，并随时随地调用该方法。

(针对您的问题和未来的用户)

你可以参考这个与你的问题有关的非常好的网站(google maps v3):

的URL: http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/

我还建议访问一个流行的stackoverflow线程，它再次处理你的问题(如果你还没有闭包，你也可以更好地了解闭包)

URL:使用infowindows添加多个标记(Google Maps API)

有了这两个链接和官方谷歌地图网站在infowindows

的URL: https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

你应该没有任何问题来解决你的问题。

相关文章：