vue+高德地图实现地图搜索及点击定位操作


Posted in Javascript onSeptember 09, 2020

首先需要在index.html中引入高德地图的js链接,key需要换成你自己的key

最近有个需求是实现一个使用地图搜索定位的功能,在网上参考了下其他的文章,感觉不是很完善,自己整理了一下,可以实现点击定位,搜索列表定位等功能,可能有些地方是多余的,需要的自己看着改下

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=你的key"></script>

效果图如下

vue+高德地图实现地图搜索及点击定位操作

下边就是实现过程

html部分

<template>
  <div id="wrap">
    <div id="searchWrap">
      <div class="searchWrap">
        <input type="text" v-model="address" @input="search"><button @click="search">搜索</button>
      </div>
      <div id="result" class="amap_lib_placeSearch" v-show="hide">
        <div class="amap_lib_placeSearch_list amap-pl-pc" v-for="(item,index) in poiArr"
           @click="openMarkerTipById(index,$event)"
           @mouseout="onmouseout_MarkerStyle(index+1,$event)"
           :key="index">
          <div class="poibox" style="border-bottom: 1px solid #eaeaea">
            <div class="amap_lib_placeSearch_poi poibox-icon" :class="index==selectedIndex?'selected':''">{{index+1}}</div>
            <div class="poi-img" v-if="item.url" :style="'background-image:url('+item.url+'?operate=merge&w=90&h=56&position=5)'"
            ></div>
            <h3 class="poi-title" >
              <span class="poi-name">{{item.name}}</span>
            </h3>
            <div class="poi-info">
              <p class="poi-addr">地址:{{item.address}}</p>
              <p class="poi-tel">电话:{{item.tel}}</p>
            </div>
            <div class="clear"></div>
          </div>
        </div>
      </div>
    </div>
    <div id="iCenter"></div>
    <button class="btn" @click="fetAddressName">获取当前位置和名字</button>
  </div>
</template>

js部分

