我使用Google's documentation中的示例 当我添加自己的照片时,这很有效。
但是当我改变坐标时,照片就不再显示了。
我通过在Google地球中添加图像(图像叠加)来获取坐标。
我不明白我做错了什么。
代码:
<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Ground Overlays</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.
var historicalOverlay;
function initialize() {
var newark = new google.maps.LatLng(58.8110, 8.526);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(58.989835, 9.050201),
new google.maps.LatLng(58.612911, 7.917444));
var mapOptions = {
zoom: 10,
center: newark
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
historicalOverlay = new google.maps.GroundOverlay(
'http://xxxxxxxxx/test/images/map/kart.JPG',
imageBounds);
historicalOverlay.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
答案 0 :(得分:0)
LatLngBounds
的预期参数是
...但您提供了:
切换参数,您就会看到图像
// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.
var historicalOverlay;
function initialize() {
var newark = new google.maps.LatLng(58.8110, 8.526);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(58.612911, 7.917444),
new google.maps.LatLng(58.989835, 9.050201)
);
var mapOptions = {
zoom: 10,
center: newark
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map.fitBounds(imageBounds);
historicalOverlay = new google.maps.GroundOverlay(
'http://i.stack.imgur.com/mA4e2.jpg?s=256&g=1',
imageBounds);
historicalOverlay.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
&#13;
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
&#13;
<script src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>
&#13;