一个js API中的jquery geocomplete和markerclusterer包括

Question

我有以下代码：

<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。这可能会导致意外错误

有人知道如何仅包含Google Maps API中的一个js库吗？

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

Answer 1

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

要这样做：

• 按照documentation中的说明加载API：

<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);会初始化地图。

proof of concept fiddle

代码段：

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>