如何在Web应用程序中旋转Google地图 [英] how to rotate a google map in a web application

查看：104
本文介绍了如何在Web应用程序中旋转Google地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个使用谷歌地图API开发的Web应用程序，我想旋转图形，如第二张图片所示，我试着从这个中心的谷歌API的45度旋转的示例：{lat：1.349992，lng：103.985374}，值没有标题这个位置意味着什么，
当我整合示例应用程序没有显示在浏览器原始地图之前积分旋转



需要的输出是（它需要直接显示）

代码，我已经实现了功能是如下所示 

 <！DOCTYPE html> 
< html> 
< head lang =en> 
< style> 
 html，body {
 
 height：100％; 
 
宽度：100％; 
 
 margin：0px; 
 
填充：0px 
 
} 
 
 #map {
 
 height：100％; 
 
} 
 
＃浮动面板{
 
位置：绝对; 
 
 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）; 
 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）; 
 
函数rotate90（）{
 var heading = map.getHeading（）|| 0; 
 map.setHeading（heading + 90）; 
} 
 
函数autoRotate（）{
 window.setInterval（rotate90，3000）; 
 
} 
 
 
 //循环和绘制路径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）; 
} 
} 
} 
 
函数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，地图
 } 
 poly = new google.maps.Polyline（polyOptions）; 
 poly.setMap（map）; 
 
} 
}）; 
} 
< / script> 
< / head> 
< body> 
< div id =浮动面板> 
< input type =buttonvalue =Auto Rotateonclick =autoRotate（）;>< / div> 
< div id =dvMap>< / div> 
< / body> 
< / html>

请指点我错的地方

解决方案

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



这个问题的循环代码： jquery动画旋转div

概念证明小提琴



代码片段：



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，蓝色，黄色， se]; var map; var degree = 0; function autoRotate（）{var $ elie = $（＃dvMap）;度=度+ 65;旋转（度）;函数rotate（度）{$ elie.css（{WebkitTransform：'rotate（'+ degree +'deg）'}）; $ elie.css（{'-moz-transform'：'rotate（'+ degree +'deg）'}）; / * timer = setTimeout（function（）{rotate（++ degree）;}，5）; * / for（var i = 0; i

html，body，＃dvMap {height：600px;宽度：600px; 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><script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/ jquery.min.js>< / script>< div id =dvMap>< / div>


i have a web application developed using google maps api i want to rotate the graph as shown in the second picture i tried the sample of 45 degree rotation from google api for this center: {lat:1.349992, lng: 103.985374}, value there is no titl for this location means what, And when i integrate the sample application not is displayed in the browser original map before integrating rotation

needed output is(it need to be displayed straight basically) code where i have implemented the functionalities is shown below

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

please point me where i am going wrong

解决方案

You can rotate the whole map div to make the roads horizontal, and rotate the markers to make them straight again fairly simply. Making the infowindow work correctly will take some work.

rotation code from this question: jquery animate a rotating div

proof of concept fiddle

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

这篇关于如何在Web应用程序中旋转Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