将地址内容添加到多个谷歌地图标记

Question

I want to add the location address to the marker content.我想将位置地址添加到标记内容中。 I'm getting the address by the coordinates and this is working, but on the map will always display only the last address.我通过坐标获取地址，这是有效的，但在地图上将始终只显示最后一个地址。

Here is my example code:这是我的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 400px;
        }

        #map_canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="map">
    <div id="map_canvas" class="mapping"></div>
</div>
<script>

    function initMap() {
        var locations = [
            [-33.890542, 151.274856],
            [-33.923036, 151.259052],
        ];

        var styleArray = [
            {
                featureType: 'all',
                stylers: [
                    {saturation: -80}
                ]
            }, {
                featureType: 'road.arterial',
                elementType: 'geometry',
                stylers: [
                    {hue: '#00ffee'},
                    {saturation: 50}
                ]
            }, {
                featureType: 'poi.business',
                elementType: 'labels',
                stylers: [
                    {visibility: 'on'}
                ]
            }
        ];

        var image = {
            url: 'map_icon.png',
            size: new google.maps.Size(30, 45),
            origin: new google.maps.Point(0, 0),
            scaledSize: new google.maps.Size(25, 35),
        };

        var map = new google.maps.Map(document.getElementById('map'), {
            scrollwheel: false,
            zoom: 8,
            center: new google.maps.LatLng(-33.92, 151.25), // default map position
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: styleArray,
        });

        var infowindow = new google.maps.InfoWindow();
        var geocoder = new google.maps.Geocoder();
        var marker, i;
        var mapContent = '';

        for (i = 0; i < locations.length; i++) {

            var latLng = new google.maps.LatLng(locations[i][0], locations[i][1]);

            geocoder.geocode({
                        latLng: new google.maps.LatLng(locations[i][0], locations[i][1]),
                    },
                    function (responses) {
                        if (responses && responses.length > 0) {
                            mapContent = responses[0].formatted_address;
                        }
                    }
            );

            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][0], locations[i][1]),
                map: map,
                icon: image,
            });

            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infowindow.setContent(mapContent);

                    infowindow.open(map, marker);
                }
            })(marker, i));

        }
    }

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap&sensor=true"></script>
</body>
</html>

Answer 1

Read some docs about Using closures in event listeners :阅读一些关于在事件监听器中使用闭包的文档：

geocoder.geocode({
  latLng: new google.maps.LatLng(locations[i][0], locations[i][1]),
  },
  function (responses) {
      if (responses && responses.length > 0) {
          mapContent = responses[0].formatted_address;
          var  marker = new google.maps.Marker({
              position: responses[0].geometry.location,
              map: map,
              icon: image,
          });       
          addContent(map, marker, mapContent, infowindow);
       }
  }
);



function addContent(map, marker, mapContent, infowindow ){
      google.maps.event.addListener(marker, 'click', (function (marker) {
                return function () {
                    infowindow.setContent(mapContent);

                    infowindow.open(map, marker);
                }
            })(marker));
}

JS fiddle: http://jsfiddle.net/4mtyu/2029/ JS小提琴： http : //jsfiddle.net/4mtyu/2029/

将地址内容添加到多个谷歌地图标记

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-10-05 12:16:44

将地址内容添加到多个谷歌地图标记

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-10-05 12:16:44

解决方案1
0 已采纳 2016-10-05 12:16:44