尝试使用 Google Maps API 旋转地图时出现问题
Posted
技术标签:
【中文标题】尝试使用 Google Maps API 旋转地图时出现问题【英文标题】：Problem trying to rotate a map with 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>
【问题讨论】：
【参考方案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
);
【讨论】：
以上是关于尝试使用 Google Maps API 旋转地图时出现问题的主要内容，如果未能解决你的问题，请参考以下文章
Google Maps Javascript API V3中的旋转标记
谷歌地图 api 上的“新 google.maps.directionService()”错误