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

element-ui + 腾讯地图相关推荐

vue+element ui+腾讯云开发打造会员管理系统之实战教程（三）系统登录
目录登录逻辑邮箱登录配置登录逻辑用户注册功能注册页面效果激活邮件代码配置程序预览源码登录逻辑 elment脚手架本身已经实现了登录逻辑,但是结合项目本身还需要进行改造,因为腾讯云开 ...
uni-app引入腾讯地图
这篇地图开发教程先对uniapp开发map进行的说明,(uniapp是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可以发布到ios,android,web以及各种小程序,快应用等多 ...
element ui 空格_空格是您的UI朋友。大量使用它。
element ui 空格 Originally published at marcandrew.me on July 30th, 2020. 最初于 2020 年7月30日在 marcandrew ...
element ui字段_ui备忘单下拉字段
element ui字段重点 (Top highlight) Dropdowns get a lot of flak from the UI world – and if we are honest ...
地图显示动态轨迹_腾讯地图SDK全新版本上线，可满足开发者核心诉求
近日,由腾讯位置服务开发的SDK全新v4.3.0版本正式上线,新增了小车平滑移动.点聚合功能,内置墨渊模板适配暗色模式,动态路名等,可以帮助开发者更轻松地访问腾讯地图服务和数据,优化地图类的程序开发体 ...
腾讯地图api-基本用法总结
以下笔记均已录制点击查看B站视频一.序言前段时间呢,由于工作原因研究了百度地图api的基本用法.百度地图用法点击查看所以开始对地图产生了点兴趣,最近花了几个时间研究了下腾讯地图的基本使用. 只 ...
html调用腾讯地图定位当前位置,vue web项目中调用腾讯地图API获取当前位置的经纬度...
vue web项目中调用腾讯地图API获取当前位置的经纬度 vue web项目中调用腾讯地图API获取当前位置的经纬度在main.js 中添加一下代码 import axios from 'axio ...
微信小程序--放入个性化手绘地图具体步骤（腾讯地图）
微信小程序–放入个性化手绘地图具体步骤(腾讯地图) 前言:小程序中想要实现个性化手绘地图需要通过H5嵌入的模式进行实现. 1.首先需要一个腾讯地图的账号(微信登录即可),然后选择个性化地图进入(htt ...
html5获取当前位置的api腾讯地图,腾讯地图JavaScript API调用
腾讯地图JavaScript API调用 1.加载地图 API 页面直接引入 https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4 ...
腾讯地图实现点击搜索地址功能
一.如图. 二.设计详情:地图为腾讯MapView.搜索列表RecycleView 为屏幕长度的一半.点击地图空白处关闭列表.点击地图地点名称.搜索并展示: 三.注意点:腾讯地图显示和定位是分开的. ...

element-ui + 腾讯地图

element-ui + 腾讯地图相关推荐

最新文章

热门文章