-2

我有以下代码：

<form action="suche/" method="get"> 
<input autocomplete="false" name="hidden" type="text" style="display:none;">
<input type="hidden" id="lng"  value="" name="lng">
<input type="hidden" id="lat"  value="" name="lat">
<input type="text" id="city" name="city" autocomplete="off" class="form-control header  city" placeholder="Wo suchst du?" required>
<button class="btn btn-primary btn-block header" type="submit">Suchen</button>
</form>

<div id="map" style="width:100%;height:400px"></div>

<script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 12,
  center: {
  lat: 52.545157,
  lng: 11.083294900000055
 }
});
var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
  position: location
});
google.maps.event.addListener(marker, 'click', function(evt) {
  infoWin.setContent(location.info);
  infoWin.open(map, marker);
})
return marker;
});

var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
var locations = [{
lat: 52.5504,
lng: 11.08523,
info: 'xxx'
}];

google.maps.event.addDomListener(window, 'load', initMap);
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=[MYKEY]&amp;libraries=places"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=[MYKEY]&amp;&callback=initMap"></script> 
<script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

<script src="jquery.geocomplete.js"></script>
<script>
    $(".city").geocomplete({
      details: "form",
      //types: ["geocode"],
      language: 'de-DE',
    types: ['geocode'],
      componentRestrictions: {country: "de"}
    });

    $("#find").click(function(){
      $(".city").trigger("geocode");
    });   

</script>

问题：控制台输出：您在此页面上多次包含 Google Maps JavaScript API。这可能会导致意外错误

有人知道如何从谷歌地图 api 中只包含一个 js 库吗？

我对我的表单使用自动完成（地理编码数据（lng，lat））在其他div中我使用Markerclusterer，它不适用于自动完成（这是正确的）。

4

1 回答 1

0

您应该能够使用任一选项（带有async defer回调或不带回调）。最简单的解决方案是删除async defer和回调，但这意味着页面需要更长的时间来加载。

要做到这一点：

<script src="https://maps.googleapis.com/maps/api/js?key=[APIKEY]&libraries=places"></script>

您不需要&callback=initMap或async defer，行：google.maps.event.addDomListener(window, 'load', initMap);初始化地图。

概念证明小提琴

结果地图的屏幕截图

代码片段：

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places"></script>

<form action="suche/" method="get">
  <input autocomplete="false" name="hidden" type="text" style="display:none;">
  <input type="hidden" id="lng" value="" name="lng">
  <input type="hidden" id="lat" value="" name="lat">
  <input type="text" id="city" name="city" autocomplete="off" class="form-control header  city" placeholder="Wo suchst du?" required>
  <button class="btn btn-primary btn-block header" type="submit">Suchen</button>
</form>

<div id="map" style="width:100%;height:400px"></div>

<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: {
        lat: 52.545157,
        lng: 11.083294900000055
      }
    });
    var infoWin = new google.maps.InfoWindow();
    var markers = locations.map(function(location, i) {
      var marker = new google.maps.Marker({
        position: location
      });
      google.maps.event.addListener(marker, 'click', function(evt) {
        infoWin.setContent(location.info);
        infoWin.open(map, marker);
      })
      return marker;
    });

    var markerCluster = new MarkerClusterer(map, markers, {
      imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
    });
  }
  var locations = [{
    lat: 52.5504,
    lng: 11.08523,
    info: 'xxx'
  }];

  google.maps.event.addDomListener(window, 'load', initMap);
</script>
<script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.js"></script>
<script>
  $(".city").geocomplete({
    details: "form",
    //types: ["geocode"],
    language: 'de-DE',
    types: ['geocode'],
    componentRestrictions: {
      country: "de"
    }
  });

  $("#find").click(function() {
    $(".city").trigger("geocode");
  });
</script>

于 2019-02-13T02:01:05.897 回答