vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
更新时间：2020年03月07日 12:33:56 作者：MrsTing
这篇文章主要介绍了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将是该事件的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项目中使用svg图标的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2022-04-04
这篇文章主要介绍了vue中echarts3.0自适应，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
vue中$nexttick,$set,$forceupdate的区别
本文主要介绍了vue中$nexttick,$set,$forceupdate的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要介绍了vue中数据绑定值(字符串拼接)的几种实现方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
在 Vue Router 4 中,嵌套路由是一种非常重要的功能,它允许我们创建更复杂的 UI 结构,同时保持路由的清晰和易于管理,这篇文章主要介绍了Vue Router4 嵌套路由,需要的朋友可以参考下2024-04-04
学习 Vue 的时候觉得样式绑定很简单，但是使用的时候总是容易搞晕自己。这篇文章主要介绍了Vue 样式绑定的实现方法，感兴趣的小伙伴们可以参考一下2019-01-01
最近一直在做一个vue移动端商城的实战,期间遇到一个小小的问题,值得一说,下面这篇文章主要给大家介绍了关于vue父组件与子组件之间数据交互的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了快速解决element的autofocus失效问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
我们在平时做业务的时候,父子组件通信会经常用到ref,这篇文章主要给大家介绍了关于vue3循环设置ref并获取的解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-02-02
这篇文章主要为大家介绍了代理模式在vue中的使用示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
最新评论