可以添加地面覆盖谷歌地图与存储的图像

Question

我在尝试将图像作为地面覆盖添加到我正在创建的谷歌地图时遇到了困难。在我看到的所有帮助文件中，图像都作为url传递给了groundoverlay函数。有可能让存储在我的机器上的图像而不是在线图像传入吗？

这是我的地图代码&覆盖：

    function initialize() {
        var mapOptions = {
            center: {lat: 45.3469, lng: -75.7594},
            zoom: 10,
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var imageBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(45.2118075, -75.4455767),
        new google.maps.LatLng(45.2043559, -75.4545309));
        var campusOverlay = new google.maps.GroundOverlay('Campus.JPG', imageBounds);
            campusOverlay.setMap(map);
    }

我希望将我创建的"Campus.jpg"图像添加到地图中。我还试着传入整个路径及其所有目录，但仍然没有任何内容出现在地图上。如果没有办法传递这样的图像，有没有办法将图像放到网上并以这种方式使用？

感谢

Answer 1

将完整的url作为GroundOverlay的第一个参数传递到图像，并确保边界正确。这可能有点棘手。您的覆盖范围应包括北部纬度和南部纬度/东部以及西经，所以你基本上有一些矩形区域。下面是一个简单的例子。你肯定会明白的。

var overlay;
function initialize() {
  var center = new google.maps.LatLng(45.3469, -75.7594);
  var imageBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(45.2, -76.1),
    new google.maps.LatLng(45.5, -75.38)
  );
  var mapOptions = {
    zoom: 10,
    center: center,
    disableDefaultUI: true
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
                                mapOptions);
  overlay = new google.maps.GroundOverlay(
    'https://upload.wikimedia.org/wikipedia/commons/e/ee/Dowarian%2C_Neelam_Valley%2C_AJK_Pakistan.JPG',
    imageBounds);
  overlay.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

html, body, #map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<div id="map-canvas"></div>

希望能有所帮助。