尝试使用 Google Maps API 旋转地图时出现问题答案

【问题标题】：Problem trying to rotate a map with Google Maps API尝试使用 Google Maps API 旋转地图时出现问题
【发布时间】：2022-01-14 05:12:40
【问题描述】：

我使用 Google Maps API 编写了一个 HTML，当我在 Flight Simulator 中着陆时显示飞机的着陆点。

我要实现的是根据飞机的航线旋转地图。

下面的 HTML 最初似乎运行良好，但一秒钟后地图又回到北方。

我该如何解决这个问题？我做错了什么。

感谢和亲切的问候

乔

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" >
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXX&sensor=true&libraries=weather">
</script>
<script type="text/javascript">
google.maps.visualRefresh = true;
function initialize() {
var image = {
url: "pubicons3/89.png", // url
scaledSize: new google.maps.Size(80, 80), // scaled size
// origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(40, 40) // anchor
};
var myctr = new google.maps.LatLng(45.8278829742545,13.4600065786118);
var mapOptions = {
zoom:18,
disableDefaultUI: true,
mapTypeControl: false,
scaleControl: true,
center: myctr,
mapTypeId: google.maps.MapTypeId.SATELLITE,
heading:89,
tilt:15
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var airloc = {lat:45.8278829742545, lng:13.4600065786118};
var marker = new google.maps.Marker({
position:airloc,
map:map,
icon:image,
ZIndex:4
});
// flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>

【问题讨论】：

标签： google-maps rotation heading

【解决方案1】：

您可以使用 Maps JavaScript API WebGL 功能的Tilt and Rotation，通过在初始化地图时包含标题和倾斜属性以及调用 setTilt 和 setHeading 方法，您可以在矢量地图上设置倾斜和旋转（航向）在地图上。请注意，为了使用新的 WebGL 功能，您需要一个使用矢量地图的地图 ID。您还需要更新您的 API 引导请求。请参阅this。

这是一个sample code，它显示了您想要实现的目标和下面的代码 sn-ps：

function initMap() {
  var airloc = {
    lat: 45.8278829742545,
    lng: 13.4600065786118
  };
  const map = new google.maps.Map(document.getElementById("map"), {
    center: airloc,
    zoom: 16,
    heading: 89,
    tilt: 15,
    mapId: "90f87356969d889c",
    mapTypeId: 'satellite',
  });
  var image = {
    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png", // url
    scaledSize: new google.maps.Size(80, 80), // scaled size
    // origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(40, 40) // anchor
  };
  var marker = new google.maps.Marker({
    position: airloc,
    map: map,
    icon: image,
    ZIndex: 4
  });
}

【讨论】：