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

How to populate a string array by clicking on the map in JavaScript?

本文关键字：填充 字符串 数组 地图 单击 何通过 JavaScript      更新时间：2023-09-26

我想在JavaScript中单击地图时收集信息。我用的是谷歌地图API。当我右键单击地图时，反向Geocode工具工作并获得点击点的信息。

我想做的是，当我点击地图时，我想在列表中看到这些Geocoded点的名称和一些属性。

这有可能吗?

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

这是点击并获取坐标;

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[]的数组，并试图将标记推入该数组，但我已经意识到我只是将对象发送到数组，而不是信息。我需要地理编码字符串，纬度和经度的每个点击点在这个markersinfo[]数组。

所以，而不是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' />

你可以在信息窗口中放置信息的同一区域收集信息。只需将您的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>
相关文章：