<!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="https://cache.amap.com/lbs/static/main1119.css"/>
<script type="text/javascript" src="statics/js/jquery.min.js"></script>
<style type="text/css">
#panel {
position: fixed;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 10px;
right: 10px;
width: 280px;
border-bottom: solid 1px silver;
}
.amap-icon img{width:100%;}
.amap-marker-content{
display:none;
}
.t_walking{
float: right;
width: 80px;
height: 35px;
border: none;
background: #318ff4;
color: #fff;
border-radius: 4px;
}
#thisArea{
position: fixed;
bottom: 40px;
left: 35%;
width: 30%;
height: 35px;
border: none;
background: #318ff4;
color: #fff;
border-radius: 4px;
}
#thisDw{
position: fixed;
bottom: 40px;
left: 5%;
width: 35px;
height: 35px;
border: none;
color: #fff;
border-radius: 4px;
}
</style>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=c1668fff4493f18c93cf1fb054442b60"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div id="panel" style="display: none;"></div>
<button id="thisDw"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5112" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" data-spm-anchor-id="0.0.0.i0.61fa611fhGGW9w"><defs><style type="text/css"></style></defs><path d="M639.297829 382.7712c-17.2032-17.173943-37.829486-30.954057-60.328229-40.257829-22.498743-9.303771-46.811429-14.1312-71.153371-14.1312-24.341943 0-48.683886 4.827429-71.153371 14.1312-22.498743 9.303771-43.125029 23.054629-60.328229 40.257829-17.2032 17.173943-30.983314 37.800229-40.316343 60.240457-9.303771 22.469486-14.160457 46.752914-14.160457 71.0656 0 24.312686 4.827429 48.596114 14.160457 71.0656 9.303771 22.469486 23.083886 43.066514 40.316343 60.240457 17.2032 17.173943 37.829486 30.954057 60.328229 40.257829 22.469486 9.303771 46.811429 14.1312 71.153371 14.1312 24.341943 0 48.654629-4.827429 71.153371-14.1312 22.469486-9.303771 43.125029-23.054629 60.328229-40.257829 17.2032-17.173943 30.983314-37.770971 40.287086-60.240457 9.303771-22.440229 14.160457-46.752914 14.160457-71.0656 0-24.312686-4.856686-48.596114-14.160457-71.0656C670.3104 420.571429 656.530286 399.9744 639.297829 382.7712zM918.557257 467.529143c-16.647314-199.533714-162.962286-348.3648-362.788571-362.203429L555.768686 0l-85.4016 0 0 106.7008C276.128914 124.693943 122.090057 272.149943 105.442743 467.529143L0 467.529143l0 87.127771 105.442743 0c16.647314 195.3792 168.842971 343.2448 363.081143 362.642286L468.523886 1024l87.215543 0 0-105.325714c199.797029-13.867886 346.141257-164.512914 362.788571-364.046629L1024 554.627657 1024 467.529143 918.557257 467.529143zM512 847.082057c-184.5248 0-334.848-151.464229-334.848-334.379886 0-182.915657 151.698286-336.223086 334.848-336.223086 184.554057 0 334.848 153.307429 334.848 336.223086C846.848 695.588571 696.5248 847.082057 512 847.082057z" p-id="5113"></path></svg></button>
<button id="thisArea">在此区域检索</button>
<script type="text/javascript">
var map = new AMap.Map("container", {
resizeEnable: true,//是否监控地图容器尺寸变化
zoom: 15,
//center: [116.397428, 39.90923],//设置地图中心点坐标
});
var cpoint = [116.30007397,39.92588908]; //用户当前位置、中心点坐标
// 实例化点标记addMarker();
function addMarker() {
console.log("addMarker");
var icon = new AMap.Icon({
image: "statics/images/t_dw.png",
size: new AMap.Size(36, 36)
});
var marker = new AMap.Marker({
icon: icon,
position: cpoint,
offset: new AMap.Pixel(-13, -30)
});
marker.setTop({isTop:true});
marker.setMap(map);
}
//显示当前用户位置
addMarker();
var placeSearch ;
AMap.service(["AMap.PlaceSearch"], function() {
//构造地点查询类
placeSearch = new AMap.PlaceSearch({
type:'汽车服务|汽车销售|汽车维修|摩托车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务| 交通设施服务|金融保险服务|公司企业|道路附属设施|地名地址信息|公共设施',
pageSize:10,// 单页显示结果条数
pageIndex: 1, // 页码
city: "北京", // 兴趣点城市
citylimit: true, //是否强制限制在设置的城市内搜索
map: map, // 展现结果的地图实例
//panel: "panel", // 结果列表将在此容器中进行展示。
autoFitView: false,// 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
extensions:'all',//返回基本+详细信息
});
});
//信息窗体
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -30)
//content: info.join("") //使用默认信息窗体框样式，显示信息内容
});
//移动处理
var logMapinfoFn = function (){
var zoom = map.getZoom(); //获取当前地图级别
var center = map.getCenter(); //获取当前地图中心点
console.log(zoom,center,center.toString());
map.clearMap();//使用clearMap方法删除所有覆盖物
};
var markers = [];
function showMap(cpoint){
console.log(cpoint);
//清理点标记及数据
//clearMapinfoFn();
placeSearch.clear();
map.remove(markers);
map.clearMap();//使用clearMap方法删除所有覆盖物
//addMarker();
placeSearch.searchNearBy('彩票', cpoint, 2000, function(status, result) {
// 查询成功时，result即对应匹配的POI信息
console.log(result)
var pois = result.poiList.pois;
for(var i = 0; i < pois.length; i++){
var poi = pois[i];
marker = [];
var icon = new AMap.Icon({
image: "statics/images/shop.png",
size: new AMap.Size(36, 36)
});
marker[i] = new AMap.Marker({
icon:icon,
position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: poi.name,
offset: new AMap.Pixel(-18, -34),
clickable: true,
topWhenClick:true,
bubble:true,
visible:true,
map: map,
zIndex:1000
});
marker[i].setTop({isTop:true});
// 将创建的点标记添加到已有的地图实例：
map.add(marker[i]);
//绑定信息窗体
var info = [];
if(poi.tel && poi.tel != ""){
info.push("<div class='input-card content-window-card'>");
info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>小秘书</h4>");
info.push("<p class='input-item'>电话 : "+poi.tel+" 邮编 : "+poi.adcode+"</p>");
info.push("<p class='input-item'>地址 :"+poi.cityname+poi.adname+poi.address+"</p></div>");
info.push("<button class='t_walking' onclick='t_walking'>步行导航</button></div>");
}else{
info.push("<div class='input-card content-window-card'>");
info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>小秘书</h4>");
info.push("<p class='input-item'>邮编 : "+poi.adcode+"</p>");
info.push("<p class='input-item'>地址 :"+poi.cityname+poi.adname+poi.address+"</p></div>");
info.push("<button class='t_walking' onclick='t_walking'>步行导航</button></div>");
}
marker[i].content = info.join("")// '我是第' + (i + 1) + '个Marker';
marker[i].on('click', openInfo);
//infoWindow.setContent(info.join(""));
//先存进去，再清理点标记
markers.push(marker[i])
}
//最后增加个人位置
addMarker()
map.setFitView();
});
}
showMap(cpoint)
//logMapinfo();
function mapMoveend(){
//var zoom = map.getZoom(); //获取当前地图级别
map.setZoom(15);
console.log(map.getZoom())
var center = map.getCenter(); //获取当前地图级别
var lnglat = [center.lng,center.lat];
showMap(lnglat)
console.log(lnglat,'地图移动结束')
}
function backDw(){
console.log(cpoint);
map.setCenter(cpoint);
}
// 事件绑定
document.getElementById("thisArea").onclick = mapMoveend;
document.getElementById("thisDw").onclick = backDw;
//在指定位置打开信息窗体
function openInfo(e) {
//infoWindow.setContent(e.target.content);
//infoWindow.open(map, map.getCenter());
console.log(e.target.content);
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
console.log();
var endP = e.target.getPosition();
//测试内容是否渲染上
var idom = 0,timeout50;
function domtest(){
idom++;
if(idom < 10){
if($(".t_walking") && $(".t_walking").html() != "" && $(".t_walking").html() != undefined){
console.log($(".t_walking").html());
$(".t_walking").on("click",function(){
infoWindow.close();
//通过信息窗体进入路线导航（默认步行）
gowalking(cpoint,endP);
});
clearTimeout(timeout50);
}else{
timeout50 = setTimeout(function(){domtest();},50)
}
}
}
domtest();
//setTimeout(function(){console.log($(".t_walking").html());},100)
}
function t_walking(){
console.log(new Date());
}
//openInfo()
//infoWindow.close()
//步行路线规划
//步行导航
var walking;
AMap.service(["AMap.Walking"], function() {
walking = new AMap.Walking({
map: map,
//panel: "panel"
});
});
//根据起终点坐标规划步行路线
function gowalking(startPoint,endPoint){
walking.search(startPoint, endPoint, function(status, result) {
// result即是对应的步行路线数据信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_WalkingResult
if (status === 'complete') {
console.log('绘制步行路线完成')
} else {
console.log('步行路线数据查询失败' + result)
}
});
}
//通过信息窗体进入路线导航（默认步行）
//gowalking()
//注：引入高德导航地图模块插件方法：
//1-----key文件后增加&plugin=AMap.Walking
//<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=c1668fff4493f18c93cf1fb054442b60&plugin=AMap.Walking">
//2-----页面启动相关服务
/*
var walking;
AMap.service(["AMap.Walking"], function() {
walking = new AMap.Walking({
map: map,
panel: "panel"
});
});
walking.search(startPoint, endPoint, function(status, result) {})
*/
//$(".amap-logo,.amap-copyright").css({"display":"none","visibility":"hidden"});
</script>
</body>
</html>