Google Maps GroundOverlay [英] Google Maps GroundOverlay
问题描述
我正在尝试使Google地图GroundOverlay正常运行.到处搜索，阅读Google参考文档，仍然很幸运.
I am attempting to get a Google maps GroundOverlay working without luck. Searched everywhere, read the Google reference documentation, still no lucK.
我的尝试可以在以下地方看到:
What I have attempted can be seen at:
http://www.ryecemetery.com.au/locate.html
非常基本的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_SJakjgkzjvWoMu7T-DqsUDWUEbfUtTA"></script>
</head>
<body>
<div style="width: 1200px; height: 800px" id="map-canvas"></div>
<script>
var historicalOverlay;
var myLatlng = new google.maps.LatLng(-38.374058,144.822763);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 18,
center: myLatlng
});
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-38.374615, 144.823766),
new google.maps.LatLng(-38.373628, 144.821631)
);
historicalOverlay = new google.maps.GroundOverlay(
'http://www.ryecemetery.com.au/images/layout-06a.jpg',
imageBounds);
historicalOverlay.setMap(map);
</script>
</body>
</html>
您可以看到地图上放置了某种叠加层.我相信我的瑞士法郎是正确的.如果我通过右键单击并选择这里是什么"来检查Google地图，则这些是给出的信息.
You can see that some sort of overlay is placed on the map. I believe I have the sw, ne latlng correct. If I check on Google maps by right clicking and choosing "whats here" those are the latlng that is given.
我有png，gif和jpeg的叠加层.有了png和gif，我什么也没出现.
I have the overlay in png, gif and jpeg. With the png and gif I get nothing to appear.
我哪里出错了?
谢谢
肯
推荐答案
对于您的groundOverlay，您的边界是错误的.
Your bounds is wrong for your groundOverlay.
根据google.maps构造函数的文档.LatLngBounds对象:
according to the documentation for the constructor for a google.maps.LatLngBounds object:
Constructor
LatLngBounds(sw?:LatLng, ne?:LatLng) Constructs a rectangle from the points at its south-west and north-east corners.
参数应为SW，NE.您的论点是SE，NW.您的代码:
The arguments should be SW, NE. Your arguments are SE, NW. Your code:
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-38.374615, 144.823766), //SE
new google.maps.LatLng(-38.373628, 144.821631) //NW
);
如果我在两点之间交换经度，它将起作用:
If I swap the longitudes between the two points it works:
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-38.374615, 144.821631), //SW
new google.maps.LatLng(-38.373628, 144.823766) //NE
);
代码段:
var historicalOverlay;
var myLatlng = new google.maps.LatLng(-38.374058, 144.822763);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 18,
center: myLatlng
});
var markerNW = new google.maps.Marker({
position: new google.maps.LatLng(-38.374615, 144.823766),
map: map,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(3.5, 3.5)
},
title: "SW"
});
var markerSE = new google.maps.Marker({
position: new google.maps.LatLng(-38.373628, 144.821631),
map: map,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(3.5, 3.5)
},
title: "NE"
});
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-38.374615, 144.821631),
new google.maps.LatLng(-38.373628, 144.823766));
historicalOverlay = new google.maps.GroundOverlay(
'http://www.ryecemetery.com.au/images/layout-06a.jpg',
imageBounds);
historicalOverlay.setMap(map);html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>这篇关于Google Maps GroundOverlay的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
