高德地图自带的,根据用户输入的地址,进行模糊搜索,用户进行选择定位,根据用户输入的半径进行范围限定
用vue
以及element-ui
实现的
页面:
<div class="delivery-scope" v-show="range === '2'">
<div id="location"></div>
<div class="search">
<el-input
id="tip-input"
size="small"
class="search-input"
placeholder="请输入选择地址"
prefix-icon="el-icon-search"
v-model="address"
:clearable="true"
@input="mapLocation"
>
</el-input>
<ul class="list" v-show="searchMsg">
<li v-for="(item, index) in list" :key="index" @click="selectAddress(item)">{{item.name}}</li>
</ul>
</div>
<div class="radius">
以选择的中心点为中心,半径
<el-input
size="small"
class="search-input"
placeholder="请输入区域半径"
prefix-icon="el-icon-search"
v-model="radius"
:clearable="true"
>
</el-input>
m
</div>
</div>
css,没给完全,只有下拉框部分的
#location {
width: 100%;
height: 100%;
margin-top: 50px;
}
.search {
position: absolute;
left: 10px;
top: -40px;
.el-input {
width: 400px;
}
.list {
width: 380px;
// height: 300px;
background: #ffffff;
padding: 0 10px;
color: #333;
font-size: 14px;
}
li {
line-height: 40px;
cursor: pointer;
}
}
js
data () {
return {
mapKey: '', // 地图密钥
address: '', // 地址
list: [], // 下拉框
searchMsg: false, // 下拉框显示隐藏
radius: '', // 半径
selectData: {}, // 存储选中的值
lnglat: {}, // 记录上次的经纬度
}
},
async mounted () {
await MP (this.mapKey)
this.map()
},
methods: {
selectAddress (val) {
this.selectData = val
this.address = `${val.district}${val.name}`
this.searchMsg = false
this.map({
center: [val.location.lng, val.location.lat]
})
if (JSON.stringify(this.lnglat) !== '{}') {
this.mark('remove', this.lnglat)
}
this.lnglat = val.location
this.mark('add', val.location)
},
map (params) {
map = new AMap.Map('location', {
...params,
resizeEnable: true,
zoom: 14
})
},
mapLocation () {
map.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], () => {
// 实例化Autocomplete
var autoOptions = {
city: '全国'
}
let autoComplete = new AMap.Autocomplete(autoOptions)
autoComplete.search(this.address, (status, result) => {
if (result && result.info === 'OK') {
this.list = result.tips
this.searchMsg = true
this.placeSearch(this.list.length && this.list[0].name)
}
})
})
},
placeSearch (value) {
let placeSearch = new AMap.PlaceSearch({
city: '全国',
map: map
})
placeSearch.search(value)
},
// 自己添加一个按钮,进行设置限制范围的操作
set () {
if (circle) {
circle.setMap(null)
}
circle = new AMap.Circle({
center: new AMap.LngLat(this.selectData.location.lng, this.selectData.location.lat), // 圆心位置
radius: this.radius, // 圆半径
borderWeight: 3,
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
strokeStyle: 'dashed',
strokeDasharray: [10, 10],
// 线样式还支持 'dashed'
fillColor: '#1791fc',
zIndex: 50
})
circle.setMap(map)
map.setFitView([circle])
},
// 添加标记
mark (type, value) {
if (type === 'remove') {
return map.remove(marker)
}
marker = new AMap.Marker({
position: new AMap.LngLat(value.lng, value.lat),
title: '北京'
})
map.add(marker)
},
}
网友评论