&;谷歌没有定义&;在Chrome浏览器中调用谷歌地图api出错

"google is not defined" error calling google maps api in Chrome

本文关键字:调用 api 出错 浏览器 谷歌地图 谷歌 定义 Chrome      更新时间:2023-09-26

我开始学习谷歌地图API。该页面离线工作,但在Chrome服务器上显示"谷歌未定义"。当我使用Firefox时,没有错误。

这里是html:

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>

javascript:

    var initCenter;
    var map;
    var cityCircle;
    var centerLatLng;
    var boundsLatLng;
    var distanceBtw;
    var citymap;
    var lati,longi ;
    var path = window.location.pathname;
    var webCtx = path.substring(0, path.indexOf('/', 1));
    var pointImg= webCtx + '/front-end/ad/image/PointRed.png';
function initAutocomplete() {
   map = new google.maps.Map(document.getElementById('adMap'), {
   zoom: 10,
   zoomControl: true,
   mapTypeControl: false,
   scaleControl: true,
   streetViewControl: false,
   mapTypeId: google.maps.MapTypeId.ROADMAP
   });
   var input = document.getElementById('pac-input');
   var searchBox = new google.maps.places.SearchBox(input);
   map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
   map.addListener('bounds_changed', function() {
        searchBox.setBounds(map.getBounds());
    });
       map.addListener('click',function(e){
            marker.setMap(null),
            marker=null,
            marker = new google.maps.Marker({
            position: e.latLng,
            map: map,
            icon:pointImg,
            });
            cityCircle.setCenter(e.latLng);
            boundsLatLng=cityCircle.getBounds();
            map.fitBounds(boundsLatLng);
            }); 
     citymap = {
       chungyang: {
       population: 1000000
       }
     };
   for (var city in citymap) {
       cityCircle = new google.maps.Circle({
       strokeColor: '#F2A57E',
       strokeOpacity: 0.8,
       strokeWeight: 2,
       fillColor: '#F2A57E',
       fillOpacity: 0.35,
       map: map,
       center: citymap[city].center,
       radius: Math.sqrt(citymap[city].population) * adRange
     });
         cityCircle.addListener('click',function(e){
             marker.setMap(null),
             marker=null,
             marker = new google.maps.Marker({
             position: e.latLng,
             map: map,
             icon:pointImg,
             draggable: true,
             });
             cityCircle.setCenter(e.latLng);
             boundsLatLng=cityCircle.getBounds();
             map.fitBounds(boundsLatLng);
             })
          }
        searchBox.addListener('places_changed', function() {
        var places = searchBox.getPlaces();
           if (places.length == 0) {
             return;
           }
          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
               if (place.geometry.viewport) {
               // Only geocodes have viewport.
                   bounds.union(place.geometry.viewport);
               } else {
                   bounds.extend(place.geometry.location);
               }
          });
           map.fitBounds(bounds);
        }  //searchBox.addListener
   if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(succCallback,errCallback,{
             enableHighAccuracy:false,
             timeout:10000,
             maximumAge:0
         });
     } else {
         // alert('not support geolocation');
     }
 }
   function succCallback(e) {
   initCenter = new google.maps.LatLng(e.coords.latitude,e.coords.longitude);
     map.setCenter(initCenter);
         cityCircle.setCenter(initCenter);
         lati = e.coords.latitude;
         longi = e.coords.longitude;
                 marker = new google.maps.Marker({
                 map: map,
                 icon:pointImg,
                 position:initCenter
                 });

          $('#ad_center').val('(' + lati + ',' + longi+')');
          $('#ad_centerLati').val(lati);
          $('#ad_centerLongi').val(longi);
      }
     function errCallback(e){
       initCenter = new google.maps.LatLng(30.09108, 130.5598);
         map.setCenter(initCenter);
         cityCircle.setCenter(initCenter);
               marker = new google.maps.Marker({
               map: map,
               icon:pointImg,
               position:initCenter
               });
     }

根据这个线程,检查是否有可能导致这个问题的附加组件。

还指出:

在您的页面<script src="https://maps.googleapis.com/maps/api‌​/js" async defer></script>上包含gmap的新方法将导致问题,因为它的加载将被延迟,以免成为阻塞资源。这就有可能在初始化GMaps之前包含其他脚本。

试着用这个:

<script src="http://maps.googleapis.com/maps/api/js"></script> 

来源:https://github.com/googlemaps/v3-utility-library/blob/master/canvaslayer/examples/hello2d.html