Javascript 谷歌地图中的滑动标记出现错误谷歌未定义_Javascript_Google Maps

Javascript 谷歌地图中的滑动标记出现错误谷歌未定义

javascript google-maps

Javascript 谷歌地图中的滑动标记出现错误谷歌未定义,javascript,google-maps,Javascript,Google Maps,我试图在谷歌地图中实现滑动标记。我试图创建一些虚拟的位置，并试图使用滑动标记，但它给我错误谷歌没有定义。我使用的是普通的html和cdn链接。我已经通过了一些互联网上的例子，试图做到这一点 <!DOCTYPE html> <html> <head> <title>Simple Map</title> <meta name="viewport" content="initial-

我试图在谷歌地图中实现滑动标记。我试图创建一些虚拟的位置，并试图使用滑动标记，但它给我错误谷歌没有定义。我使用的是普通的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>

加载google地图脚本之前正在执行addMarker函数。初始化映射后，请在initMap函数中放入setInterval

您的代码正在异步加载Google Maps Javascript API v3。但是

MarkerAnimate

和

SlidingMarker

库依赖于它

一种选择是改变：

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


var cars=[{
id:1，
协调：{
纬度：12.98643328，
液化天然气：77.75361996，
}
}, {
id:2，
协调：{
拉脱维亚：12.97750789，
液化天然气：77.75115929，
}
}, {
id:3，
协调：{
纬度：12.96529638，
液化天然气：77.74909935，
}
}, {
id:4，
协调：{
纬度：12.95341885，
液化天然气：77.74446449，
}
}]
var图，标记；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：{
lat:-34.397，
液化天然气：150.644
},
缩放：8
});
}
var i=0；
setInterval（函数（）{
如果（i==0）{
addMarker（cars[i].coords）；
}否则{
更新标记器（cars[i].coords）；
如果（i==4）{
i=1；
}
}
}, 3000);
函数addMarker（coords）{
i++；
让latlong1=new google.maps.LatLng（coords.lat，coords.lng）；
标记=新的滑动标记({
map:this.map，
位置：latlong1，
});
标记。设定持续时间（1000）；
标记。设置（“线性”）；
}
函数更新标记器（coords）{
让latlong=new google.maps.LatLng（coords.lat，coords.lng）；
//此.map.setCenter（latlong）；
标记器设置位置（拉长）；
地图设置中心（拉特朗）；
i++；
}

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