在不拉伸的情况下将静态 Google Map API 调整为自定义大小

Question

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

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

目前发生的情况是地图要么适合其容器 100% 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 地图，并将其居中调整屏幕大小，但这与您当前评论的内容完全不同。

关于谷歌地图的更新

至于谷歌地图，您可以从这里开始：Google Maps Docs

我不知道您是否已经拥有 API 密钥和结算帐户，但它可能会要求您提供这些信息。您必须拥有启用 JavaScript 地图 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 //-->

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