300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 在web页面嵌入百度地图(含定点定位)

在web页面嵌入百度地图(含定点定位)

时间:2020-01-24 18:33:23

相关推荐

在web页面嵌入百度地图(含定点定位)

在web页面嵌入百度地图(含定点定位)

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

一、操作步骤

(1)访问链接:http://api./lbsapi/creatmap/

(2)选择当前城市,然后输入具体地址,搜索

(3)可根据需求对地图的显示作设置

(4)添加地点标记:点击左侧绿色标记后,鼠标移到右侧底部对指定位置标记

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

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

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

(9)这里显示有乱码,修改页面编码为 utf-8 即可

二、可能遇到的问题

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

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

修改前:/map/images/us_mk_icon.png

修改后:/image/us_mk_icon.png

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

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

(1)地图内容显示不正常

解决办法:覆盖#dituContent imgmax-width属性

#dituContent img{max-width: none;}

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

(2)标注名称的边框显示不正常

解决办法:

#dituContent .BMapLabel{max-width: max-content;}

修改后显示正常:

三、参考链接

/article/ae97a646b06db4bbfd461ddb.html

/oulihong123/article/details/54600002

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。