高德地图 气泡 点 和信息窗
2019-11-20 本文已影响0人
郭的妻
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>编辑折线、多边形、圆</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script id="mapscript" src="http://webapi.amap.com/maps?v=1.4.4&key=your key&plugin=AMap.PolyEditor,AMap.CircleEditor,AMap.MouseTool,AMap.Autocomplete,AMap.PlaceSearch"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<style>
#main,.tab-content,#content,.row,.col-xs-12{
width:100%!important;
height:100%!important;
}
.button-group {
position: absolute;
top: 0px;
left: 87px;
right:auto!important;
bottom:auto!important;
font-size: 12px;
padding: 10px;
}
.custom{
position: relative;
}
.custom-content{
width:300px;
height:50px;
padding: 10px;
width:100%;
background: #fff;
border-radius: 10px;
z-index: 99999;
position: relative;
}
.custom-img{
width: 30px;
position: absolute;
bottom: 0px;
left: 50%;
z-index: 99999999;
}
.close-btn{
position: absolute;
top: 4px;
right: 8px;
}
#myPageTop {
right:auto;
left:100px;
}
</style>
</head>
<body>
<div id="container"></div>
<!-- 地址搜索 开始 -->
<div id="myPageTop">
<table>
<tr>
<td>
<label>请输入关键字：</label>
</td>
</tr>
<tr>
<td>
<input id="tipinput" placeholder="请输入关键字" style="width:240px;"/>
</td>
</tr>
</table>
</div>
<!-- 地址搜索 结束 -->
<input type="hidden" value='' />
<script>
var map = new AMap.Map("container",{
resizeEnable: true,
center:[111.666261,40.831684],
zoom: 14 //地图显示的缩放级别
});
//输入提示
var autoOptions = {
input: "tipinput"
};
var auto = new AMap.Autocomplete(autoOptions);
//构造地点查询类
var placeSearch = new AMap.PlaceSearch({
map: map
});
//注册监听，当选中某条记录时会触发
AMap.event.addListener(auto, "select", select);
var show=false;
function select(e) {
/* 通过 搜索的经纬度 查询 是否在电子围栏中 */
$.ajax({
url:'/index.php/admin/findweilan/zuobiaos',
type:'POST',
data:{
lng:e.poi.location.lng,
lat:e.poi.location.lat
},
dataType:'json',
success:function(res){
if(res.code==0){
var points=res.points;
var arr=[];
for(var i=0;i<points.length;i++){
var arr1=points[i].split(",");
arr.push([Number(arr1[0]),Number(arr1[1])])
}
/* 绘制电子围栏 以及 气泡 */
var obj={
name:res.shuizhan.name,
address:res.shuizhan.address,
mobile:res.shuizhan.mobile,
position:[Number(res.shuizhan.lat), Number(res.shuizhan.lng)]
}
huizhidianzhi(arr,obj);
}else{
alert(res.msg);
}
}
});
}
/* 绘制电子围栏 */
function huizhidianzhi (arr,lnglats){
var map = new AMap.Map("container",{
resizeEnable: true,
center:lnglats.position,
zoom: 14 //地图显示的缩放级别
});
var polygon = new AMap.Polygon({
path: arr,
strokeColor: "#FF33FF",
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
fillColor: '#1791fc',
zIndex: 50,
});
map.add(polygon);
/* 信息 窗 */
var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
var marker = new AMap.Marker({
position: lnglats.position,
map: map
});
marker.content = '***：'+lnglats.name+'</br> ****：'+lnglats.address+'</br>****：'+lnglats.mobile;
marker.on('click', markerClick);
marker.emit('click', {target: marker});
function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
map.setFitView(marker);
}
</script>
</body>
</html>
