高德地图点击查询信息定位到点+异步加载点+点击点显示信息窗口

一：配置地图  

     根据官方步骤申请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);
                    }

                }
            });

        });

    }