vue项目使用高德地图的定位及关键字搜索功能

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将是该事件的thisconst _this = thisAMap.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将是该事件的thisconst _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 = thisAMap.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项目中接入百度地图并定位当前城市,更深层次的内容稍后有空整理. 可能还有更牛的实现方案,目前我这里记录的是我自己跑通的一个版本,希望对你有所帮助,仅供参考. Vue项目 ...
vue项目使用高德地图定位当前地址
vue项目使用高德地图定位当前地址一.在项目中安装vue-amap插件二.页面代码三.data数据一.在项目中安装vue-amap插件 1.最终效果 2.安装命令 npm install vu ...
vue项目使用高德地图
vue项目使用高德地图-部分功能介绍在此做个笔记,引入方式使用了高德2.0 loadsh的加载方式 1.引入高德地图方式-NPM npm i @amap/amap-jsapi-loader --sa ...
vue项目引入高德地图(定位、搜索、经纬度解析地址)
1.npm 安装 npm install vue-amap --save 2.main.js文件引入vue-amap import VueAMap from 'vue-amap' Vue.use(Vu ...
VUE项目使用高德地图进行精准定位高德地图API
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.高德地图API 二.使用步骤 1.引入key 2.创建方法总结前言提示:以下是本篇文章正文内容,下面案例可供 ...
vue项目中高德地图根据城市名定位到城市中心位置，并在该位置做标记
先看效果: 首先记得引入高德地图,并且要带上&plugin=AMap.DistrictSearch,如下: <script type="text/javascript" ...
vue项目中高德地图的注册及使用
1.创建应用点击进入高德地图个人开发的注册:https://lbs.amap.com/dev/id/personal 然后可以登录支付宝进行认证. 注册完毕之后,点击右上角的控制台点击右上角的创建 ...
Vue项目引用高德地图实现车辆轨迹回放
一.引入高德地图jsApi 在项目入口index.html页面以cdn方式引入 <script src="https://webapi.amap.com/maps?v=1.4.15&a ...
vue项目引入高德地图
简单叙述首先需要了解一个小细节: 就是定位获取到的坐标,直接在地图组件或者在位置标注中使用的时候,位置可能有一定的偏差. 还有一个点需要注意的就是: 微信开发者工具的定位不准确,无法获取想要的位置. ...

vue项目使用高德地图的定位及关键字搜索功能

vue项目使用高德地图的定位及关键字搜索功能相关推荐

最新文章

热门文章