vue+elementui实现百度地图关键词搜索,但不用地图

vue+elementui实现百度地图关键词搜索,但不用地图,第1张

项目有个需求,在d窗内需要一个输入框,输入地址调用百度地图api进行搜索,但是不需要用到地图。

在百度上找的资料全是需要地图的,这里提供一个解决方法,希望适用。

这是html


    
      
    
  

这是js

name: "MapAddress",
  data() {
    return {
      address: "",
      mapAddress: [],
    };
  },
  props: {
    city: {
      type: String,
      default: "长沙",
    },
    placeholder: {
      type: String,
      default: "请输入详细地址",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    value: {
      type: String,
      default: "",
    },
  },
watch: {
    value: {
      handler(val) {
        if (val != undefined && val != "") {
          this.address = val;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    async toSearch(str, cb) {
      let that = this;
      await this.baidu_api_point(str, callbackData);
      function callbackData(data) {
        that.mapAddress = data.results;
        cb(that.mapAddress);
      }
    },
    handleSelect(item) {
      this.$emit("callbackMap", item.address);
    },
    clear() {
      this.$emit("callbackMap", "");
    },

这个解决跨域

baidu_api_point(path, callback) {
      //跨域调用百度api
      //注意这里挂载在了window上
      window.callbackData = callback;
      let url = `https://api.map.baidu.com/place/v2/search?query=${path}®ion=${this.city}&page_size=20&output=json&ak=GwgzHwgqUGzFNZpRClR63mzn93RH0clK&callback=callbackData`;
      let fetchJsonp = function (url) {
        let body = document.getElementsByTagName("body")[0];
        //插入一个script
        let script = document.createElement("script");
        script.setAttribute("src", url);
        script.setAttribute("id", "mapApi");
        body.appendChild(script);
      };
      fetchJsonp(url);
   },

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/943071.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-18
下一篇 2022-05-18

发表评论

登录后才能评论

评论列表(0条)

保存