腾讯位置服务+element-ui 实现地址搜索&marker标记功能

前言

小程序项目需要实现输入地址搜索解析出相应经纬度并在地图上打点标注。

前期准备

1、 申请腾讯位置服务key

2、npm install qqmap --save

引入需要的js文件

在App.vue中输入

新建TMap.js文件

import maps from 'qqmap';

export function TMap() {
    return new Promise(resolve => {
        maps.init(申请的key, () => {
            resolve(maps);
        });
    });
}

新建map.vue文件

以上就完成了子组件的创建，然后就可以在父组件中引入并使用

效果图

node部分代码

//获取地点
router.get('/tmapA', async function (req, res, next) {
    let url = 'http://apis.map.qq.com/ws/place/v1/suggestion/?key=申请的key®ion=' + urlencode('绍兴','utf-8') + '&keyword=' + urlencode(req.query.address,'utf-8') 
    request({
        url: url,
        method: "GET",
        json: true,
    }, function(_err, _res, _resBody){        
        if(_resBody){
            new Result(_resBody, '解析成功').success(res)
        }else{
            new Result(null, '解析失败').fail(res)
        }
    })
})

//获取经纬度
router.get('/tmapL', async function (req, res, next) {
    let url = 'https://apis.map.qq.com/ws/geocoder/v1/?key=申请的key&location=' + req.query.location
    request({
        url: url,
        method: "GET",
        json: true,
    }, function(_err, _res, _resBody){        
        if(_resBody){
            new Result(_resBody, '解析成功').success(res)
        }else{
            new Result(null, '解析失败').fail(res)
        }
    })
})

作者：yiyou12138

链接：https://segmentfault.com/a/1190000022763174

来源：SegmentFault

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。