码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-03-16 12:30:18      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:zoom   city   action   详细   remove   obj   div   高德   rip   

一:配置地图  

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

                }
            });

        });

    }

 

 

 

技术图片

 

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

标签:zoom   city   action   详细   remove   obj   div   高德   rip   

原文地址:https://www.cnblogs.com/janeaiai/p/10541680.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!