vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)


Posted in Javascript onMarch 07, 2020

1.首先在index.html引入高德地图的秘钥。如图:

vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)

注意:如果使用关键字搜索功能要加上 plugin=AMap.Autocomplete,AMap.PlaceSearch,否则功能无法使用,并会报错
2. 定位功能,代码如下:

const map = new AMap.Map(this.$refs.container, {
    resizeEnable: true
   }) // 创建Map实例
   const options = {
    'showButton': true, // 是否显示定位按钮
    'buttonPosition': 'LB', // 定位按钮的位置
    'buttonOffset': new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离
    'showMarker': true, // 是否显示定位点
    'showCircle': true, // 是否显示定位精度圈
    'circleOptions': {// 定位精度圈的样式
     'strokeColor': '#0093FF',
     'noSelect': true,
     'strokeOpacity': 0.5,
     'strokeWeight': 1,
     'fillColor': '#02B0FF',
     'fillOpacity': 0.25
    },
    zoomToAccuracy: true // 定位成功后是否自动调整地图视野到定位点
   }
   AMap.plugin(['AMap.Geolocation'], function() {
    const geolocation = new AMap.Geolocation(options)
    map.addControl(geolocation)
    geolocation.getCurrentPosition()
   })
   //下面是点击地图时加入mark。注意:要在绑定事件前记录this,否则在绑定的回调方法中使用this将是该事件的this
   const _this = this
   AMap.event.addListener(map, 'click', function(e) {
    map.clearMap() // 清除地图上所有添加的覆盖物
    new AMap.Marker({
     position: e.lnglat,
     map: map
    })
    _this.handleMap(e.lnglat.getLng(), e.lnglat.getLat())
   })

3.关键字搜索功能
html部分代码(注意ref,id,class的名字要和官网保持一致,否则可能出不来想要的效果):

<template>
 <div class="map-chart">
  <div id="container" ref="container" />
  <div id="myPageTop">
   <table>
    <tr>
     <td>
      <label>请输入关键字:</label>
     </td>
    </tr>
    <tr>
     <td>
      <input id="tipinput">
     </td>
    </tr>
   </table>
  </div>
 </div>
</template>

script代码:

export default {
 name: 'Map',
 props: [],
 data() {
  return {
   placeSearch: null
  }
 },
 mounted() {
  this.mapInit()
 },
 methods: {
  mapInit() {
   const map = new AMap.Map(this.$refs.container, {
    resizeEnable: true
   }) // 创建Map实例
   const options = {
    'showButton': true, // 是否显示定位按钮
    'buttonPosition': 'LB', // 定位按钮的位置
    'buttonOffset': new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离
    'showMarker': true, // 是否显示定位点
    'showCircle': true, // 是否显示定位精度圈
    'circleOptions': {// 定位精度圈的样式
     'strokeColor': '#0093FF',
     'noSelect': true,
     'strokeOpacity': 0.5,
     'strokeWeight': 1,
     'fillColor': '#02B0FF',
     'fillOpacity': 0.25
    },
    zoomToAccuracy: true // 定位成功后是否自动调整地图视野到定位点
   }
   //注意:要在绑定事件前记录this,否则在绑定的回调方法中使用this将是该事件的this
   const _this = this
   // 输入提示
   const autoOptions = {
    input: 'tipinput'
   }
   const auto = new AMap.Autocomplete(autoOptions)
   this.placeSearch = new AMap.PlaceSearch({
    map: map
   }) // 构造地点查询类
   AMap.event.addListener(auto, 'select', this.select)// 注册监听,当选中某条记录时会触发
   //点击搜索出的mark点事件
   AMap.event.addListener(this.placeSearch, 'markerClick', function(e) {
    _this.$emit('bMapDate', e.data.location.lng, e.data.location.lat)
   })
  },
  select(e) {
   this.placeSearch.setCity(e.poi.adcode)
   this.placeSearch.search(e.poi.name) // 关键字查询查询
  },
  handleMap(o, a) {
   this.$emit('bMapDate', o, a)
  }
 }
}
</script>

整体完成代码:

<template>
 <div class="map-chart">
  <div id="container" ref="container" />
  <div id="myPageTop">
   <table>
    <tr>
     <td>
      <label>请输入关键字:</label>
     </td>
    </tr>
    <tr>
     <td>
      <input id="tipinput">
     </td>
    </tr>
   </table>
  </div>
 </div>
</template>

