Скользящий маркер на карте Google дает ошибку Google не определен - PullRequest
Новая
       2

Скользящий маркер на карте Google дает ошибку Google не определен

0 голосов
/ 19 марта 2019

Я пытаюсь внедрить скользящий маркер в карту Google. Я пытаюсь создать какое-то фиктивное местоположение и пытаюсь использовать скользящий маркер, но это дает мне ошибку, Google не определен. Я использую обычные ссылки HTML и CDN для этого. Я рассмотрел некоторые примеры в Интернете, пытаясь это сделать. 

 <!DOCTYPE html>
    <html>
      <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
          /* Always set the map height explicitly to define the size of the div
           * element that contains the map. */
          #map {
            height: 100%;
          }
          /* Optional: Makes the sample page fill the window. */
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
        </style>
      </head>
      <body>
        <div id="map"></div>
        <script>

        var    cars = [{
                id:1,
                coords:{
                    lat:12.98643328,
                    lng:77.75361996,
                }
            },{
                id:2,
                coords:{
                    lat:12.97750789,
                    lng:77.75115929,
                }
            },{
                id:3,
                coords:{
                    lat:12.96529638,
                    lng:77.74909935,
                }
            },{
                id:4,
                coords:{
                    lat:12.95341885,
                    lng:77.74446449,
                }
            }]






          var map , marker;
          function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
              center: {lat: -34.397, lng: 150.644},
              zoom: 8
            });
          }
          var i = 0;
          setInterval(function(){ 
              if(i === 0){
                  addMarker(cars[i].coords);

              }else{
                  updateMarker(cars[i].coords);
                  if (i === 4){
                    i = 1;
                  }
                }
           }, 3000);

           function addMarker(coords){
              i++;

                let latlong1 = new google.maps.LatLng(coords.lat,coords.lng);
                marker = new SlidingMarker({
                map : this.map,
                position: latlong1,

                });

                marker.setDuration(1000);
                marker.setEasing('linear');
           }

           function updateMarker(coords){

            let latlong = new google.maps.LatLng(coords.lat,coords.lng);
            //this.map.setCenter(latlong);
            marker.setPosition(latlong);
            i++;
          }

        </script>


            <script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
            <!-- <script  src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> -->
            <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDv-h2II7DbFQkpL9pDxNRq3GWXqS5Epts&callback=initMap"
            async defer></script>
            <script  src="https://cdnjs.cloudflare.com/ajax/libs/marker-animate-unobtrusive/0.2.8/vendor/markerAnimate.js"></script>
            <script  src="https://cdnjs.cloudflare.com/ajax/libs/marker-animate-unobtrusive/0.2.8/SlidingMarker.min.js"></script>

        </body>
    </html>

Я получаю эту ошибку 

markerAnimate.js:10 Uncaught ReferenceError: google is not defined
    at markerAnimate.js:10
(anonymous) @ markerAnimate.js:10
SlidingMarker.js:42 Uncaught ReferenceError: google is not defined
    at SlidingMarker.js:42
    at SlidingMarker.js:13
    at SlidingMarker.js:13
(anonymous) @ SlidingMarker.js:42
(anonymous) @ SlidingMarker.js:13
(anonymous) @ SlidingMarker.js:13
liveloc.html:80 Uncaught ReferenceError: SlidingMarker is not defined
    at addMarker (liveloc.html:80)
    at liveloc.html:66

Ответы [ 2 ]

1 голос
/ 19 марта 2019

Ваш код загружает API Карт Google Javascript v3 асинхронно. Но библиотеки MarkerAnimate и SlidingMarker зависят от этого.

Один из вариантов - изменить: 

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap"
        async defer></script>

Кому: 

<script src="https://maps.googleapis.com/maps/api/js?YOUR_KEY&callback=initMap"></script>

(убрать «асинхронный отсроченный»).

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

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<script>
  var cars = [{
    id: 1,
    coords: {
      lat: 12.98643328,
      lng: 77.75361996,
    }
  }, {
    id: 2,
    coords: {
      lat: 12.97750789,
      lng: 77.75115929,
    }
  }, {
    id: 3,
    coords: {
      lat: 12.96529638,
      lng: 77.74909935,
    }
  }, {
    id: 4,
    coords: {
      lat: 12.95341885,
      lng: 77.74446449,
    }
  }]
  var map, marker;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: -34.397,
        lng: 150.644
      },
      zoom: 8
    });
  }
  var i = 0;
  setInterval(function() {
    if (i === 0) {
      addMarker(cars[i].coords);

    } else {
      updateMarker(cars[i].coords);
      if (i === 4) {
        i = 1;
      }
    }
  }, 3000);

  function addMarker(coords) {
    i++;

    let latlong1 = new google.maps.LatLng(coords.lat, coords.lng);
    marker = new SlidingMarker({
      map: this.map,
      position: latlong1,

    });

    marker.setDuration(1000);
    marker.setEasing('linear');
  }

  function updateMarker(coords) {

    let latlong = new google.maps.LatLng(coords.lat, coords.lng);
    //this.map.setCenter(latlong);
    marker.setPosition(latlong);
    map.setCenter(latlong);
    i++;
  }
</script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDv-h2II7DbFQkpL9pDxNRq3GWXqS5Epts&callback=initMap"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marker-animate-unobtrusive/0.2.8/vendor/markerAnimate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marker-animate-unobtrusive/0.2.8/SlidingMarker.min.js"></script>
0 голосов
/ 19 марта 2019

Функция addMarker выполняется перед загрузкой скрипта карты Google. Пожалуйста, поместите setInterval в функцию initMap после инициализации карты.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...