专栏首页前端之攻略Vue中使用高德地图POI搜索

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指向会有问题。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 含有echart 图表的报表打印 原

    最近需要打印含有echart图表的报表,采用jqprint插件打印,直接用jqprint打印echart的图不显示,这里需要借助img 来实现

    tianyawhl
  • css position:static 的使用

    relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可以通过z-index进行层次...

    tianyawhl
  • 高德地图画线、清除线与改变颜色

    画线-------是通过创建 new AMap.Polyline实例 并添加到地图上 polyline.setMap(this.GDMap);

    tianyawhl
  • 制作高大上的Canvas粒子动画

    制作粒子动画效果要解决两个问题:一个是粒子动画轨迹,另外一个是粒子执行动画的时机。 首先来看下我们准备要做的粒子动画效果是怎么样的~ 是这样(粒子漂浮): ...

    练小习
  • 第二篇:JVM内存结构和Java内存模型

    其实并不想写这一篇文章,原因是这个东东只要是Java开发者都知道的内容,大部分都是偏理论性的,但是为了方便后续文章的开展,所以还是着手描写一下我个人对JVM的了...

    Liusy
  • BAT面试必问题系列:深入详解JVM 内存区域及内存溢出分析

    在JVM的管控下,Java程序员不再需要管理内存的分配与释放,这和在C和C++的世界是完全不一样的。所以,在JVM的帮助下,Java程序员很少会关注内存泄露和内...

    Java搬砖工人
  • 我也想从零开始了解一下JVM虚拟机

    采用最原始的方式运行Java文件,打开任务管理器我们可以看到一个java.exe,是的,这个就是Java虚拟机,当10秒过后,main方法执行结束,java.e...

    用户7386338
  • JVM内存模型

    java404
  • JVM虚拟机内存

    春哥大魔王
  • 大众点评CAT搭建和springBoot集成Cat

    会提示输入mysql数据库的连接信息,账户和密码。可能会提示缺少\data\appdatas\cat 目录,手动添加就可以了。

    用户1499526

扫码关注云+社区

领取腾讯云代金券