Vue中使用高德地图POI搜索

创建 loadMap.js

/**
 * 动态加载高德地图
 *
 * @export
 * @param {*} key 高德地图key
 * @param {*} plugins 高德地图插件
 * @param {string} [v='1.4.14'] 高德地图版本
 * @returns
 */
export default function loadMap(key, plugins, v = '1.4.14') {
    return new Promise(function(resolve, reject) {
        if (typeof AMap !== 'undefined') {
            // eslint-disable-next-line no-undef
            resolve(AMap)
            return true
        }
        window.onCallback = function() {
            // eslint-disable-next-line no-undef
            resolve(AMap)
        }
        let script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = `https://webapi.amap.com/maps?v=${v}&key=${key}&plugin=${plugins}&callback=onCallback`
        script.onerror = reject
        document.head.appendChild(script)
    })
}

在.vue页面中引入loadMap.js

import loadMap from "../assets/js/loadMap";

html模板

<template>
  <div>
    <div id="GDMap" style="height:400px;"></div>
    <div id="panel"></div>
    <input id="tipinput" type="text" />
  </div>
</template>

 用到的2个插件  "AMap.Autocomplete", "AMap.PlaceSearch",

<script>
import loadMap from "../assets/js/loadMap";
export default {
  name: "barChart",
  data() {
    return {
      inputContent: "",
      // 地图实例
      GDMap: null,
      // 加载的一些插件
      // 更多参考：https://lbs.amap.com/api/javascript-api/guide/abc/plugins#plugins
      plugins: [
        "AMap.Autocomplete",
        "AMap.PlaceSearch",
        "AMap.OverView",
        "AMap.MouseTool",
        "AMap.PolyEditor",
        "AMap.RectangleEditor",
        ="AMap.DistrictLayer",
        "AMap.CustomLayer"
      ],
      // key
      key: "3862bb74758c8d185100ed5df030949d",
      //key: "64c880093eda5bd293e4d5c324e5131b", Autocomplete没有效果
      // 地图版本
      v: "1.4.4"
    };
  },
  mounted() {
    loadMap(this.key, this.plugins, this.v)
      .then(AMap => {
        this.GDMap = new AMap.Map("GDMap", {
          zoom: 10
          //center: [119.947, 31.7728]
        });
        this.GDMap.on("complete", () => {
          console.log("completed");
          var auto = new AMap.Autocomplete({
            input: "tipinput"
          });

          var placeSearch = new AMap.PlaceSearch({
            map: this.GDMap
          }); //构造地点查询类
          AMap.event.addListener(auto, "select", select); //注册监听，当选中某条记录时会触发
          AMap.event.addListener(placeSearch,"markerClick",(e)=>{
            console.log(e.data.location.lng,e.data.location.lat) // 经纬度
          })
          function select(e) {
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name); //关键字查询查询
          }
        });
      })
      .catch(() => {
        console.log("地图加载失败！");
      });
  },
  methods: {}
};
</script>
<style>
#panel {
  position: absolute;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 280px;
}
</style>

遇到的问题：有的key会使输入提示无效，换个key 就好了。官网的例子回调函数要改成箭头函数，否则this指向会有问题。

来源：oschina

链接：https://my.oschina.net/u/2612473/blog/4325720