效果截图
image.png
<!----地图组件--->
<!---
组件返回数据的方法setSite
组件 position数据类型 = {
r_address:"详细地址"，
address:"地址",
lng:lng,
lat:lat
}
---->
<template>
<div id="boxapp">
<div id="containerBox"></div>
<!-- <div id="panel"></div> -->
<div id="myPageTop">
<div class="tipcen">
<div class="input">
<el-input size="mini" v-model="value" @input="query" @blur="blur" @focus="focus" placeholder="请输入关键字" style="width:290px"></el-input>
<el-button size="mini" type="success" @click="query('init')">搜索</el-button>
</div>
<!-- 搜索结果 -->
<div :class="open?'tipList active':'tipList'" v-if="value">
<div class="scroll" v-if="list.length>0">
<div class="scroll-centent">
<div class="tip-li" v-for="(item,index) in list" :key="index" @click="select(item)">
<div class="city">{{index+1}} . {{item.pname}}{{item.cityname}}{{item.adname}}</div>
<div class="pro">{{item.name}}{{item.address}}</div>
</div>
</div>
<div class="pagination">
<el-pagination mini @current-change="sizeChange" :page-size="params.pageSize" :pager-count="5" layout="prev, pager, next" :total="total"></el-pagination>
</div>
</div>
<div class="node" v-else>暂无搜索结果</div>
</div>
</div>
</div>
<div class="posMsg" v-if="row.lng">
<div class="lng flex"><div class="label">经度</div> <div class="value">{{row.lng}}</div></div>
<div class="lng flex"><div class="label">纬度</div> <div class="value">{{row.lat}}</div></div>
<div class="lng flex">
<div class="label">地址</div>
<div class="value">{{row.address}}</div>
</div>
<div class="lng flex">
<div class="label">详细地址</div>
<div class="value">{{row.r_address}}</div>
</div>
<div class="btn">
<el-button size="mini" style="width:120px" type="primary" @click="setSite">选择位置</el-button>
<div style="padding-top:10px;">
<el-button size="mini" style="width:120px" @click="cancel">取消</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
import rote from "@/assets/rote.png";
export default {
name: 'mapSite',
props:["position"],
data(){
return {
mapBox:"",
row:{},
marker:"",
flgs:false,
total:10,
params:{
pageIndex:1,
pageSize:10
},
timer:null,
timer1:null,
value:"",
list:[],
open:false,
placeSearch:"",
pos:{},
}
},
destroyed(){
//this.map.destroy();
},
methods:{
//取消
cancel(){
this.$emit("cancel",false);
},
//选择位置
setSite(){
this.$emit("setSite",this.row);
},
//标记中心点
rate(center){
//"116.45274", "39.79351"
var than = this;
if(this.marker){
this.marker.setPosition([center.lng,center.lat]);
}else{
this.marker = new AMap.Marker({
content:"<img style='width:30px;height:46px;' src='"+rote+"'/>",
position: this.value?[center.lng,center.lat]:[than.position.lng,than.position.lat],
offset: new AMap.Pixel(-15,-46)
});
this.marker.setMap(this.mapBox);
}
if(this.value){
than.mapBox.setZoomAndCenter(40,new AMap.LngLat(center.lng,center.lat));
}else{
than.mapBox.setZoomAndCenter(40,new AMap.LngLat(than.position.lng,than.position.lat));
}
},
moveInit(center){
var than = this;
if(this.marker){
this.marker.setPosition([center.lng,center.lat]);
}else{
this.marker = new AMap.Marker({
content:"<img style='width:30px;height:46px;' src='"+rote+"'/>",
position: [center.lng,center.lat],
offset: new AMap.Pixel(-15,-46)
});
this.marker.setMap(this.mapBox);
}
AMap.plugin('AMap.Geocoder', function() {
var geocoder = new AMap.Geocoder({
// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
city: '010'
})
var lnglat = [center.lng,center.lat];
geocoder.getAddress(lnglat, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
// result为对应的地理位置详细信息
var pro = result.regeocode.addressComponent;
than.row = {
r_address:pro.province+pro.city+pro.district+pro.street+pro.streetNumber,
address:result.regeocode.formattedAddress,
lng:center.lng,
lat:center.lat
};
//than.$emit("setSite",than.row);
}
})
})
},
focus(){
this.open = true;
},
blur(){
setTimeout(() => {
this.mapBox.on('mapmove',this.move);
}, 500);
},
move(){
var than = this;
var center = than.mapBox.getCenter();
than.moveInit(center);
},
//搜索
query(name){
var than = this;
this.mapBox.off("mapmove",than.move);
than.list = [];
if(than.value){
than.placeSearch.search(than.value,function(status, result){
than.open = true;
if(status ==='complete'&&result.info ==='OK'){
than.list = result.poiList.pois;
if(than.list.length>0&&than.list){
if(than.list[0]&&than.value){
than.queryCancel(than.list[0]);
}
than.total = result.poiList.count-0;
}else{
if(than.position&&than.position.lng){
than.row = than.position;
than.rate(than.row);
}else{
than.mapBox.setZoomAndCenter(12,[than.pos.lng,than.pos.lat]);
than.moveInit(than.pos);
}
}
}else{
if(than.position&&than.position.lng){
than.row = than.position;
than.rate(than.row);
}else{
than.mapBox.setZoomAndCenter(12,[than.pos.lng,than.pos.lat]);
than.moveInit(than.pos);
}
}
if(name=='init'){
setTimeout(() => {
console.log("绑定");
than.mapBox.on('mapmove',than.move);
}, 500);
}
})
}else{
setTimeout(() => {
if(than.position&&than.position.lng){
than.row = than.position;
than.rate(than.row);
}else{
than.mapBox.setZoomAndCenter(12,[than.pos.lng,than.pos.lat]);
than.moveInit(than.pos);
}
}, 300);
if(name=='init'){
setTimeout(() => {
than.mapBox.on('mapmove',than.move);
}, 500);
}
}
},
queryCancel(e){
var location = e.entr_location?e.entr_location:e.location;
this.rate(location);
this.row = {
r_address:e.pname+e.cityname+e.adname+e.address,
address:e.name,
lng:location.lng,
lat:location.lat
};
},
select(e){
this.queryCancel(e);
this.open = false;
},
sizeChange(val){
this.placeSearch.setPageIndex(val);
this.query();
}
},
mounted(){
var than = this;
//地图加载
this.mapBox = new AMap.Map("containerBox", {
resizeEnable: true,
zoom: 12
});
this.placeSearch = new AMap.PlaceSearch({
map: this.mapBox,
extensions:"all",
city:"010", //城市
...this.params
//panel:"panel"
}); //构造地点查询类
setTimeout(() => {
this.mapBox.on('mapmove', than.move);
}, 500);
if(this.position&&this.position.lng){
this.row = this.position;
than.rate(this.row);
}else{
than.pos = than.mapBox.getCenter();
than.moveInit(than.pos);
}
//注册监听，当选中某条记录时会触发
AMap.event.addListener(than.placeSearch,"markerClick", function(e){
than.moveInit({
lng:e.data.location.lng,
lat:e.data.location.lat
})
than.mapBox.setZoomAndCenter(12,[e.data.location.lng,e.data.location.lat]);
})
this.mapBox.on('click',function(){
than.open = false;
});
}
}
</script>
<style scoped lang="scss">
#boxapp{
width: 100%;
height: calc(100% - 115px);
position: relative;
#containerBox{
width: 100%;
height: 100%;
margin: 0 auto;
overflow: hidden;
background: #f5f5f5;
.search-box{
margin-bottom: 10px;
}
}
.posMsg{
height: 115px;
background: #fff;
overflow: hidden;
border-top:1px solid #ecf5ff;
padding: 10px;
box-sizing: border-box;
left: 0;
font-size: 12px;
position:relative;
.btn{
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.lng{
line-height: 20px;
color: #999;
span{
color: #0067FF;
}
}
.flex{
display: flex;
.label{
width: 60px;
text-align: right;
padding-right: 10px;
}
.value{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
width: calc(100% - 200px);
color: #222;
font-size: 12px;
font-weight: 900;
}
}
}
#myPageTop{
position: absolute;
left: 10px;
top: 0;
background: #fff;
width: 360px;
padding: 5px;
box-shadow: 0 0 7px 0px rgba(0,0,0,0.5);
.tipcen{
position: relative;
padding: 10px 0;
}
.tipList{
width: 290px;
background: rgba(255,255,255,0.95);
position: absolute;
top: 50px;
box-shadow: 0 0 8px -2px rgba(0,0,0,0.3);
border-radius: 5px;
transform: translateY(0);
transition: all 0.5s;
opacity: 0;
padding: 10px 0;
display: none;
z-index: 999999;
.scroll{
.scroll-centent{
max-height: 360px;
height: auto;
overflow: auto;
}
.pagination{
text-align: center;
border-top: 1px solid #f5f5f5;
}
}
.tip-li{
padding: 10px;
line-height: 20px;
font-size: 13px;
cursor: pointer;
border-bottom: 1px solid #DCDFE6;
.city{
color: #000;
font-weight: 900;
}
.pro{
color: #409EFF;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
}
}
.tipList.active{
transform: translateY(20);
opacity: 1;
display: block;
}
}
.node{
text-align: center;
color: #ccc;
line-height: 60px;
}
>>> .el-pager li{
min-width: 30px;
}
}
</style>
引用
<!-- 地图定位 -->
<el-dialog
:close-on-click-modal="false"
title="选择位置"
:visible.sync="dialogVisible"
v-dialogDrag
width="1000px"
center
top="20px"
:before-close="handleClose">
<div style="width:100%;height:700px">
<mapSite @setSite="setlocat" :position="position" v-if="dialogVisible" @cancel="dialogVisible=false"></mapSite>
</div>
<!-- <span slot="footer" class="dialog-footer">
<el-button type="primary" size="mini" @click="dialogVisible = false">确 定</el-button>
</span> -->
</el-dialog>
<!-- position = {
r_address:"详细地址"，//默认空
address:"地址",//默认空
lng:lng,//默认空
lat:lat//默认空
}
--->
网友评论