獲取經緯度轉成地點名稱

通過微信獲取經緯度再用騰訊地區轉成地點名稱,使用其他地圖也行。有更好方法請指導。
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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章