腾讯地图踩坑记之选点组件

最近遇到一个需求,h5页面用户新增地址的时候除了可以调起级联菜单弹窗进行选择也可以点击图标进入地图进行选择,如下图:

腾讯地图踩坑记之选点组件_第1张图片腾讯地图踩坑记之选点组件_第2张图片

我们用的是腾讯地图,要使用腾讯地图功能首先要组册key完成验证,这个按照文档一步一步来就可以了,完成之后需要进行一些设置,就我这个选点组件而言就必须开启 WebServiceAPI,否则无法使用相应的地图功能。

腾讯地图踩坑记之选点组件_第3张图片

腾讯地图选点组件,用起来还是挺方便的,使用方式有两种:一种是使用iframe内嵌调用;还有一种是通过标签直接跳转一个新的地图页面。iframe嵌入不是很好用,于是选了第二种。通过页面跳转的方式调用该组件的时候,需要设置backurl参数,用户点击选中的位置点后,页面跳转至开发者指定的返回地址(backurl),并将位置信息添加到回跳地址(backurl)上,具体使用可查看文档。我是使用vue框架开发的,具体实现代码如下:
 

//1.


//
                    
                    

你可能感兴趣的:(JavaScript,腾讯地图选点组件,h5页面)