前端实践（2）——网页嵌入加载地图

最新推荐文章于 2025-03-12 23:47:33 发布

Arcgiser

最新推荐文章于 2025-03-12 23:47:33 发布

阅读量9.5k

点赞数 12

分类专栏： ☑ 前端小技巧文章标签： html 地图API 前端

本文链接：https://blog.csdn.net/weixin_43626557/article/details/109607925

版权

☑ 前端小技巧专栏收录该内容

4 篇文章

订阅专栏

网页嵌入加载地图

在制作网页中通常需要将外部地图（如百度地图、高德地图等）嵌入到我们的页面中。
以下以百度地图为例进行展示：
1.首先我们打开百度地图的API接口http://api.map.baidu.com/lbsapi/creatmap/index.html
2.打开百度API界面，选择要展示的位置。
在这里插入图片描述

3.设置地图相关设置
在这里插入图片描述
4.可以进行注记

5.点击获取代码可以自动生成html代码。

6.将代码复制到编译器中新建的HTML文件中，设置地图呈现的高度和宽度。

7.新建另一HTML界面，通过<iframe>标签将刚才的HTML页面进行调用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>beyond网站模板练习</title>
</head>
<body>
    <h1 style="text-align: center;">网页嵌入地图效果</h1>
    <h2 style="text-align: center;">地址：天安门</h2>
    <div style="margin-left: 200px;">
    <iframe width="1000px" height="450px" src="test.html"></iframe>//设置调用地图页面的宽度和高度。
</div>
</body>
</html>

8.效果展示
在这里插入图片描述