<script>
 export default {
  props:['newAddress','dataObj'],// 父组件传过来的地址和地址经纬度信息,
  data() {
   return {
    address:this.newAddress ? this.newAddress : '郑州',//保存地址的汉字名字
    map1: '',
    map:'',//保存地址的经纬度
    poiArr: [],//左边搜索出来的数组
    windowsArr: [],//信息窗口的数组
    marker: [],
    mapObj: "",//地图对象
    selectedIndex: -1,
    hide: false,
    clickType: 1,
    location:{
     P:this.dataObj.lat,
     Q:this.dataObj.lng,
    }
   };
  },
  mounted() {
   console.log(333,this.dataObj,this.location)
   this.mapInit()
   this.placeSearch(this.address)

  },
  methods: {
   showToast(address){
    this.placeSearch(address.address)
    console.log(444,address)
    this.location.P =address.lat
    this.location.Q =address.lng
    this.address = address.address
    let that = this;
    new AMap.InfoWindow({
     content:"<h3>" + '当前选中地址' + "</h3>" + that.address,
     size: new AMap.Size(300, 0),
     autoMove: true,
     offset: new AMap.Pixel(-4, -10)
    }).open(that.mapObj,that.location)
   },
   cancelSave(){
    eventBus.$emit('cancelSave')
   },
   saveAddress(){
    let addressName,location;
    if(this.clickType==1){
     let address = this.poiArr[this.selectedIndex]
     addressName = address.name+address.address;
     location = address.location
     console.log(address.name+address.address,address.location)

    }else if(this.clickType==2){
     console.log(this.address,this.map)
     addressName = this.address;
     location = this.map;
    }else if(this.clickType==3){
     console.log(this.address,this.map1)
     addressName = this.address;
     location = this.map1;
    }
    eventBus.$emit('saveAddress',[addressName,location])
   },
   // 经纬度转化为详细地址
   getAddress(){
    let that = this;
    AMap.plugin('AMap.Geocoder',function(){
     let geocoder = new AMap.Geocoder({
      radius: 100,
      extensions: "all"
     });
     geocoder.getAddress([that.map1.lng,that.map1.lat], function(status, result) {
      if (status === 'complete' && result.info === 'OK') {
       let address = result.regeocode.formattedAddress;
       console.log(result.regeocode);
       that.address = result.regeocode.formattedAddress;
       // that.placeSearch(that.address)
      }
     });
    })
   },
   // 地图点击事件
   testevent(){
    let that = this;
    this.clickType = 3
    // var map=new AMap.Map('iCenter');//重新new出一个对象,传入参数是div的id
    AMap.event.addListener(this.mapObj,'click',function (e) { //添加点击事件,传入对象名,事件名,回调函数
     that.map1 = e.lnglat;
     that.getAddress();
     setTimeout(()=>{
      new AMap.InfoWindow({
       content:"<h3>" + '当前选中地址' + "</h3>" + that.address,
       size: new AMap.Size(300, 0),
       autoMove: true,
       offset: new AMap.Pixel(-4, -10)
      }).open(that.mapObj,e.lnglat)
     },100)
    })
   },
   //创建一个map
   mapInit() {
    this.mapObj = new AMap.Map("iCenter", {
     resizeEnable: true,
     zoom: 10,
    })
    this.testevent();
   },
   //根据名字地址去搜索结果
   placeSearch(name) {
    let that = this;
    this.hide = true
    var MSearch;
    this.mapObj.plugin(
     ["AMap.PlaceSearch", "AMap.ToolBar", "AMap.Scale"],
     () => {
      this.mapObj.addControl(new AMap.ToolBar())
      this.mapObj.addControl(new AMap.Scale())
      MSearch = new AMap.PlaceSearch({
       //构造地点查询类
       city: that.address //城市
      });
      AMap.event.addListener(MSearch,"complete",this.keywordSearch_CallBack) //返回地点查询结果
      MSearch.search(name); //关键字查询
     }
    );
   },
   //结果的回调
   keywordSearch_CallBack(data) {
    console.log(111,data)
    var poiArr = data.poiList.pois
    var resultCount = poiArr.length
    this.poiArr = poiArr; //左边要渲染的数据
    for (var i = 0; i < resultCount; i++) {
     this.addmarker(i, poiArr[i])
     console.log(poiArr[i])
     this.poiArr[i].url = this.poiArr[i].photos? this.poiArr[i].photos[0]? this.poiArr[i].photos[0].url: "": ""
    }
    this.mapObj.setFitView()
   },
   //添加marker&infowindow
   addmarker(i, d) {
    var lngX = d.location.getLng();
    var latY = d.location.getLat();
    console.log(lngX,latY)
    var markerOption = {
     map: this.mapObj,
     position: new AMap.LngLat(lngX, latY)
    };
    var mar = new AMap.Marker(markerOption);
    this.marker.push(new AMap.LngLat(lngX, latY));
    var infoWindow = new AMap.InfoWindow({
     content: "<h3>" +'当前选中位置:'+ d.name + "</h3>" + this.TipContents(d.name, d.address),
     size: new AMap.Size(300, 0),
     autoMove: true,
     offset: new AMap.Pixel(0, -30)
    });
    console.log()
    this.windowsArr.push(infoWindow);
    var _this = this;
    var aa = (e) => {
     this.clickType = 2
     var obj = mar.getPosition();
     this.map = obj //这里保存的地址经纬度
     this.address = d.name + d.address //这里保存的是地址名字
     infoWindow.open(_this.mapObj, obj);
    }
    AMap.event.addListener(mar, "click", aa)
   },
   TipContents(name, address) {
    //窗体内容
    if (
     name == "" ||
     name == "undefined" ||
     name == null ||
     name == " undefined" ||
     typeof name == "undefined"
    ) {
     type = "暂无";
    }
    if (
     address == "" ||
     address == "undefined" ||
     address == null ||
     address == " undefined" ||
     typeof address == "undefined"
    ) {
     address = "暂无";
    }
    var str = `地址:${address}`
    return str
   },
   openMarkerTipById(pointid, event) {
    //根据id 打开搜索结果点tip
    this.clickType = 1
    event.currentTarget.style.background = "#CAE1FF";
    this.selectedIndex = pointid
    // this.map = this.marker[pointid]
    this.map1 = this.poiArr[pointid].location
    console.log(222,this.mapObj, this.marker[pointid])
    console.log(this.marker[pointid],this.poiArr[pointid])
    this.address = this.poiArr[pointid].address + this.poiArr[pointid].name
    this.windowsArr[pointid].open(this.mapObj, this.marker[pointid])


   },
   onmouseout_MarkerStyle(pointid, event) {
    //鼠标移开后点样式恢复
    event.currentTarget.style.background = ""
   },
   search() {
    this.windowsArr = []
    this.marker = []

    this.mapObj=''
    this.mapInit()
    this.placeSearch(this.address)
   }
  },
 };
