高德地圖點擊查詢信息定位到點+異步加載點+點擊點顯示信息窗口

一：配置地圖  

     根據官方步驟申請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);
                    }

                }
            });

        });

    }