将静态谷歌地图API调整为自定义大小，而无需拉伸

Question

我正在尝试通过为我的页面使用自定义的谷歌地图图像来创建类似横幅的感觉。我正在使用带有地图静态API的反应谷歌地图。静态映射在链接中硬编码的大小为 640 x 355。

我希望地图占据屏幕宽度的 100%，同时只显示 216px 的高度，其中地图的中心是坐标位置的标记图标。

目前发生的情况是，地图要么适合其容器 100% x x 216px 的边界，但会自行拉伸，要么在不调整大小的情况下保持其原始大小。在不拉伸的情况下渲染地图的最佳实践是什么。谢谢！

  return (
                <main style={{  height: '216px' }}>
                   <div style={{ position: 'relative' }}>
                         <img alt={alt} src={src} width='100%' height="100%" />
                   </div>
                </main>
    )

SRC https://maps.googleapis.com/maps/api/staticmap?size=640x355&scale=1&key=API_KEY&maptype=terrain&language=en&markers=icon:http://localhost:3000/icon.png|43.0439203,-112.414927&zoom=15&center=__CENTER__&format=png8&

Answer 1

您是否尝试过将图像放在绝对位置？

您可以执行以下操作：

<main style="height: 216px; position: relative; overflow: hidden;">
    <img alt={alt} src={src} style="height: 100%; width: auto; position: absolute; left: 50%; transform: translate(-50%, 0);" />
</main>

你在这里基本上要做的是将图像放在主容器内，你指出它占据216px高度的100%，你指示宽度是自动计算的，你把它放在一个绝对位置并水平居中。

同时，溢出允许在不更改尺寸的情况下裁剪图像。

这是你想要实现的吗？

除此之外，如果没有图像缩放，您将无法实现 100% 的屏幕宽度。您需要使用Google Maps JavaScript API来制作交互式Google Maps，并将其集中在屏幕大小调整上，但这与您当前评论的内容完全不同。

关于谷歌地图的更新

至于谷歌地图，你可以从这里开始：谷歌地图文档

我不知道您是否已经拥有API密钥和计费帐户，但它可能会要求您提供。您必须具有启用了 JavaScript Maps API 的 API 密钥。然后你可以使用所有的例子。

这是我通常在网站上使用的一个非常基本的例子。你基本上会有一个这样的HTML，CSS和JS部分当然可以移动到单独的文件中，你只需要小心，当谷歌地图的URL调用回调函数时，initMap()它可以调用，否则你会得到一个错误。您还可以将坐标放在变量中并改用变量。

<style>
    #map { width: 100%; height: 216px; position: relative; }
    #map > #map-canvas { min-height: 100%; }
</style>
<div id="map">
    <div id="map-canvas"></div>
</div>
<script>
    function initMap() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: { lat: 45.000001, lng: -90.000001 },
        disableDefaultUI: false,
        scrollwheel: false
    });
    var main_marker = new google.maps.Marker({
        position: new google.maps.LatLng(45.000001, -90.000001),
        map: map
    })
    // This is the function that centers your marker each time
    // the viewport gets resized so that the marker is always
    // in the middle
    google.maps.event.addDomListener(window, 'resize', function() {
        map.setCenter(new google.maps.LatLng(45.000001, -90.000001));
    });
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={{your_api_key}}&language=en_US&callback=initMap" async></script>
<!-- you can change the language with the language parameter //-->

据我了解，这基本上可以解决您的问题。