PROSAGA码农传奇-IDataAPI-Google Maps JS API v3

0# Coolkid | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    这是最简单的我可以减少它：
  </p>
   <pre>
    <code>
      <!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      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
      });

google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

</code>
  </pre>
  <P>
    截图：
  </p>
  <P>
    <img src =“https://i.imgur.com/mM82YXg.png”alt =“Google Maps Multiple Markers”/>
  </p>
  <P>
    将回调参数传递给时，会发生一些关闭魔法
     <code>
      addListener
    </code>
     方法。如果您不熟悉闭包的工作方式，这可能是一个非常棘手的主题。如果是这样的话，我建议您查看以下Mozilla文章以获得简要介绍：
  </p>
  <UL>
    <LI>
      <a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Closures" rel="noreferrer">
        Mozilla开发中心：使用闭包
      </A>
    </LI>
  </UL>
</DIV>

1# 张三岁 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    来自
    <a href="https://stackoverflow.com/a/3059129/1071884">
      Daniel Vassallo的回答
    </A>
    ，这是一个以更简单的方式处理闭包问题的版本。
  </p>
  <P>
    因为所有标记都有个体
    <EM>
      信息窗口
    </EM>
     并且由于JavaScript不关心您是否向对象添加额外属性，因此您只需添加一个
    <EM>
      信息窗口
    </EM>
     到了
    <EM>
      标记的
    </EM>
     属性然后调用
     <code>
      .open()
    </code>
     在...上
    <EM>
      信息窗口
    </EM>
     从它自己！
  </p>
  <P>
    的<strong>
      编辑：
    </强>
     有足够的数据，页面加载可能会花费很多时间，所以而不是构建
    <EM>
      信息窗口
    </EM>
     使用标记，施工应仅在需要时进行。注意用于构造的任何数据
    <EM>
      信息窗口
    </EM>
     必须附加到
    <EM>
      标记
    </EM>
     作为财产（
     <code>
      data
    </code>
    ）。另请注意，在第一次单击事件后，
     <code>
      infoWindow
    </code>
     将作为其标记的属性保留，因此浏览器不需要不断重建。
  </p>
   <pre>
    <code>
      var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

var map = new google.maps.Map(document.getElementById('map'), {
  center: new google.maps.LatLng(-33.92, 151.25)
});

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,
    data: {
      name: locations[i][0]
    }
  });
  marker.addListener('click', function() {
    if(!this.infoWindow) {
      this.infoWindow = new google.maps.InfoWindow({
        content: this.data.name;
      });
    }
    this.infoWindow.open(map,this);
  })
}

</code>
  </pre>
</DIV>

2# afs-loliaholic | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    异步版本：
  </p>
   <pre>
    <code>
      <script type="text/javascript">
  function initialize() {
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      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
      });

google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
      'callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;
  </script>

</code>
  </pre>
</DIV>

3# v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    的<strong>
      资源
      <a href =“http://www.freakyjolly.com/embed-google-maps-with-multiple-markers-and-infowindows-info-popups-open-on-click-or-mouse-hover/”rel = “nofollow noreferrer”>
        链接
      </A>
    </强>
  </p>
  <P>
    的<strong>
      演示
      <a href="https://www.freakyjolly.com/demo/Google/EmbedGoogleMap/" rel="nofollow noreferrer">
        链接
      </A>
    </强>
  </p>
  <P>
    的<strong>
      完整的HTML代码
    </强>
  </p>
  <UL>
    <LI>
      在Click或Hover上显示InfoWindow。
    </LI>
    <LI>
      只显示一个InfoWindow
    </LI>
  </UL>
  <P>
    <a href="https://i.stack.imgur.com/V8j8v.jpg" rel="nofollow noreferrer">
      <img src =“https://i.stack.imgur.com/V8j8v.jpg”alt =“在此处输入图片说明”/>
    </A>
  </p>
   <pre>
    <code>
          <!DOCTYPE html>
    <html>

<head>
        <style>
            /*  <span class="metadata-marker" style="display: none;" data-region_tag="css"></span>       Set the size of the div element that contains the map */
            #map {
                height: 400px;
                /* The height is 400 pixels */
                width: 100%;
                /* The width is the width of the web page */
            }
        </style>
        <script>
            var map;
            var InforObj = [];
            var centerCords = {
                lat: -25.344,
                lng: 131.036
            };
            var markersOnMap = [{
                    placeName: "Australia (Uluru)",
                    LatLng: [{
                        lat: -25.344,
                        lng: 131.036
                    }]
                },
                {
                    placeName: "Australia (Melbourne)",
                    LatLng: [{
                        lat: -37.852086,
                        lng: 504.985963
                    }]
                },
                {
                    placeName: "Australia (Canberra)",
                    LatLng: [{
                        lat: -35.299085,
                        lng: 509.109615
                    }]
                },
                {
                    placeName: "Australia (Gold Coast)",
                    LatLng: [{
                        lat: -28.013044,
                        lng: 513.425586
                    }]
                },
                {
                    placeName: "Australia (Perth)",
                    LatLng: [{
                        lat: -31.951994,
                        lng: 475.858081
                    }]
                }
            ];

window.onload = function () {
                initMap();
            };

function addMarkerInfo() {
                for (var i = 0; i < markersOnMap.length; i++) {
                    var contentString = '<div id="content"><h1>' + markersOnMap[i].placeName +
                        '</h1><p>Lorem ipsum dolor sit amet, vix mutat posse suscipit id, vel ea tantas omittam detraxit.</p></div>';

const marker = new google.maps.Marker({
                        position: markersOnMap[i].LatLng[0],
                        map: map
                    });

const infowindow = new google.maps.InfoWindow({
                        content: contentString,
                        maxWidth: 200
                    });

marker.addListener('click', function () {
                        closeOtherInfo();
                        infowindow.open(marker.get('map'), marker);
                        InforObj[0] = infowindow;
                    });
                    // marker.addListener('mouseover', function () {
                    //     closeOtherInfo();
                    //     infowindow.open(marker.get('map'), marker);
                    //     InforObj[0] = infowindow;
                    // });
                    // marker.addListener('mouseout', function () {
                    //     closeOtherInfo();
                    //     infowindow.close();
                    //     InforObj[0] = infowindow;
                    // });
                }
            }

function closeOtherInfo() {
                if (InforObj.length > 0) {
                    /* detach the info-window from the marker ... undocumented in the API docs */
                    InforObj[0].set("marker", null);
                    /* and close it */
                    InforObj[0].close();
                    /* blank the array */
                    InforObj.length = 0;
                }
            }

function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4,
                    center: centerCords
                });
                addMarkerInfo();
            }
        </script>
    </head>

<body>
        <h3>My Google Maps Demo</h3>
        
        <div id="map"></div>

</body>

</html>

</code>
  </pre>
</DIV>

Google Maps JS API v3 - 简单的多标记示例