蝙蝠岛资源网 Design By www.hbtsch.com
1.首先在index.html引入高德地图的秘钥。如图:
注意:如果使用关键字搜索功能要加上 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>
效果:
以上就是踩了无数坑总结出来的经验。。。
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年12月24日
2024年12月24日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]