Question

我是一个为谷歌地图写了一些JS代码并且面临一些问题的菜鸟。

我想要实现的目标： -

当页面加载时，它会选择位置。然后，当我点击地图时，它会丢弃一个标记。
当我点击其他地方时，它会立即将SAME标记放在其他位置。
获取该地点的合作伙伴并将其显示在文本框中。
相反，我在地址栏中添加了一个位置，如果它存在，它会将标记丢弃到该位置并获得合作。

我面临的问题：

每次点击地图时地图都会删除一个新标记。
没有获得该位置的合作。
不从地址搜索。

我的局限：

菜鸟
无法找出要从地址栏搜索的代码。

请指出正确的方向。

这是代码

＆＃13;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 40.731, lng: -73.997}
  });
  google.maps.event.addListener(map, 'click', function(e) {
    placeMarker(e.latLng, map);
  });
  function placeMarker(latlng, map) {
    var marker = new google.maps.Marker({
      position: latlng,
      map: map
    });  
    map.panTo(latlng);
  }
  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow;
  document.getElementById('submit').addEventListener('click', function() {
    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
        });
        infowindow.setContent(results[1].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}

＆＃13;

html, body, #map {
  width:100%;
  height:100%;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<div id="floating-panel">
  <input id="latlng" type="text" value="40.714224,-73.961452">
  <input id="submit" type="button" value="Reverse Geocode">
</div>
<div id="map"></div>

＆＃13;

Answer 1

在initMap函数中创建标记，然后省略其map属性，您可以在单击事件处理程序中添加该属性。然后每次只更新其位置。 e.g。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?"></script>
    <script>
        function initialize() {
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 8,
                center: {lat: 40.731, lng: -73.997}
            });

            var marker = new google.maps.Marker({
                position: {lat: 0, lng: 0}
            });  

            google.maps.event.addListener(map, 'click', function(e) {
                placeMarker(e.latLng, map, marker);
            });
        }

        function placeMarker(latlng, map, marker) {
            marker.setPosition(latlng);
            marker.setMap(map);
            map.panTo(latlng);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>    
    <div id="map"></div>
  </body>
</html>

删除单击的标记并显示坐标和地址

1 个答案: