嘗試使用 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