vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
作者:MrsTing 发布时间:2024-05-09 15:21:01
标签: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>
效果:
来源:https://blog.csdn.net/qq_40364610/article/details/104693010
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 本文实例讲述了Python线性方程组求解运算。分享给大家供大家参考,具体如下:求解线性方程组比较简单,只需要用到一个函数(scipy.lin
- 前言分享一下最近在学习Django过程中,遇到和解决的一些有趣的方法和问题一、Django是什么?Django也不用在过多的去介绍了。使用p
- 介绍当创建一个应用程序时,通常希望能够告诉你的应用程序如何做某事。有两种流行的方法来完成这项任务,你可以让应用程序接受命令行参数,或者创建一
- <?php function genpage(&$sql,$page_size=10) { global $pages,$su
- JS添加/删除事件在IE和支持dom浏览器分别为:attachEvent(ie中的添加事件),detachEvent(ie中的删除事件),a
- 0.引言利用python开发,借助Dlib库进行人脸识别,然后将检测到的人脸剪切下来,依次排序显示在新的图像上;实现的效果如下图所示,将图1
- 本文实例讲述了python基于windows平台锁定键盘输入的方法。分享给大家供大家参考。具体分析如下:pywin32中没有BlockInp
- 什么是机器学习 (Machine Learning) 机器学习是研究计算机怎样模
- 本文实例为大家分享了python微信好友删除的具体代码,供大家参考,具体内容如下#weixin.py#coding:utf-8# !/usr
- 下面写一个给大家做参考啊 create procedure sp_find(pfind varchar(500) BEGIN DECLAR
- 本文实例讲述了python求crc32值的方法。分享给大家供大家参考。具体实现方法如下:要想求CRC值,前面要import binascii
- dataclass简介dataclass的定义位于PEP-557,根据定义一个dataclass是指“一个带有默认值的可变的namedtup
- 疑问在调用socket的时候,我们会使用到listen()函数,里面有个参数叫backlog, 例如:socket.listen(5). 那
- 前言快要过年了,现在是工作的事情也不想干,学习也完全学不进去,关于xlsx的操作原本昨天已经写好了,不过悲催的是,忘记发布了直接关浏览器关闭
- 本文记录下自己使用Python实现一个简易的ORM模型使用到的知识1、元类2、描述器元类对于元类,我的理解其实也便较浅,大概是这个意思所有的
- 本文通过Python3+pyqt5实现了python Qt GUI 快速编程的16章的excise例子。#!/usr/bin/env pyt
- 前言喜马拉雅是专业的音频分享平台,汇集了有声小说,有声读物,有声书,FM电台,儿童睡前故事,相声小品,鬼故事等数亿条音频,我最喜欢听民间故事
- Java一直标榜一句老话叫“编写一次,到处运行(Write Once,Run Anywhere)”,CSS也差一点点做到了。但就是为了差的一
- 本文实例讲述了vuex实现的简单购物车功能。分享给大家供大家参考,具体如下:购物车组件<template> <
- bcp是SQL Server中负责导入导出数据的一个命令行工具,它是基于DB-Library的,并且能以并行的方式高效地导入导出大批量的数据