地图地址信息无法在测试环境修改-CSDN博客

本文链接：https://blog.csdn.net/qq_56507133/article/details/137228196

地图获取地址：测试端的地址无法修改

原因：腾讯提供的地图接口是跨域的,axios不能进行jsonp跨域

      // axios
      //   .get(`geocoder/?location=${loc.latlng.lat},${loc.latlng.lng}&key=密钥&get_poi=1`)
      //   .then((res) => {
      //     const { data } = res
      //     if (data.status === 0) {
      //       shopInfoForm.value.shopLocation = JSON.stringify({
      //         address: `${loc.poiaddress} ${loc.poiname}`,
      //         latitude: loc.latlng.lat,
      //         longitude: loc.latlng.lng,
      //         ad_info: data.result.ad_info,
      //         address_component: data.result.address_component
      //       })
      //     }
      //   })


        这种方法开发环境能正常使用，测试环境不行。
        测试环境请求的预览为空白

解决使用jsonp的方法解决跨域（vue-jsonp）

npm install jsonp --save

const url = "https://apis.map.qq.com/ws/geocoder/v1/"
      const data = {
        location: loc.latlng.lat + "," + loc.latlng.lng,
        key: "密钥",
        get_poi: 1,
        output: "jsonp"
      }
      //使用jsonp解决跨域问题
      jsonp(url, data)
        .then((data: any) => {
          console.log(data)

          if (data.status === 0) {
            shopInfoForm.value.shopLocation = JSON.stringify({
              address: `${loc.poiaddress} ${loc.poiname}`,
              latitude: loc.latlng.lat,
              longitude: loc.latlng.lng,
              ad_info: data.result.ad_info,
              address_component: data.result.address_component
            })
          }
        })
        .catch((err: any) => {
          console.log(err, "获取地理位置错误")
        })