高德地图点击查询信息定位到点+异步加载点+点击点显示信息窗口
一:配置地图
根据官方步骤申请key
可以异步或者同步调用地图,此处Wie同步
html
-
<div id="container" tabindex="0"></div>
js
//设置中心位置,显示当前城市的中心点 var map = new AMap.Map(\'container\', { resizeEnable: true, //center: [117.031479, 36.66314],//定位的济南//center缺省则根据IP自动获取中心 zoom: 11 });
不设置center可以根据ip自动获取中心位置
二:配置地图标记点
var style = new AMap.Icon({ size: new AMap.Size(30, 40), //图标大小 image: "img/map_icon.png",//设置点图标图像 imageSize: new AMap.Size(25, 28), imageOffset: new AMap.Pixel(0, 0) }); //显示窗口 var infoWindow = new AMap.InfoWindow({ draggable: true, //是否可拖动 content: "", isCustom: true, //使用自定义窗体 offset: new AMap.Pixel(16, -15) //基点指向marker的头部位置 });
var markerList = [];//存放地图的点信息,方便点击时加载 //清除地图上的信息 map.remove(markers); map.clearInfoWindow(); $.post(\'ashx/dealHandler.ashx\', { action: "getPoints", page: page,//当前页码 pageSize: pageSize,//每页页码(此处取全局参数) city: $("#city").val(), searchText: $(".ipt_search").val() }, function (result) { if (result.total > 0) {//用模板加载信息 var ht = template("tmp-list1", { Data: result.rows }); $("#project_item").empty().append(ht);//模板赋值 $("#countAll").text(result.total); //获取分页数据 GetLayuiPageList(result.total, page, pageSize); //左侧查询信息的点击事件,要在绘制完成后加载 $(\'.dz_text\').on(\'click\', function () { var idStr = this.dataset.id; markerList.map(function(value,index){ if (value.id == idStr) { //获取点击点的marker var tpmk = value.marker_o; if (tpmk) { //触发点击 tpmk.emit(\'click\', { target: tpmk }); //设置中心点和缩放比例 map.setZoomAndCenter(15, tpmk.getPosition()); } } }) }) //在地图标记点 var marker; var firstlng,firstlat; for (var i = 0 ; i < result.rows.length; i++) { if (i == 0) { firstlng = result.rows[i].ca_lng; firstlat = result.rows[i].ca_lat; } var data = [result.rows[i].ca_lng, result.rows[i].ca_lat]; marker = new AMap.Marker({ map: map, position: data, zIndex: 11, icon: style }); marker.setMap(map); marker.ca_info_id = result.rows[i].ca_info_id; marker.ca_info_name = result.rows[i].ca_info_name; marker.ca_info_address = result.rows[i].ca_info_address; marker.ca_info_phone = result.rows[i].ca_info_phone;
//添加点击监听事件 AMap.event.addListener(marker, \'click\', setmarkerclick);
marker.emit(\'click\', { target: marker }); var vv = new markerStruct(); vv.id = result.rows[i].ca_info_id; vv.marker_o = marker; markerList.push(vv); markers.push(marker); }
//for-end //自适应多个标记点 map.setFitView(); } else { $("#project_item").empty().append("");//模板赋值 $("#countAll").text("0"); //获取分页数据 GetLayuiPageList(0, page, pageSize); } }, \'json\');
//点击事件,显示窗口 function setmarkerclick(e) { infoWindow.setContent("<div name=\'zt_min_box\'class=\'zt_min_box\'><h3 class=\'map_bt\'>" + e.target.ca_info_name + "</h3>" + "<div class=\'map_text\'><span>地址:" + e.target.ca_info_address + "</span>" + "<span>电话:" + e.target.ca_info_phone + "</span>" + "<span><a class=\'yangshi\' href=\'carrierDetail.aspx?carrierid=" + e.target.ca_info_id + "\'>详细信息</a></span>" +"</div><a href=\'#\'onclick=\"javascript:turnoff(\'zt_min_box\')\" class=\'close\'>关闭</a></div><div class=\'tag-boder\'><div class=\'tag\'></div></div> "); infoWindow.open(map, e.target.getPosition()); }
//layui分页通用封装 //count:总页数 curr: 起始当前页 limit:每页显示条数 function GetLayuiPageList(count, curr, limit) { layui.use([\'laypage\', \'layer\'], function () { var laypage = layui.laypage, layer = layui.layer; laypage.render({ elem: \'pagination\',//分页存放的容器Id 注:不需要"#" count: count, theme: \'#1E9FFF\', limit: limit, curr: curr, //first: \'首页\', //last: \'尾页\', prev: \'<em>←</em>\', next: \'<em>→</em>\', layout: [ \'prev\', \'page\', \'next\'], jump: function (obj, first) { //非首次加载处理 if (!first) { GetProjectInfoList(obj.curr); } } }); }); }
版权声明:本文为janeaiai原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。