我正在使用 Google map ，我想根据条件在 map 上显示图像的某些部分(tiff 图像)。图像应覆盖在 map 上。
示例
在显示日本某些地区的温度时，当我选择年份时，基于该年份的图像的特定区域应覆盖在 map 上。
如何在 map 上上传 tiff 图像，并且上传的图像必须覆盖在正确的位置。任何帮助将不胜感激。
最佳答案
地面覆盖来救援
您可以使用地面叠加层在 map 中叠加图像。地面叠加层是与纬度/经度坐标相关的对象，因此当您拖动或缩放 map 时它们会移动。
有关地面覆盖层的更多信息，您可以查看以下文档:
代码
我还有文档中的代码示例，您可以在其中将 jpeg 图像叠加在 map 上:
<!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>注意:在示例中我没有使用 key ，因此它可以在 StackOverflow 上运行。但作为用户，您应始终使用 API key ，否则您的网站可能会被 Google 屏蔽。只需替换
https://maps.googleapis.com/maps/api/js?callback=initMap
由
https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap
TIFF 怎么样？
目前我还不能完全确定我们是否支持 tiff 格式。 GroundOverlay 上的文档仅提到您需要添加 URL，但没有指定有关图像类型的任何信息。在这种情况下，您必须尝试，但我有根据的猜测是它应该有效。
如果不支持 tiff 怎么办？
如果不支持 tiff 格式，您始终可以将该格式的图像转换为 png 或 jpeg。以下是两个链接，可将您添加到此中:
但是还有很多很多。
希望这个回答对你有帮助。如果由于某种原因不支持 tiff，请告诉我，以便我提出功能请求!
关于javascript - 在谷歌地图中显示 tiff 图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39143900/