通过微信获取经纬度再用腾讯地区转成地点名称,使用其他地图也行。有更好方法请指导。
1.需要安装微信 sdk ,腾讯地图 ,
2.安装后使用微信方法是获取经纬度,
3.用腾地图逆解析获取到地点名称
4.该项目使用element框架
安装微信sdk
npm install weixin-js-sdk
腾讯地图
在index.html 文件中引入
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=CYMBZ-3NEK3-BMK32-YIMDI-DPXB5-4JB5Y"></script>
html 结构
<el-select v-model="user.checkPlace" placeholder="请选择地点" class="select2" popper-class="select-option" >
<el-option
v-for="item in Site"
:key="item.id"
:label="item.address"
:value="item.address">
</el-option>
</el-select>
<script>
export default {
data() {
return {
Site:[],
}
},
created() {
this.$axios.get("http://192.168.124.7:8090/wf/search?pageNum=0&pageSize=0",{ withCredentials: true }).then(function(res) {
if(res.data.info=="success"){
then.kindList = res.data.data
}
})
// 定位
var then = this
var url= window.location.href;
var urls =url.substr(0, url.indexOf("#"));
this.$axios.get("http://192.168.124.7:8090/wechat/getJsSdk?url="+urls,{ withCredentials: true }).then(res=>{
// 获取必要信息实例化地图
then.wx.config({
debug: false, // 开启调试模式,
appId: res.data.data.appId, // 必填,企业号的唯一标识,此处填写企业号corpid
timestamp: res.data.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.data.signature,// 必填,签名,见附录1
jsApiList: ['getLocation','translateVoice'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
then.wx.ready(function(){
then.wx.getLocation({
type:'gcj02',
success: function(res) {
// 获取经纬度
var latLng = new qq.maps.LatLng(res.latitude, res.longitude);
test.getAddress(latLng)
},
})
})
// var thens = then
// 调取腾讯地图
var test= new qq.maps.Geocoder({
complete : function(res){
then.Site = res.detail.nearPois
}
})
})
},
}
</script>