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

Posted 2023-02-23

【中文标题】一个js api中的jquery geocomplete和markerclusterer包括

【英文标题】：jquery geocomplete and markerclusterer in one js api include

【发布时间】：2019-02-13 00:20:54

【问题描述】：

我有以下代码：

<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，它不适用于自动完成（这是正确的）。

【问题讨论】：

"idea 如何只包含一个 js 库" 你的意思是不止一个？这在documentation（底部）中有所描述

现在我有两个，我只想要一个包含

第一个包含 js 代码如果是异步延迟则不运行，第二个 js 包含代码如果异步延迟关闭则不运行 -> 回调

【参考方案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

代码 sn-p：

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>