如何为网站创建响应式地图

[ad_1]

大家好,我是新的网络开发人员,我想在网站中创建响应式地图。
有什么办法可以做到这一点吗? 最好的网页设计软件是什么?

我尝试过的:

我尝试使用 xd 和 html。

解决方案1

鉴于您已将查询标记为 HTML 和 Javascript,正如 Mike 建议的那样,我的第一个链接是: 将响应式 Google 地图添加到您的网站的 5 种方法[^]

对于简单的 Google 地图,这是最简单的方法 另一个参考这里[^]:

1. 访问谷歌地图网站。
2. 搜索您想要在嵌入地图中显示的位置。
3. 单击共享。
4. 单击嵌入地图以查看嵌入的预览。 在这里,您可以切换地图区域、缩放、类型(街道地图或卫星地图)和尺寸(如果您愿意,还可以包括自定义尺寸)
5. 准备好嵌入后,单击复制 HTML。
6. 在 HTML 文件中,将嵌入代码粘贴到您希望地图在页面上显示的位置。 代码看起来像这样(根据您为地图选择的大小,它可能看起来有所不同:
7. 保存 HTML 文件并在 Web 浏览器中打开该文件以查看正在运行的地图。
8. 使用一些额外的 HTML 和 CSS 使我们的嵌入式地图具有响应能力
代码:
1. 将现有的嵌入代码放入 HTML 文档中。 然后,将其包起来 <iframe> 容器中的元素(代表地图) <div> 与谷歌地图类。

超文本标记语言
<div class="google-map">
     <iframe src="[your unique google URL] " width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

2. 接下来,在 CSS 中添加以下代码:

CSS
.google-map {
     padding-bottom: 50%;
     position: relative;
}

.google-map iframe {
     height: 100%;
     width: 100%;
     left: 0;
     top: 0;
     position: absolute;
}

解决方案2

要在网站上制作可适应屏幕尺寸的地图,您可以使用 Google Maps JavaScript API 或其他地图库。 只需将地图代码放置在容器 div 内即可。

<div id="map-container"></div>

使用 CSS 应用设计原则,例如使用基于百分比的宽度。 为了控制各种屏幕尺寸,您可能需要考虑使用媒体查询,如下所示:

#map-container {
    height: 60vh; /* Adjust the height as needed */
    width: 100%;
}

[ad_2]

コメント

标题和URL已复制