在web页面嵌入百度地图（含定点定位）

在web页面嵌入百度地图（含定点定位）

一、操作步骤二、可能遇到的问题1.标记图标没有正常显示出来2.使用到项目中可能遇到的问题（1）地图内容显示不正常（2）标注名称的边框显示不正常

三、参考链接

一、操作步骤

（1）访问链接：http://api.map.baidu.com/lbsapi/creatmap/

（2）选择当前城市，然后输入具体地址，搜索

（3）可根据需求对地图的显示作设置

（4）添加地点标记：点击左侧绿色标记后，鼠标移到右侧底部对指定位置标记

（6）点击图标可切换不同的标记图标，然后添加名称和备注，点击保存即可

（7）点击下方“获取代码”按钮，即可看到自动生成的嵌入地图代码

（8）直接把内容保存为.html文件，就可以看到地图显示效果

（9）这里显示有乱码，修改页面编码为 utf-8 即可

二、可能遇到的问题

1.标记图标没有正常显示出来

是因为生成的代码使用的图标路径不对（百度的问题），修改源码最后一个 js 方法 createIcon()里的图标 url，修改后即可正常显示

修改前：http://app.baidu.com/map/images/us_mk_icon.png

修改后：http://map.baidu.com/image/us_mk_icon.png

2.使用到项目中可能遇到的问题

以上问题，是在百度直接生成的代码可能遇到的（没有其他代码影响）。但实际使用到项目时，还可能出现其他问题，原因大多是因为 css 样式有冲突，所以需要做额外处理。

（1）地图内容显示不正常

解决办法：覆盖#dituContent img的max-width属性

#dituContent img{

max-width: none;

}

修改后地图内容显示正常：

（2）标注名称的边框显示不正常

解决办法：

#dituContent .BMapLabel{

max-width: max-content;

}

修改后显示正常：

三、参考链接

https://jingyan.baidu.com/article/ae97a646b06db4bbfd461ddb.html

https://blog.csdn.net/oulihong123/article/details/54600002