vue2引入高德地图-实现自定义搜索框搜索数据
实现效果图:
1.安装高德地图插件
npm i @amap/amap-jsapi-loader --save-d
2.template模板部分 dialogWrap是自己封装的弹窗组件(根据el-dialog封装的组件)
-
<dialogWrap :visible.sync="show_"
-
width="800px"
-
top="10vh"
-
title="地址识别"
-
@confirm="getAddress">
-
<div class='map-wrap'>
-
<div id="container"></div>
-
<div class="search-wrap">
-
<!-- 搜索框 -->
-
<div class="search">
-
<el-input placeholder="请输入内容"
-
v-model="address"
-
class="input-with-select"
-
clearable>
-
<!-- @input="handleSearch" -->
-
<el-button slot="append"
-
icon="el-icon-search"
-
@click="handleSearch"></el-button>
-
</el-input>
-
</div>
-
<!-- 检索结果 -->
-
<div v-show="showResultFlag"
-
class="search-result">
-
<div v-for="(item, index) in searchResult"
-
class="item"
-
:key="index"
-
@click="reverseeocoding(item.location,item.name)">
-
<i class="el-icon-search fl mgr10" />
-
<div style="overflow:hidden;">
-
<div class="title">{{ item.name }}</div>
-
<span class="address ellipsis">{{ item.district item.address }}</span>
-
</div>
-
</div>
-
</div>
-
</div>
-
</div>
-
</dialogWrap>
3.js实现逻辑部分
-
<script>
-
import dialogWrap from "../dialog/dialogWrap";
-
import AMapLoader from "@amap/amap-jsapi-loader";
-
window._AMapSecurityConfig = {
-
securityJsCode: "自己申请的高德的安全秘钥",
-
};
-
const defaultInfo = {
-
addressAll: '', //详细地址
-
address: '', //搜索栏的title | 点击地图的街道号
-
province: '', // 省
-
city: '', // 市
-
district: '', // 区
-
street: '' // 街道
-
}
-
export default {
-
props: {
-
emitName: String,
-
show: {
-
type: Boolean,
-
default: false,
-
},
-
// 是否只显示到街道
-
isToStreet: {
-
type: Boolean,
-
default: false,
-
}
-
},
-
components: {
-
dialogWrap,
-
},
-
name: 'Map',
-
data () {
-
return {
-
AMap: null,
-
map: null,
-
zoom: 15,//地图放大缩小的值
-
address: '',//搜索地址
-
searchResult: [],//自动匹配地址结果
-
showResultFlag: false,
-
selectInfo: Object.assign({}, defaultInfo),
-
showInfo: false,
-
lngLat: '',
-
location: '',
-
}
-
},
-
computed: {
-
show_: {
-
get () {
-
return this.show
-
},
-
set (newVal) {
-
this.$emit('update:show', newVal)
-
},
-
},
-
},
-
watch: {
-
show_ (v) {
-
if (v) {
-
this.address = ''
-
this.showResultFlag = false
-
this.selectInfo = this.$options.data().selectInfo
-
this.initMap()
-
}
-
}
-
},
-
-
methods: {
-
initMap () {
-
AMapLoader.load({
-
key: "自己申请的高德的Web端开发者Key", // 申请好的Web端开发者Key,首次调用 load 时必填
-
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
-
plugins: [
-
"AMap.AutoComplete",
-
"AMap.PlaceSearch",
-
"AMap.Geocoder",
-
], // 需要使用的的插件列表
-
})
-
.then((AMap) => {
-
this.AMap = AMap
-
this.map = new AMap.Map("container", {
-
//设置地图容器id
-
zoom: 10, //初始化地图级别
-
center: [121.473667, 31.230525], //初始化地图中心点位置
-
});
-
this.auto = new AMap.AutoComplete(this.autoOptions);
-
this.placeSearch = new AMap.PlaceSearch({
-
map: this.map,
-
}); //构造地点查询类
-
-
this.map.on("click", (e) => {
-
this.showResultFlag = false
-
this.reverseeocoding(e.lnglat)
-
});
-
//添加固定点标记
-
let marker1 = new AMap.Marker({
-
position: new AMap.LngLat(121.473667, 31.230525), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
-
});
-
//添加点标记
-
this.map.add(marker1);
-
})
-
.catch((e) => {
-
console.log(e);
-
});
-
},
-
submit () {
-
this.showInfo = false
-
this.show_ = false
-
top.window.$bus.$emit(`get-address-map-data${this.emitName ? '-' this.emitName : ''}`, JSON.parse(JSON.stringify(this.selectInfo)))
-
},
-
handleSearch () {
-
let self = this
-
if (this.address != null) {
-
this.auto.search(this.address, function (status, res) {
-
console.log(status, res);
-
// 查询成功时,res返回对应匹配的POI信息
-
if (res && res.tips) {
-
self.searchResult = [...res.tips]
-
if (self.searchResult.length > 0) {
-
self.showResultFlag = true
-
} else {
-
self.showResultFlag = false
-
}
-
} else {
-
self.showResultFlag = false
-
}
-
});
-
this.map.setZoom(16, true, 1);
-
}
-
},
-
-
/** 逆地址解析
-
* @param {Object} point 经纬度
-
* @param {String} title 搜索栏下拉数据展示的title名称
-
*/
-
reverseeocoding (point, title) {
-
console.log(point);
-
this.map.clearMap() //清除地图上所有覆盖物point
-
let marker = new this.AMap.Marker({
-
position: new this.AMap.LngLat(point.lng, point.lat),
-
});
-
this.map.add(marker);//添加点标记
-
-
// key是高德"web服务"的key
-
let params = {
-
key: '高德"web服务"的key', //!!!一定要申请的是“web服务”的key哈 不然会提示你无效的
-
location: point.lng "," point.lat,
-
}
-
window
-
.$axios({
-
//这个接口本地调用要在vue.config.js 配置一下代理支持跨域 或者让后端做个方向代理的处理我们直接拿后端返回的接口
-
url: "https://restapi.amap.com/v3/geocode/regeo",
-
method: "get",
-
data: params,
-
params
-
})
-
.then(res => {
-
let data = res.data
-
if (data) {
-
let { addressComponent } = data.regeocode
-
let city = addressComponent.city.length != 0 ? addressComponent.city : addressComponent.province;//城市是省直辖县时返回为空 就直接显示省
-
let address = title ? title : addressComponent.streetNumber.street addressComponent.streetNumber.number //街道 门牌号
-
let addString = addressComponent.province city addressComponent.district addressComponent.township
-
this.selectInfo = {
-
addressAll: title ? addString title : addString address,
-
address: address,
-
province: addressComponent.province,
-
city: city,
-
district: addressComponent.district,
-
street: addressComponent.township,
-
}
-
this.showInfo = true
-
this.lngLat = `${point.lng},${point.lat}`
-
this.location = `${this.selectInfo.province},${this.selectInfo.city},${this.selectInfo.district},${this.selectInfo.street}`
-
if (!this.isToStreet) this.location = this.location ',' address
-
}
-
});
-
},
-
getAddress () {
-
this.show_ = false
-
top.window.$bus.$emit(`get-address-map-data${this.emitName ? '-' this.emitName : ''}`, JSON.parse(JSON.stringify(this.selectInfo)))
-
}
-
},
-
mounted () {
-
let self = this;
-
document.addEventListener("keyup", function (e) {
-
if (e.keyCode == 13 ) {
-
self.handleSearch();
-
}
-
});
-
}
-
}
-
</script>
4.style部分
-
<style lang="scss" scoped>
-
::v-deep .map-wrap {
-
position: relative;
-
.search {
-
width: 410px;
-
margin: 16px 0 0 16px;
-
}
-
.search-result {
-
width: 350px;
-
margin-left: 16px;
-
padding: 10px 0;
-
margin-top: 5px;
-
background: #fff;
-
max-height: 300px;
-
overflow-y: auto;
-
.item {
-
padding: 4px 12px;
-
&:hover {
-
background: #f5f7fa;
-
}
-
i.el-icon-search {
-
margin-top: 3px;
-
font-size: 14px;
-
}
-
.mgr10 {
-
margin-right: 10px;
-
}
-
.title {
-
text-overflow: ellipsis;
-
overflow: hidden;
-
font-size: 14px;
-
padding-bottom: 4px;
-
}
-
.address {
-
line-height: 1;
-
font-size: 12px;
-
color: #b4b4b4;
-
margin-bottom: 5px;
-
}
-
}
-
}
-
.bm-view {
-
height: 400px;
-
-
.map {
-
width: 100%;
-
height: 100%;
-
}
-
}
-
.search-wrap {
-
position: absolute;
-
top: 0;
-
left: 0;
-
}
-
.input-with-select {
-
width: 410px;
-
.el-input__inner:focus {
-
border-color: #d1d5dc;
-
}
-
}
-
}
-
::v-deep .BMap_noprint {
-
&.anchorTL {
-
top: 16px ;
-
right: 16px ;
-
}
-
}
-
::v-deep .BMap_cpyCtrl {
-
display: none;
-
}
-
::v-deep .anchorBL {
-
display: none;
-
}
-
::v-deep .el-input-group__append,
-
.el-input-group__prepend {
-
background-color: #3788ee;
-
.el-icon-search {
-
color: #fff;
-
font-weight: 600;
-
font-size: 16px;
-
}
-
}
-
#container {
-
width: 750px;
-
height: 400px;
-
}
-
</style>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhicjabh
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22