多商户商户后台商户信息页面地图接口切换

一、安装扩展

先全局安装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.crmeb.com/ask/thread/47471