Autorotate不适用于使用Google地图API创建的谷歌地图 [英] Autorotate is not working for google map created using google maps api

问题描述

现在我已经创建了一张地图，为了使地图更加美观，我试图从 https://developers.google.com/maps/documentation/javascript/examples/aerial-rotation 我删除了时间间隔以避免自动旋转，但是当我集成在应用程序中我得到以下错误
ReferenceError：autoRotate未定义

 < ;! DOCTYPE html> 
< html> 
< head lang =en> 
< style> 
 html，body，#dvMap {
 height：100％; 
宽度：100％; 
 margin：0px; 
填充：0px 
} 
< / style> 
< style> 
 html，body {
 height：100％; 
保证金：0; 
 padding：0; 
} 
 #map {
 height：100％; 
} 
＃浮动面板{
 position：absolute; 
 top：10px;还剩
：25％; 
 z-index：5; 
 background-color：#fff; 
 padding：5px; 
 border：1px solid＃999; 
 text-align：center; 
 font-family：'Roboto'，'sans-serif'; 
 line-height：30px; 
 padding-left：10px; 
} 
 
< / style> 
< script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js>< / script> 
< script> 
 var marker = [{
title：'point4'，
lat：'1.355333'，
lng：'103.987305'，
描述：'uuu'
}，{
title：'point3'，
lat：'1.354432'，
lng：'103.987262'，
description：'zzz'
}，{
title：'point3'，
lat：'1.353199'，
lng：' 103.986908'，
description：'zzz'
} 
]; 
 var colorVariable = [green，blue，yellow，rose]; 
 window.onload = function（）{
 var mapOptions = {
 center：new google.maps.LatLng（markers [0] .lat，markers [0] .lng），
 zoom：10，
 mapTypeId：google.maps.MapTypeId.ROADMAP，
 heading：90，
 tilt：45 
}; 
 
 var map = new google.maps.Map（document.getElementById（dvMap），mapOptions）; 
函数rotate90（）{
 var heading = map.getHeading（）|| 0; 
 map.setHeading（heading + 90）; 
} 
 
函数autoRotate（）{
 //确定我们是否显示航拍图像。 
 if（map.getTilt（）！== 0）{
 window.setInterval（rotate90）; 
} 
} 
 var infoWindow = new google.maps.InfoWindow（）; 
 var lat_lng = new Array（）; 
 var latlngbounds = new google.maps.LatLngBounds（）; 
 for（i = 0; i< markers.length; i ++）{
 var data = markers [i] 
 var myLatlng = new google.maps.LatLng（data.lat，data .lng）; 
 lat_lng.push（myLatlng）; 
 var marker = new google.maps.Marker（{
 position：myLatlng，
 map：map，
 title：data.title 
}）; 
 latlngbounds.extend（marker.position）; 
（function（marker，data）{
 google.maps.event.addListener（marker，click，function（e）{
 infoWindow.setContent（data.description）; 
 infoWindow.open（map，marker）; 
}）; 
}）（marker，data）; 
} 
 map.setCenter（latlngbounds.getCenter（））; 
 map.fitBounds（latlngbounds）; 
 
 // ***********路由**************** // 
 
 
 
 //设置路径笔触颜色
 / * var poly = new google.maps.Polyline（{
 map：map，
 strokeColor：'red'
）}; * / 
 
 //循环和绘制路径MAP 
上的点之间的路线（var i = 0; i< lat_lng.length; i ++）{$ b $ （（i + 1） var src = lat_lng [i]; 
 var des = lat_lng [i + 1]; 
 getDirections（src，des，colorVariable [i]，map）; 
} 
} 
} 
 
函数getDirections（src，des，color，map）{
 //初始化方向服务
 var service = new google.maps.DirectionsService（）; 
 service.route（{
 origin：src，
 destination：des，
 travelMode：google.maps.DirectionsTravelMode.DRIVING 
}，function（result，status） {
 if（status == google.maps.DirectionsStatus.OK）{
 //初始化路径数组
 var path = []; 
 for（var i = 0; i< result.routes [0] .overview_path.length; i ++）{
 path.push（result.routes [0] .overview_path [i]）; 
} 
 // Set颜色，
 strokeOpacity：1.0，
 strokeWeight：8，
 path：路径，
 map：路径描边颜色
 var polyOptions = {
 strokeColor：color， map 
} 
 poly = new google.maps.Polyline（polyOptio纳秒）; 
 poly.setMap（map）; 
 
} 
}）; 
} 
< / script> 
< / head> 
< body> 
< div id =floating-panel>< input type =buttonvalue =Auto Rotateonclick =autoRotate（）;>< / div> 
< div id =dvMap>< / div> 
< / body> 
< / html> 
  

请检查我在使用autoRotate（）函数时犯了什么错误

解决方案 你得到的是javascript错误： Uncaught ReferenceError：autoRotate未定义，因为 autoRotate 函数对于 onload 函数是本地的。它需要在全局范围内用于HTML onclick函数。

