通過微信獲取經緯度再用騰訊地區轉成地點名稱,使用其他地圖也行。有更好方法請指導。
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>