element-ui + 腾讯地图

因为项目要在小程序上使用地图,使用百度坐标还需要进行转换,所以决定引入腾讯地图。

element-ui + 腾讯地图_第1张图片

前置条件

申请腾讯地图key 腾讯位置服务

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)
        }
    })
})

你可能感兴趣的:(前端,vue.js,node.js)