</script>

css部分

<style lang="scss">
  #wrap{
    width:100%;
    display: flex;
    #iCenter {
      height: 600px;
      position: relative;
      display: flex;
      flex: 1;
    }
    #searchWrap{
      width:300px;
      position: relative;
      height:600px;
      .searchWrap{
        position: absolute;
        width:300px;
        z-index: 9;
        display: flex;
        align-items: center;
        input{
          width:260px;
          height:24px;
        }
        button{
          width:36px;
          height:28px;
        }
      }
      #result {
        width: 300px;
        position: absolute;
        top:30px;
        height: 570px;
        z-index: 8;
        overflow-y: scroll;
        border-right: 1px solid #ccc;
      }
    }
    .amap_lib_placeSearch {
      height: 100%;
      overflow-y: scroll;
      .poibox {
        border-bottom: 1px solid #eaeaea;
        cursor: pointer;
        padding: 5px 0 5px 10px;
        position: relative;
        min-height: 35px;
        .selected {
          background-image: url(https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png) !important;
        }
        &:hover {
          background: #f6f6f6;
        }
        .poi-img {
          float: right;
          margin: 3px 8px 0;
          width: 90px;
          height: 56px;
          overflow: hidden;
        }
        .poi-title {
          margin-left: 25px;
          font-size: 13px;
          overflow: hidden;
        }
        .poi-info {
          word-break: break-all;
          margin: 0 0 0 25px;
          overflow: hidden;
          p {
            color: #999;
            font-family: Tahoma;
            line-height: 20px;
            font-size: 12px;
          }
        }
        .poibox-icon {
          margin-left: 7px;
          margin-top: 4px;
        }
        .amap_lib_placeSearch_poi {
          background: url(https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png)
          no-repeat;
          height: 31px;
          width: 19px;
          cursor: pointer;
          left: -1px;
          text-align: center;
          color: #fff;
          font: 12px arial, simsun, sans-serif;
          padding-top: 3px;
          position: absolute;
        }
      }
    }
    .btn{
      position: fixed;
      bottom:20px;
      left:50%;
      padding:10px;
    }
  }
</style>

补充知识:vue-amap 高德地图定位 点击获取经纬度和具体地址的使用

官方文档地址: 点这里!!

vue+高德地图实现地图搜索及点击定位操作

经纬度获取只要通过点击事件就可以通过e.lnglat来获取,然后就是插件Geocoder使用了。在main.js中initAMapApiLoader中写入:AMap.Geocoder,注意 官方文档中有提示:

vue+高德地图实现地图搜索及点击定位操作

所以插件中使用的依然是AMap,与导入名无关

vue+高德地图实现地图搜索及点击定位操作

不然会报错,Geocoder无法使用。

定位文档 照着文档写就行 注意在main.js中注册AMap.Geolocation插件,

另外使用到地图的.vue页面 不能使用scoped对样式进行局域化。

以上这篇vue+高德地图实现地图搜索及点击定位操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
JQuery CSS样式控制 学习笔记
Jul 23 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
JavaScript实现两个数组的交集
Mar 25 Javascript
vue实现几秒后跳转新页面代码
Sep 09 #Javascript
JS异步宏队列微队列原理详解
Sep 09 #Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 #Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 #Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 #Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 #Javascript
JavaScript代码简化技巧实例解析
Sep 09 #Javascript
You might like
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
Python学习资料
2007/02/08 Python
python利用hook技术破解https的实例代码
2013/03/25 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
python使用psutil模块获取系统状态
2016/08/27 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
python 中xpath爬虫实例详解
2019/08/26 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
Python Selenium参数配置方法解析
2020/01/19 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
几个常见的软件测试问题
2016/09/07 面试题
小车司机岗位职责
2013/11/25 职场文书
医药销售自荐书
2014/05/29 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
大学生受助感言
2015/08/01 职场文书
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python
SSM VUE Axios详解
2021/10/05 Vue.js
python神经网络Xception模型
2022/05/06 Python