如何在Web应用程序中旋转谷歌地图

时间：2015-11-17 01:08:24

标签： javascript google-maps google-maps-api-3 rotation

我有一个使用谷歌地图api开发的网络应用程序我想旋转图形，如第二张图片所示，我尝试从谷歌api为这个中心45度旋转的样本：{lat：1.349992，lng：103.985374}，值这个位置没有titl意味着什么， 当我整合示例应用程序时，在集成轮换enter image description here

之前，不会在浏览器原始地图中显示

需要的输出是（它需要直接显示）  enter image description here  我实现了功能的代码如下所示

   <!DOCTYPE html>
    <html>
    <head lang="en">
        <style>
            html, body {

                height: 100%;

                width: 100%;

                margin: 0px;

                padding: 0px

            }

            #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);
                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);

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

                function autoRotate() {
                    window.setInterval(rotate90, 3000);

                }


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

请指出我出错的地方

1 个答案:

答案 0 :(得分：0)

您可以旋转整个地图div以使道路水平，并旋转标记以使其相当简单。让infowindow正常工作需要一些工作。

来自此问题的轮换代码：jquery animate a rotating div

proof of concept fiddle

代码段 

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 gmarkers = [];
var colorVariable = ["green", "blue", "yellow", "rose"];
var map;
var degree = 0;

function autoRotate() {
  var $elie = $("#dvMap");
  degree = degree + 65;
  rotate(degree);

  function rotate(degree) {
    $elie.css({
      WebkitTransform: 'rotate(' + degree + 'deg)'
    });
    $elie.css({
      '-moz-transform': 'rotate(' + degree + 'deg)'
    });
    /* timer = setTimeout(function() {
        rotate(++degree);
    },5); */
    for (var i = 0; i < gmarkers.length; i++) {
      gmarkers[i].setIcon(pinSymbol("red", -degree));
    }
  }
}
window.onload = function() {
  var mapOptions = {
    center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    draggable: false,
    defaultUI: false,
    tilt: 45,
    styles: [{
      featureType: "poi",
      //elementType: "labels",
      stylers: [{
        visibility: "off"
      }]
    }]
  };

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

  var infoWindow = new google.maps.InfoWindow();
  var lat_lng = [];
  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,
      icon: pinSymbol('red', 0), // "http://maps.google.com/mapfiles/ms/micons/red-dot.png",
      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);
    gmarkers.push(marker);
  }
  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);
    }
  }
  autoRotate();
}

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

    }
  });
}

function pinSymbol(color, rotation) {
  return {
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
    fillColor: color,
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 1,
    rotation: rotation,
    scale: 1
  };
}
html,
body,
#dvMap {
  height: 600px;
  width: 600px;
  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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dvMap"></div>

相关问题
最新问题