缩放时标记改变位置答案

【问题标题】：Marker changes postition when zooming缩放时标记改变位置
【发布时间】：2018-07-14 18:56:38
【问题描述】：

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

标记显示几乎正确的位置，但如果您缩放地图，标记位置会发生变化。

感谢您的帮助。

演示：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
    });


}

【问题讨论】：

标签： javascript google-maps-api-3 google-maps-markers

【解决方案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>

看到问题消失了，不是谷歌标记中的错误，而是代码，开始一一剥离，一旦我删除了div 样式，一切正常。

【讨论】：

我面临同样的问题，但在 C# 中的 Windows 窗体应用程序上。当我放大标记时，位置会改变。为什么会这样？你能指导我吗