Question

我试图让Google地图GroundOverlay无法运行。随处搜索，阅读Google参考文档，仍然没有lucK。

我所尝试的内容可以在以下网址看到：

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>

您可以看到地图上放置了某种叠加层。我相信我的sw，ne latlng正确。如果我通过右键单击并选择＆＃34来检查谷歌地图;这里是什么＆＃34;这些是给出的。

我在png，gif和jpeg中有叠加层。有了png和gif，我什么都没有出现。

我哪里出错？

感谢

肯

Answer 1

你的groundOverlay你的界限是错误的。

根据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。你的代码：

var imageBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-38.374615, 144.823766), //SE
    new google.maps.LatLng(-38.373628, 144.821631)  //NW
);

如果我在两点之间交换经度，那就可以了：

var imageBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-38.374615, 144.821631), //SW
    new google.maps.LatLng(-38.373628, 144.823766)  //NE
);

proof of concept fiddle

代码段

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>

谷歌地图GroundOverlay

1 个答案: