element-ui + 腾讯地图

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

前置条件
申请腾讯地图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文件

export default {
name: “mapChild”,
data() {
return {};
},
created() {
let _this = this;
TMap().then(qq => {
//初始化中心点，传入想要设置的值
this.mapInit(经度, 纬度, 缩放比例);
});
},
methods: {
//父组件调用该函数，设置地点
setLoc(lng, lat) {
this.mapInit(lng, lat, 16);
},
//搜索某一地点名
getLoc(ele) {
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … this.emit(“mapSend”, searchObj);
let _this = this;
let resultData = res.data.data.data[0];
if (res.data.data.status == 0) {
this.mapInit(resultData.location.lng, resultData.location.lat, 16);
}
})
.catch(error => {
console.log(error);
});
},
//根据传入的值渲染地图及传出经纬度和地名
mapInit(lng,lat,zoom) {
let _this = this
var map = new qq.maps.Map(document.getElementById(“container”), {
// 地图的中心地理坐标。
center: new qq.maps.LatLng(
lat,
lng
),
zoom: zoom
});
var marker = new qq.maps.Marker({
position: new qq.maps.LatLng(
lat,
lng
),
map: map
});
qq.maps.event.addListener(map, “click”, function(event) {
marker.setMap(null);
});
qq.maps.event.addListener(map, “click”, function(event) {
let result = {
status: 0,
result: {
location: {
lng: event.latLng.getLng(),
lat: event.latLng.getLat()
}
}
};
qq.maps.event.addListener(map, “click”, function(event) {
marker.setMap(null);
});
var marker = new qq.maps.Marker({
position: event.latLng,
map: map
});

    _this
      .$axios({
        url: url,
        //这里的url跟上面也是相同的问题
        method: "get",
        params: {
          location: event.latLng.getLat() + "," + event.latLng.getLng()
        }
      })
      .then(res => {
        res.data.data.extra = 1;
        _this.$emit("mapSend", res.data.data);
      })
      .catch(err => {
        this.$message({
          type: 'warning',
          message: '定位解析失败'
        })
      })
  });
}

},
};

以上就完成了子组件的创建，然后就可以在父组件中引入，并使用啦
让我们看看效果吧 ↓↓↓

node部分代码
//获取地点
router.get(’/tmapA’, async function (req, res, next) {
let url = ‘http://apis.map.qq.com/ws/place/v1/suggestion/?key=申请的key&region=’ + 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)
}
})
})