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

Question

I have written an HTML that, using Google Maps API, shows the aircraf's landing point when I land in Flight Simulator.我写了一个 HTML，它使用谷歌地图 API，显示了我在飞行模拟器中着陆时飞机的着陆点。

What I would achieve is to rotate the map considering the aircraft's course.我要实现的是考虑飞机的航向旋转 map。

The below HTML initially seems to run fine, but in one second the map go back to northern orientation.下面的 HTML 最初似乎运行良好，但在一秒钟内 map go 回到北方方向。

How could I solve the issue?我该如何解决这个问题？ What I'm doing wrong.我做错了什么。

Thanks and kind regards谢谢和亲切的问候

Joe乔

<!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. 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 . Note that n order to use the new WebGL features, you need a map ID that uses the vector map.请注意，为了使用新的 WebGL 功能，您需要一个使用向量 map 的 map ID。 You'll also need to update your API bootstrap request.您还需要更新您的 API 引导请求。 Please see this .请看这个。

Here's a sample code that shows what you want to achieve and code snippets below:这是一个示例代码，显示了您想要实现的目标和下面的代码片段：

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