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类的封装及实现代码
Dec 02 Javascript
可以将word转成html的js代码
Apr 11 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
JavaScript中的this关键字介绍与使用实例
Jun 21 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 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
phpfans留言版用到的install.php
2007/01/04 PHP
php Smarty模板生成html文档的方法
2010/04/12 PHP
php把session写入数据库示例
2014/02/26 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
简单实现jQuery手风琴效果
2017/08/18 jQuery
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
python pillow模块使用方法详解
2019/08/30 Python
python关于调用函数外的变量实例
2019/12/26 Python
Python argparse模块使用方法解析
2020/02/20 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
C#面试题问题集
2016/04/02 面试题
师德学习感言
2014/01/31 职场文书
四年大学自我鉴定
2014/02/17 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
教师节倡议书
2014/08/30 职场文书
中秋节寄语2015
2015/03/24 职场文书
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python
java实现web实时消息推送的七种方案
2022/07/23 Java/Android