Question

我想在JavaScript中点击地图时收集信息。我使用的是Google Maps API。当我右键单击地图时，反向地理编码工具可以工作并获取点击的点的信息。

我想要做的是当我点击地图时，我希望在列表中看到这些地理编码点名称和一些属性。

甚至可能吗？

我在这里分享了一些代码;

这是点击并获取坐标;

google.maps.event.addListener(map, "rightclick", function (event) {
    var lat = event.latLng.lat();
    var lng = event.latLng.lng();
    alert(markersinfo);
    document.getElementById("latlng").value = lat.toFixed(5) + ', ' + lng.toFixed(5);
    geocodeLatLng(geocoder, map, infowindow);
});

这是地理编码;

function geocodeLatLng(geocoder, map, infowindow) {
    var input = document.getElementById('latlng').value;
    var latlngStr = input.split(',', 2);
    var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
    geocoder.geocode({'location': latlng}, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                //map.setZoom(11);
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });
                markersinfo.push(marker);
                infowindow.setContent(results[1].formatted_address);
                infowindow.open(map, marker);
            } else {
                window.alert('No results found');
            }
        } else {
            window.alert('Geocoder failed due to: ' + status);
        }
    });
}

我试图创建一个名为 markersinfo [] 的数组，并试图将标记推入此数组但我已经意识到我＆＃ 39;我只是将对象发送到数组而不是信息。我需要此 markersinfo [] 数组中每个点击点的地理编码字符串，纬度和经度。

Answer 1

因此，您希望在google.maps.Marker数组中保存lat，lng和address属性，而不是markersinfo个对象，对吗？如果是这样，下面的例子说明了如何完成它：

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: { lat: -28.643387, lng: 153.612224 },
        mapTypeControl: true
    });

    var infowindow = new google.maps.InfoWindow({
        content: ''
    });
    var geocoder = new google.maps.Geocoder();
    var markersinfo = [];

    google.maps.event.addListener(map, "rightclick", function (event) {
        geocodeLatLng(geocoder, event.latLng,
            function(results){
                if (results[0]) {

                    var marker = new google.maps.Marker({
                        position: event.latLng,
                        map: map
                    });
                    
                    infowindow.setContent(results[1].formatted_address);
                    infowindow.open(map, marker);

                    markersinfo.push({ 'address': results[0].formatted_address, 'lat': event.latLng.lat(), 'lng': event.latLng.lng() }); //save info

                    document.getElementById('output').innerHTML = JSON.stringify(markersinfo);
                } else {
                    window.alert('No results found');
                }
            },
            function (status) {
                window.alert('Geocoder failed due to: ' + status);
            });
    });

  
}


function geocodeLatLng(geocoder, latLng, success,error) {
    var location = { lat: latLng.lat(), lng: latLng.lng() };
    geocoder.geocode({ 'location': location }, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            success(results);
        } else {
            error(status);
        }
    });
}

  html, body {
            height: 220px;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 220px;
        }

 <div id="map"></div>
 <script src="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap" async defer>
 </script>
 <div id='output'/>

Answer 2

您可以在将信息放入信息窗口的同一区域收集信息。只需将lat / long等保存到字符串或数组中即可。您还不是很清楚应该显示哪些内容（lat / long除外），或者点击什么内容来触发显示。因此，需要调整此代码以满足您的特定需求。

示例：

var contentString = "";
if (results[1]) {
//... 
  var contentString += "Location: "  + latlng + "<br />";
}
//perhaps add trigger this on an event, depending on what you want.
$('#myDiv').append(contentString);

然后你的div保留内容：

<div id="myDiv"></div>

如何通过在JavaScript中单击地图来填充字符串数组？

2 个答案: