<template>
<div class="map">
<div id="container"></div>
<div class="search-map">
<input class="" id="tipinput" @focus="setStyle" autocomplete="off"/>
</div>
</div>
</template>
<script>
export default {
name: "search-map",
props:{
initCanClick:{
default:true
}
},
watch:{
initCanClick:{
handler(val){
this.isCanClick = val
},
immediate:true
}
},
data(){
return {
map:'',
markers:[],
markerObj:[],
isCanClick:true,
}
},
methods:{
initData(){
this.initMap()
},
initMap(){
const that = this
return new Promise(resolve => {
const map = new AMap.Map("container", {
resizeEnable: true,
zoom: 13
});
//输入提示
let autoOptions = {
input: "tipinput"
};
AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
let auto = new AMap.AutoComplete(autoOptions);
let placeSearch = new AMap.PlaceSearch({
map: map
}); //构造地点查询类
auto.on("select", select);//注册监听,当选中某条记录时会触发
function select(e) {
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name); //关键字查询查询
}
});
if(that.isCanClick){
map.on('click', function(e) {
let lng = e.lnglat.getLng()
let lat = e.lnglat.getLat()
that.markers = [{lng:lng,lat:lat}]
that.$emit('getSite',{lng:lng,lat:lat})
that.setMarks()
});
}
this.map = map
resolve(1)
})
},
setMarks(){
const map = this.map
this.markerObj.map(it=>{
map.remove(it)
})
let mList = []
this.markers.map((it,i)=>{
// let title = it.title
let marker = new AMap.Marker({
position: new AMap.LngLat(it.lng,it.lat),
offset: new AMap.Pixel(0,0),
});
marker.setLabel({
direction:'right',
offset: new AMap.Pixel(5, -20),
// content: "<div class='mark-label'>"+title+"</div>",
});
mList.push(marker)
})
this.markerObj = mList
map.add(mList)
//自适应中心点
// 第一个参数为空,表明用图上所有覆盖物 setFitview
// 第二个参数为false, 非立即执行
// 第三个参数设置上左下右的空白
map.setFitView(null, false, [150, 60, 100, 60]);
},
setStyle(){
$('.amap-sug-result').css({"z-index":100000})
}
}
}
</script>
<style lang="less" scoped>
.map {
height: 500px;
position: relative;
}
#container {
width: 100%;
height: 100%;
}
.search-map {
position: absolute;
top: 10px;
right: 10px;
z-index: 100000;
}
/deep/.amap-sug-result{
z-index:100000 !important;
}
</style>
高德地图点击定位,视图跟随、设置marker
最新推荐文章于 2024-07-17 10:30:52 发布