这可以消除错误，但是在该位置空中贴图不可用。

>

代码段：

var markers = [{title ：'point4'，'lat'：'1.355333'，'lng'：'103.987305'，'description'：'uuu'}，{title：'point3'，'lat'：'1.354432'，'lng ：'103.987262'，'description'：'zzz'}，{title：'point3'，'lat'：'1.353199'，'lng'：'103.986908'，'description'：'zzz'}] var colorVariable = [green，blue，yellow，rose]; var map; function autoRotate（）{//确定我们是否显示航拍图像。 if（map.getTilt（）！== 0）{window.setInterval（rotate90）; }} window.onload = function（）{var mapOptions = {center：new google.maps.LatLng（markers [0] .lat，markers [0] .lng），zoom：10，mapTypeId：google.maps.MapTypeId。 ROADMAP，标题：90，tilt：45}; map = new google.maps.Map（document.getElementById（dvMap），mapOptions）;函数rotate90（）{var heading = map.getHeading（）|| 0; map.setHeading（heading + 90）; } var infoWindow = new google.maps.InfoWindow（）; var lat_lng = new Array（）; var latlngbounds = new google.maps.LatLngBounds（）;对于（i = 0; i< markers.length; i ++）{var data = markers [i] var myLatlng = new google.maps.LatLng（data.lat，data.lng）; lat_lng.push（myLatlng）; var marker = new google.maps.Marker（{position：myLatlng，map：map，title：data.title}）; latlngbounds.extend（marker.position）; （function（marker，data）{google.maps.event.addListener（marker，click，function（e）{infoWindow.setContent（data.description）; infoWindow.open（map，marker）;}）;}） （标记，数据）; } map.setCenter（latlngbounds.getCenter（））; map.fitBounds（的LatLngBounds）; // *********** ROUTING **************** // //设置路径描边颜色/ * var poly = new google.maps.Polyline （{map：map，strokeColor：'red'}）; * / //在MAP上的点之间循环和绘制路径路线（var i = 0; i< lat_lng.length; i ++）{if（（i + 1）< lat_lng.length）{var src = lat_lng [i]; var des = lat_lng [i + 1]; getDirections（src，des，colorVariable [i]，map）; }}} function getDirections（src，des，color，map）{//初始化定向服务var service = new google.maps.DirectionsService（）; service.route（{origin：src，destination：des，travelMode：google.maps.DirectionsTravelMode.DRIVING}，function（result，status）{if（status == google.maps.DirectionsStatus.OK）{//初始化路径Array var path = []; for（var i = 0; i< result.routes [0] .overview_path.length; i ++）{path.push（result.routes [0] .overview_path [i]）;} / /设置路径描边颜色var polyOptions = {strokeColor：color，strokeOpacity：1.0，strokeWeight：8，path：path，map：map} poly = new google.maps.Polyline（polyOptions）; poly.setMap（map）;} }};}

html，body，＃dvMap {height ：100％;宽度：100％; margin：0px; padding：0px}＃floating-panel {position：absolute;顶部：10px;左：25％; z-index：5; background-color：#fff;填充：5px;边界：1px固体＃999; text-align：center; font-family：'Roboto'，'sans-serif'; line-height：30px; padding-left：10px;}

< script src = https://maps.googleapis.com/maps/api/js\"></script><div id =浮动面板> < / div>< div id =dvMap>< / div>

I have create a map now the map has to rotated in order to make it more nicer to see i tried the example from https://developers.google.com/maps/documentation/javascript/examples/aerial-rotation where i removed time interval in order to avoid auto rotation but when i integrate in the application i am getting following error ReferenceError: autoRotate is not defined

<!DOCTYPE html>
<html>
<head lang="en">
    <style>
        html, body, #dvMap {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px
        }
    </style>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            height: 100%;
        }
        #floating-panel {
            position: absolute;
            top: 10px;
            left: 25%;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
            text-align: center;
            font-family: 'Roboto','sans-serif';
            line-height: 30px;
            padding-left: 10px;
        }

    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
    <script>
        var markers = [ {
            "title": 'point4',
            "lat": '1.355333',
            "lng": '103.987305',
            "description": 'uuu'
        }, {
            "title": 'point3',
            "lat": '1.354432',
            "lng": '103.987262',
            "description": 'zzz'
        }, {
            "title": 'point3',
            "lat": '1.353199',
            "lng": '103.986908',
            "description": 'zzz'
        }
        ];
        var colorVariable = ["green", "blue", "yellow", "rose"];
        window.onload = function () {
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                heading: 90,
                tilt: 45
            };

            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            function rotate90() {
                var heading = map.getHeading() || 0;
                map.setHeading(heading + 90);
            }

            function autoRotate() {
                // Determine if we're showing aerial imagery.
                if (map.getTilt() !== 0) {
                    window.setInterval(rotate90);
                }
            }
            var infoWindow = new google.maps.InfoWindow();
            var lat_lng = new Array();
            var latlngbounds = new google.maps.LatLngBounds();
            for (i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                lat_lng.push(myLatlng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title
                });
                latlngbounds.extend(marker.position);
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent(data.description);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
            }
            map.setCenter(latlngbounds.getCenter());
            map.fitBounds(latlngbounds);

            //***********ROUTING****************//



            //Set the Path Stroke Color
            /* var poly = new google.maps.Polyline({
             map: map,
             strokeColor: 'red'
             });*/

            //Loop and Draw Path Route between the Points on MAP
            for (var i = 0; i < lat_lng.length; i++) {
                if ((i + 1) < lat_lng.length) {
                    var src = lat_lng[i];
                    var des = lat_lng[i + 1];
                    getDirections(src, des, colorVariable[i], map);
                }
            }
        }

        function getDirections(src, des, color, map) {
            //Intialize the Direction Service
            var service = new google.maps.DirectionsService();
            service.route({
                origin: src,
                destination: des,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            }, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    //Intialize the Path Array
                    var path = [];
                    for (var i = 0; i < result.routes[0].overview_path.length; i++) {
                        path.push(result.routes[0].overview_path[i]);
                    }
                    //Set the Path Stroke Color
                    var polyOptions = {
                        strokeColor: color,
                        strokeOpacity: 1.0,
                        strokeWeight: 8,
                        path: path,
                        map: map
                    }
                    poly = new google.maps.Polyline(polyOptions);
                    poly.setMap(map);

                }
            });
        }
    </script>
