Question

当用户从Google Maps Autocomplete API中选择自己的地址时，我正在尝试用标记显示Google Maps。

标记显示几乎正确的位置，但是如果缩放地图，则标记位置会更改。

谢谢您的帮助。

演示：https://tap-informatika.hr/testovi/googleMaps.html

代码：

HTML：

<div style="">
      <div id="locationField">
          <label for="">Enter address</label> <br>
          <input id="autocomplete" autofocus placeholder="Enter your address" type="text"></input>
      </div>
      <br><br>
      <h3>Result</h3>
      <div>
          <div>
              <label for="">City</label> <br>
              <input type="text" id="city">
          </div>
          <div>
              <label for="">Street</label> <br>
              <input type="text" id="street">
          </div>
      </div>

      <div id="map"></div>
  </div>

CSS：

body{
    width: 900px;
    margin: auto;
}
input{
    width: 100%;
    padding: 5px 10px;
    outline: 0;
    border-width: 0 0 2px;
    border-color: #33691E;
}
div{
    padding: 20px 5px;
}
#map {
    width: 800px;
    height: 400px;
    margin: auto;
}

Javascript：

var placeSearch, autocomplete;
  function initAutocomplete() {
    autocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
        {types: ['geocode']});
    autocomplete.addListener('place_changed', fillInAddress);
  }
  function fillInAddress() {
    var place = autocomplete.getPlace();         
    var address = '';

    console.log(place);

    for (var i = 0; i < place.address_components.length; i++){
        if(place.address_components[i]['types'][0] == 'route'){
            address = place.address_components[i]['long_name'];
        }
        if(place.address_components[i]['types'][0] == 'locality'){
            var address = place.address_components[i]['long_name'];
        }
    }
    for (var i = 0; i < place.address_components.length; i++){
        if(place.address_components[i]['types'][0] == "street_number"){
            address = address + ' ' + place.address_components[i]['long_name'];
        }
    }
    document.getElementById('street').value = address;
    document.getElementById('city').value = city;
    var marLoc = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng());

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 17,
        center: marLoc
    });

    var marker = new google.maps.Marker({
        position: marLoc,
        map: map
    });


}

Answer 1

您的风格与地图有冲突...

删除部分：

div{
    padding: 20px 5px;
}

缩放问题消失了

对此类情况进行故障排除/调试我建议您从演示中剥离一下内容，看看是什么引发了问题。
我首先对您的演示进行了大的整理，将其降至最低：

<!DOCTYPE html>
<html>
    <head>
        <style> #map { width: 800px; height: 400px} </style>
    </head>
    <body>
        <label for="">Enter address</label> <br>
        <input id="autocomplete" autofocus placeholder="Enter your address" type="text"></input>
        <div id="map"></div>
        <script>
            var autocomplete;
            function initAutocomplete() {
                autocomplete = new google.maps.places.Autocomplete(
                    (document.getElementById('autocomplete')),
                    {types: ['geocode']});
                autocomplete.addListener('place_changed', fillInAddress);
            }
            function fillInAddress() {
                var place = autocomplete.getPlace();
                var marLoc = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng());
                var map = new google.maps.Map(document.getElementById('map'), { zoom: 17, center: marLoc });
                var marker = new google.maps.Marker({ position: marLoc, map: map });
            }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDv6zFowPwykhVGM_n-VBYtwTkM61n_cvk&libraries=places&callback=initAutocomplete"
        async defer></script>
    </body>
</html>

看到问题消失了，那不是Google标记中的错误，然后是代码，一旦我删除了div样式，一切工作正常，就开始一步一步地剥离内容。

缩放时标记会改变位置

1 个答案: