尝试使用 Google 地图 API 旋转 map 时出现问题

Question

我写了一个 HTML，它使用谷歌地图 API，显示了我在飞行模拟器中着陆时飞机的着陆点。

我要实现的是考虑飞机的航向旋转 map。

下面的 HTML 最初似乎运行良好，但在一秒钟内 map go 回到北方方向。

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

谢谢和亲切的问候

乔

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

Answer 1

You can use the Maps JavaScript API WebGL Features' Tilt and Rotation where you can set tilt and rotation (heading) on the vector map by including the heading and tilt properties when initializing the map, and by calling the setTilt and setHeading methods on the map . 请注意，为了使用新的 WebGL 功能，您需要一个使用向量 map 的 map ID。 您还需要更新您的 API 引导请求。 请看这个。

这是一个示例代码，显示了您想要实现的目标和下面的代码片段：

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

尝试使用 Google 地图 API 旋转 map 时出现问题

问题描述

1 个解决方案

解决方案1
0 2021-12-13 04:47:06

尝试使用 Google 地图 API 旋转 map 时出现问题

问题描述

1 个解决方案

解决方案1 0 2021-12-13 04:47:06

解决方案1
0 2021-12-13 04:47:06