Можно добавить наложение на карту Google с сохраненным изображением?

Question

У меня возникают трудности при попытке добавить изображение в качестве наложения на карту, которую я создаю. Во всех файлах справки, которые я видел, изображение было передано в функцию наложения на землю в качестве URL. Возможно ли передать изображение, которое хранится на моем компьютере, а не онлайн-изображение?

Вот код, который у меня есть для карты и наложения:

    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>

Надеюсь, это поможет.