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.validate使用攻略 第五步 正则验证
Jul 01 Javascript
jquery的键盘事件修改代码
Feb 24 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
Javascript中typeof 用法小结
May 12 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
详解Javascript实践中的命令模式
May 05 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
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
js如何找出字符串中的最长回文串
2018/06/04 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
python实现一次创建多级目录的方法
2015/05/15 Python
Python 文件处理注意事项总结
2017/04/10 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
大学生的四年学习自我评价
2013/12/13 职场文书
环保建议书100字
2014/05/14 职场文书
2015年重阳节主持词
2015/07/04 职场文书
大学开学感言
2015/08/01 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
Python编程编写完善的命令行工具
2021/09/15 Python
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers