JQuery Geocomplete и Markerclusterer в одном JS API включают - PullRequest
Новая
       13

JQuery Geocomplete и Markerclusterer в одном JS API включают

0 голосов
/ 13 февраля 2019

У меня есть следующий код: 

<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>

ПРОБЛЕМА: Вывод на консоль: Вы включили JavaScript API Карт Google на этой странице несколько раз.Это может привести к неожиданным ошибкам

Кто-нибудь знает, как включить только одну библиотеку js из API карт Google?

Я использую автозаполнение для моей формы (данные геокодирования (lng, lat)). В другихdiv Я использую Markerclusterer, который не работает с автозаполнением (это так).

1 Ответ

0 голосов
/ 13 февраля 2019

Вы должны иметь возможность использовать любой вариант (с 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); инициализирует карту.

подтверждение концепции скрипта

screenshot of resulting map

фрагмент кода: 

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>
...