<script>
export default {
 name: 'Map',
 props: [],
 data() {
  return {
   placeSearch: null
  }
 },
 mounted() {
  this.mapInit()
 },
 methods: {
  mapInit() {
   const map = new AMap.Map(this.$refs.container, {
    resizeEnable: true
   }) // 创建Map实例
   const options = {
    'showButton': true, // 是否显示定位按钮
    'buttonPosition': 'LB', // 定位按钮的位置
    'buttonOffset': new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离
    'showMarker': true, // 是否显示定位点
    'showCircle': true, // 是否显示定位精度圈
    'circleOptions': {// 定位精度圈的样式
     'strokeColor': '#0093FF',
     'noSelect': true,
     'strokeOpacity': 0.5,
     'strokeWeight': 1,
     'fillColor': '#02B0FF',
     'fillOpacity': 0.25
    },
    zoomToAccuracy: true // 定位成功后是否自动调整地图视野到定位点
   }
   AMap.plugin(['AMap.Geolocation'], function() {
    const geolocation = new AMap.Geolocation(options)
    map.addControl(geolocation)
    geolocation.getCurrentPosition()
   })
   const _this = this
   AMap.event.addListener(map, 'click', function(e) {
    map.clearMap() // 清除地图上所有添加的覆盖物
    new AMap.Marker({
     position: e.lnglat,
     map: map
    })
    _this.handleMap(e.lnglat.getLng(), e.lnglat.getLat())
   })

   // 输入提示
   const autoOptions = {
    input: 'tipinput'
   }
   const auto = new AMap.Autocomplete(autoOptions)
   this.placeSearch = new AMap.PlaceSearch({
    map: map
   }) // 构造地点查询类
   AMap.event.addListener(auto, 'select', this.select)// 注册监听,当选中某条记录时会触发
   AMap.event.addListener(this.placeSearch, 'markerClick', function(e) {
    _this.$emit('bMapDate', e.data.location.lng, e.data.location.lat)
   })
  },
  select(e) {
   this.placeSearch.setCity(e.poi.adcode)
   this.placeSearch.search(e.poi.name) // 关键字查询查询
  },
  handleMap(o, a) {
   this.$emit('bMapDate', o, a)
  }
 }
}
</script>

<style scoped>
  .map-chart{
    position: relative;
    margin-bottom:15px;
    width: 100%;
    height: 400px;
    border: 1px #dddddd solid;
  }
  /deep/ .amap-logo,/deep/ .amap-copyright {
    display: none!important;
  }

  #container {
    margin-bottom:15px;
    width: 100%;
    height: 400px;
    border: 1px #dddddd solid;
    z-index: 99999999;
  }

  .button-group {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 12px;
    padding: 10px;
  }

  .button-group .button {
    height: 28px;
    line-height: 28px;
    background-color: #0D9BF2;
    color: #FFF;
    border: 0;
    outline: none;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
    margin-bottom: 4px;
    cursor: pointer;
  }
  .button-group .inputtext {
    height: 26px;
    line-height: 26px;
    border: 1px;
    outline: none;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
    margin-bottom: 4px;
    cursor: pointer;
  }
  #tip {
    background-color: #fff;
    padding-left: 10px;
    padding-right: 10px;
    position: absolute;
    font-size: 12px;
    right: 10px;
    top: 20px;
    border-radius: 3px;
    border: 1px solid #ccc;
    line-height: 30px;
  }
  .amap-info-content {
    font-size: 12px;
  }
  #myPageTop {
    position: absolute;
    top: 5px;
    right: 10px;
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ccc;
    margin: 10px auto;
    padding:6px;
    font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";
    font-size: 14px;
    z-index: 99999999;
  }
  #myPageTop label {
    margin: 0 20px 0 0;
    color: #666666;
    font-weight: normal;
  }
  #myPageTop input {
    width: 170px;
  }
  #myPageTop .column2{
    padding-left: 25px;
  }
</style>

由于我在项目中使用了dialog,搜索出来的结果会在蒙版后面显示,去掉scope和加/deep/、>>>都没用,最后在index.html加样式。代码如下:

<style type="text/css">
  .amap-sug-result {
   z-index: 2999!important;
  }
 </style>

效果:

vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)

以上就是踩了无数坑总结出来的经验。。。

到此这篇关于vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)的文章就介绍到这了,更多相关vue 高德地图定位搜索内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
Vue响应式原理详解
Apr 18 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
JS实现的数组去除重复数据算法小结
Nov 17 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
vue实现百度搜索功能
Dec 28 Javascript
VUE实现图片验证码功能
Nov 18 Javascript
JS数组方法slice()用法实例分析
Jan 18 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 Javascript
js实现模拟购物商城案例
May 18 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 #Javascript
Vue实现手机扫描二维码预览页面效果
May 28 #Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 #Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 #Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 #Javascript
js实现选项卡效果
Mar 07 #Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 #Javascript
You might like
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
php实现登录页面的简单实例
2019/09/29 PHP
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
Python读大数据txt
2016/03/28 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
python 操作hive pyhs2方式
2019/12/21 Python
python ssh 执行shell命令的示例
2020/09/29 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
毕业生医学检验求职信
2013/10/16 职场文书
运动会解说词50字
2014/01/18 职场文书
乡镇办公室工作决心书
2014/03/11 职场文书
学校志愿者活动总结
2014/06/27 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
python实现socket简单通信的示例代码
2021/04/13 Python
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript