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

Question

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

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

目前发生的情况是 map 要么适合其容器的边界，100% x 216 像素，但会自行拉伸(stretch)，要么保持其原始大小而不调整大小。在不拉伸(stretch)的情况下渲染 map 的最佳做法是什么。谢谢!

  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 map ，并且只需在屏幕调整大小时将其居中，但这与您目前评论的内容完全不同。

关于谷歌地图的更新

关于 Google map ，您可以从这里开始:Google Maps Docs

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

这是我经常在网站上使用的一个非常基本的示例。你基本上会有这样的 HTML，CSS 和 JS 部分当然可以移动到单独的文件中，你只需要注意当 Google Maps 的 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 //-->

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