我正在使用Google地图,我想根据条件在地图上显示图像的某些部分(tiff图像)。图像应该覆盖在地图上。
在显示日本某些地区的温度时,当我选择年份时,根据该年份图像的特定区域应覆盖在地图上。
我如何在地图上上传tiff图像,上传的图像必须覆盖在正确的地方。
救援地面叠加
您可以使用地面覆盖在地图中覆盖图像。地面覆盖是与纬度/经度坐标绑定的对象,因此当您拖动或缩放地图时,它们会移动。
有关地面覆盖的更多信息,您可以查看以下文档:
- https://developers.google.com/maps/documentation/javascript/groundoverlays
我也有一个代码示例,从文档中,你可以在你的地图上覆盖一个jpeg图像:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Ground Overlays</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.
var historicalOverlay;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {
lat: 40.740,
lng: -74.18
}
});
var imageBounds = {
north: 40.773941,
south: 40.712216,
east: -74.12544,
west: -74.22655
};
historicalOverlay = new google.maps.GroundOverlay(
'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
imageBounds);
historicalOverlay.setMap(map);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
</body>
</html>
注意:在这个例子中,我没有使用一个键,所以它在StackOverflow上工作。但作为一个用户,你应该始终使用API密钥或您的网站可能会被谷歌屏蔽。只需替换
https://maps.googleapis.com/maps/api/js?callback=initMap
https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap
tiff呢?
在这一点上,我不完全确定我们支持tiff格式。关于grounoverlay的文档只提到您需要添加一个URL,但它没有指定任何关于图像类型的内容。在这种情况下,您将不得不尝试,但我有根据的猜测是它应该工作。
不支持tiff
怎么办?
如果不支持tiff
格式,您始终可以将该格式的图像转换为png
或jpeg
。下面是两个链接,可以帮你加入进来:
- http://image.online-convert.com/convert-to-png
- http://image.online-convert.com/convert-to-jpg
但是外面还有很多很多。
我希望这个答案对你有所帮助。如果由于某些原因tiff
不支持,请告诉我,以便我可以提出功能请求!