</head>
<body>
<div id="floating-panel"><input type="button" value="Auto Rotate" onclick="autoRotate();"></div>
<div id="dvMap"></div>
</body>
</html>

please check what i made wrong in using autoRotate() function

解决方案

You are getting the javascript error: Uncaught ReferenceError: autoRotate is not defined because the autoRotate function is local to the onload function. It needs to be in the global scope to use it for a HTML onclick function.

This removes the error, but aerial tiles are not available at that location.

code snippet:

var markers = [{
  "title": 'point4',
  "lat": '1.355333',
  "lng": '103.987305',
  "description": 'uuu'
}, {
  "title": 'point3',
  "lat": '1.354432',
  "lng": '103.987262',
  "description": 'zzz'
}, {
  "title": 'point3',
  "lat": '1.353199',
  "lng": '103.986908',
  "description": 'zzz'
}];
var colorVariable = ["green", "blue", "yellow", "rose"];
var map;

function autoRotate() {
  // Determine if we're showing aerial imagery.
  if (map.getTilt() !== 0) {
    window.setInterval(rotate90);
  }
}
window.onload = function() {
  var mapOptions = {
    center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    heading: 90,
    tilt: 45
  };

  map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

  function rotate90() {
    var heading = map.getHeading() || 0;
    map.setHeading(heading + 90);
  }


  var infoWindow = new google.maps.InfoWindow();
  var lat_lng = new Array();
  var latlngbounds = new google.maps.LatLngBounds();
  for (i = 0; i < markers.length; i++) {
    var data = markers[i]
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
    lat_lng.push(myLatlng);
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: data.title
    });
    latlngbounds.extend(marker.position);
    (function(marker, data) {
      google.maps.event.addListener(marker, "click", function(e) {
        infoWindow.setContent(data.description);
        infoWindow.open(map, marker);
      });
    })(marker, data);
  }
  map.setCenter(latlngbounds.getCenter());
  map.fitBounds(latlngbounds);

  //***********ROUTING****************//



  //Set the Path Stroke Color
  /* var poly = new google.maps.Polyline({
           map: map,
           strokeColor: 'red'
           });*/

  //Loop and Draw Path Route between the Points on MAP
  for (var i = 0; i < lat_lng.length; i++) {
    if ((i + 1) < lat_lng.length) {
      var src = lat_lng[i];
      var des = lat_lng[i + 1];
      getDirections(src, des, colorVariable[i], map);
    }
  }
}

function getDirections(src, des, color, map) {
  //Intialize the Direction Service
  var service = new google.maps.DirectionsService();
  service.route({
    origin: src,
    destination: des,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  }, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      //Intialize the Path Array
      var path = [];
      for (var i = 0; i < result.routes[0].overview_path.length; i++) {
        path.push(result.routes[0].overview_path[i]);
      }
      //Set the Path Stroke Color
      var polyOptions = {
        strokeColor: color,
        strokeOpacity: 1.0,
        strokeWeight: 8,
        path: path,
        map: map
      }
      poly = new google.maps.Polyline(polyOptions);
      poly.setMap(map);

    }
  });
}

html,
body,
#dvMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="floating-panel">
  <input type="button" value="Auto Rotate" onclick="autoRotate();">
</div>
<div id="dvMap"></div>

这篇关于Autorotate不适用于使用Google地图API创建的谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！