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 相关文章推荐
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
原生js轮播特效
May 18 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 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
VFP与其他应用程序的集成
2006/10/09 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
新鲜出炉的js tips提示效果
2011/04/03 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
python实现代码行数统计示例分享
2014/02/10 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
python实现按首字母分类查找功能
2019/10/31 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
如何提高python 中for循环的效率
2020/04/15 Python
Python实现代码块儿折叠
2020/04/15 Python
Python类及获取对象属性方法解析
2020/06/15 Python
Hotels.com越南:酒店预订
2019/10/29 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
会计专业毕业生自我评价
2013/09/25 职场文书
安全责任书怎么写
2014/07/28 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
围城读书笔记
2015/06/26 职场文书
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL