多商戶商戶后臺商戶信息頁面地圖接口切換

一、安裝擴展

先全局安裝vue-jsonp，如果安裝不上嘗試切換至淘寶鏡像

安裝命令：cnpm install vue-jsonp --save

二、修改代碼

main.js 中引入并使用 vue-jsonp

代碼：

import {VueJsonp} from "vue-jsonp"
Vue.use(VueJsonp);

在src/components/map/map.vue文件中加入getLocation方法

代碼：

getLocation(address) {
      let that = this;
      that.$jsonp("https://apis.map.qq.com/ws/geocoder/v1?", {
        address: `${address}`,

        key: that.mapKey,
        output: "jsonp",
      }).then((res) => {
        if(res.status === 0){
          TMap(that.mapKey).then(qq => {
            var center = new qq.maps.LatLng(res.result.location.lat, res.result.location.lng);
            let map = new qq.maps.Map(document.getElementById("container"), {
              center: center,
              zoom: 15
            }); 
          })
        }else{
          that.$message.error(res.message)
        }
      }).catch(err=>{
        that.$message.error(err.message)
      })   
    }

把searchKeyword方法改成下圖所示這樣

代碼：

searchKeyword(address) {
      this.getLocation(address)
 },

initMap方法改成下圖這樣

代碼：

initMap() {
      let that = this
      that.getLocation(that.address)
}

三、 如果店鋪街無法定位，查看：

https://www.www.2233z.cn/ask/thread/47471