【小河今学 | html+css+js】如何在网页中导入地图

6.30

今天完成的作业里需要实现如下图所示的地图显示，在这里简单记录如何实现

一、地图的初步设置

1. 首先打开网址 http://api.map.baidu.com/lbsapi/createmap/

2. 接着如下图所示，选择定位到你想要的城市
   

3. 接着如下图，设置地图的大小及其他（这里我只需要宽930px 高280px的地图，因此未调整其他）
   

4. 接着添加标注到你想要的地方，可以更改标注的样式、名称和备注
   
   

二、导入地图

完成上述步骤后点击获取代码

我们需要的是如下图箭头所示的js导入，以及地图的div，将这两行分别复制

这里js导入中需要用的密钥为

A5j0zidDv3y1zNLNRFDIVGXSOOsUdoXX

将js导入这一行复制到你的源代码的head中，将div复制到你想要地图显示的地方（如我这里将其放进类名为co-content的父级下）

此处的div中如果复制过来的代码宽高没有达到预期设置，则可在该div的style中自行更改（style可随意更改，注意id=map不能删掉）
最后，将源代码中的js部分全部复制放入自己的代码中即可


转自B站 链接: link

原本是写在b站上做一个自己学习过程的记录，现在在这里同步转载一下