我在尝试将图像作为地面叠加层添加到我正在创建的Google地图时遇到了困难。在我看过的所有帮助文件中,图像已作为网址传递到地面叠加功能。是否可以传入存储在我的机器上的图像,而不是在线图像?
这是我对地图和代码的代码。覆盖:
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'我在地图上创建的图片。我也尝试用所有目录传递整个路径,但地图上仍然没有任何内容。如果没有办法传递这样的图像,有没有办法将图像放到网上并以这种方式使用?
由于
答案 0 :(得分:1)
将完整的网址传递给图片,作为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>
&#13;
希望有所帮助。