欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

高德地图JS API 开发小结

程序员文章站 2022-03-24 11:15:53
项目中有一块功能要用到高德地图,所以,想把编码小结一下。 首先是地图的初始化 var map = new AMap.Map("mapDiv", { zoom: 17,//设置地图的缩放比例 center: [112.57, 37.87],//地图中心 resizeEnable: true //是否监 ......

项目中有一块功能要用到高德地图,所以,想把编码小结一下。

首先是地图的初始化

  var map = new amap.map("mapdiv", {
                        zoom: 17,//设置地图的缩放比例
                        center: [112.57, 37.87],//地图中心
                        resizeenable: true //是否监控地图容器尺寸变化
                    });

map类的其他属性,详见 https://lbs.amap.com/api/javascript-api/reference/map

自定义点标记:

         // 自定义点标记显示内容,html要素字符串
                        var markercontent = '<div class="labeledmarkerstyle2">' +
                            '<span>' +
                            '<a href="javascript:void(0);">' +
                            '<table id="tip38521" cellspacing="0" cellpadding="0" border="0">' +
                            '<tbody>' +
                            '<tr>' +
                            '<td class="s1">&nbsp;</td>' +
                            '<td class="s2">@(model.proname)</td>' +
                            '<td class="s3">&nbsp;</td>' +
                            '</tr>' +
                            '<tr>' +
                            '<td colspan="3" class="s5"></td>' +
                            '</tr>' +
                            '</tbody>' +
                            '</table>' +
                            '</a>' +
                            '</span>' +
                            '</div>';

       //自定义点标记初始化
                        var marker = new amap.marker({
                            map: map, //要显示该marker的地图对象
                            position: [112.602951,37.816592],
                            content: markercontent, //点标记内容
                            offset: new amap.pixel(-13, -30) //点标记显示位置偏移量
                        });

                        // 将 markers 添加到地图
                        map.add(marker);

marker类其他属性详见:https://lbs.amap.com/api/javascript-api/reference/overlay#marker

 

自定义信息窗体:

   //鼠标点击marker弹出自定义的信息窗体

  amap.event.addlistener(marker, 'click', function () {
                            infowindow.open(map, marker.getposition());
                        });

      //信息窗体显示内容

      var title = '项目名',
                        content = [];
                    content.push('参考价格:<font style="color: #ff6600; font-family: arial; font-size: 18px; font-weight: bold;">8256元/平方</font><br>');
                    content.push('销售状态:在售<br>');
                    content.push('物业类型:小洋房<br>');
                    content.push('所属区域:迎泽区<br>');
                    content.push('开盘时间:2017年5月9日<br>');
                    console.log(content);
                    cover = [];
                    cover.push('<a href="/newhouses/detail/15" target="_blank"><img src="img" width="166" height="140" border="0"></a>');

                    linkline = [];
                    linkline.push('[<a href="/newhouses/detail/15" class="d4d4" target="_blank">楼盘详情</a>]');
                    linkline.push('[<a href="/newhouses/detail/15" class="d4d4" target="_blank">周边查询</a>]');
                    linkline.push('[<a href="/newhouses/detail/15" class="d4d4" target="_blank">楼盘快讯</a>]');
                    var infowindow = new amap.infowindow({
                        iscustom: true,  //使用自定义窗体
                        position: [112.602951,37.816592],
                        content: createinfowindow(),
                        size: new amap.size(410, 0),
                        offset: new amap.pixel(320, -280)
                    });

                    //构建自定义信息窗体
                    function createinfowindow() {

                        //可以通过下面的方式修改自定义窗体的宽高
                        //info.style.width = "400px";
                        // 定义顶部标题
                        var firstout = document.createelement("div");
                        firstout.classname = "amap-overlays";

                        var outout = document.createelement("div");
                        outout.classname = "amap-info outout";

                        var outtop = document.createelement("div");
                        outtop.classname = "outtop";
                        //外围
                        var out = document.createelement("div");
                        out.classname = "out";
                        var out1 = document.createelement("div");
                        //内围
                        var nei = document.createelement("div");
                        nei.classname = "amap-info-content amap-info-outer";
                        nei.style.width = "410px;";
                        //标题
                        var titled = document.createelement("div");
                        titled.classname = "titled";
                        titled.innerhtml = title;
                        nei.appendchild(titled);
                        //标题下的分割线
                        var titleline = document.createelement("div");
                        titleline.classname = "titleline";
                        nei.appendchild(titleline);
                        //内容
                        var middle = document.createelement("div");
                        middle.classname = "content";
                        middle.innerhtml = content.join("");
                        nei.appendchild(middle);
                        //封面
                        var img = document.createelement("div");
                        img.classname = "img";
                        img.innerhtml = cover;
                        nei.appendchild(img);
                        //底部链接
                        var link = document.createelement("div");
                        link.classname = "link";
                        link.innerhtml = linkline;
                        nei.appendchild(link);
                        //关闭
                        var closex = document.createelement("a");
                        closex.classname = "amap-info-close";
                        closex.id = "close";
                        closex.innerhtml = "×";
                        closex.onclick = closeinfowindow;

                        // 定义底部内容
                        var bottom = document.createelement("div");
                        bottom.classname = "amap-info-sharp";
                        bottom.style.height = '23px';

                        out1.appendchild(nei);
                        out1.appendchild(closex);
                        out1.appendchild(bottom);
                        out.appendchild(out1);
                        outout.appendchild(outtop);
                        outout.appendchild(out);
                        firstout.appendchild(outout)
                        return firstout;
                    }

                    //关闭信息窗体
                    function closeinfowindow() {
                        map.clearinfowindow();
                    }

 

给多个自定义点标记添加自定义信息窗体:

      var markets=[];
                $.post("/newhouses/mapsearchbyarea",{area:area},function(data){
                    var infowindow = new amap.infowindow({iscustom: true,size: new amap.size(410, 0),offset: new amap.pixel(320, -280)});
                    for(var i=0;i<data.length;i++){
                        if(data[i].coordinate!=""){
                            var coordinate=data[i].coordinate.split(',');
                            // 点标记显示内容,html要素字符串
                            var markercontent = '<div class="labeledmarkerstyle2">' +
                                '<span>' +
                                '<a href="javascript:void(0);">' +
                                '<table id="tip38521" cellspacing="0" cellpadding="0" border="0">' +
                                '<tbody>' +
                                '<tr>' +
                                '<td class="s1">&nbsp;</td>' +
                                '<td class="s2">'+data[i].proname+'</td>' +
                                '<td class="s3">&nbsp;</td>' +
                                '</tr>' +
                                '<tr>' +
                                '<td colspan="3" class="s5"></td>' +
                                '</tr>' +
                                '</tbody>' +
                                '</table>' +
                                '</a>' +
                                '</span>' +
                                '</div>';

                            var marker1 = new amap.marker({
                                map: map,
                                position: [coordinate[0],coordinate[1]],
                                // 将 html 传给 content
                                content: markercontent,
                                // 以 icon 的 [center bottom] 为原点
                                offset: new amap.pixel(-13, -30),
                                extdata:data[i].id+"|"+data[i].proname+"|"+data[i].pricec+"|"+data[i].sales_status+"|"+data[i].property_type+"|"+data[i].area+"|"+data[i].kptime+"|"+data[i].sales_tel+"|"+data[i].img+"|"+data[i].coordinate,
                            });

                            markets.push(marker1);

                            marker1.on('click', markerclick);
                        }
                    }

                    function markerclick(e) {
                        infowindow.setcontent(createinfowindow($(e)));
                        infowindow.open(map, e.target.getposition());
                    }
                    map.setfitview();

                    //构建自定义信息窗体
                    function createinfowindow(e) {
                        //console.log(e);
                        var pro=e[0].target.getextdata().split('|');
                        //实例化信息窗体
                        var title = pro[1],
                            content = [];
                        content.push('参考价格:<font style="color: #ff6600; font-family: arial; font-size: 18px; font-weight: bold;">'+pro[2]+'</font><br>');
                        content.push('销售状态:'+pro[3]+'<br>');
                        content.push('物业类型:'+pro[4]+'<br>');
                        content.push('所属区域:'+pro[5]+'<br>');
                        content.push('开盘时间:'+pro[6]+'<br>');
                        content.push('销售电话:<font style="color: #ff6600; font-family: arial; font-size: 16px; font-weight: bold;">'+pro[7]+'</font>');
                        cover = [];
                        cover.push('<a href="/newhouses/detail/'+pro[0]+'" target="_blank"><img src="'+pro[8]+'" width="166" height="140" border="0"></a>');
                        linkline = [];
                        linkline.push('[<a href="/newhouses/detail/'+pro[0]+'" class="d4d4" target="_blank">楼盘详情</a>]');
                        linkline.push('[<a href="/newhouses/detail/'+pro[0]+'#dt" class="d4d4" target="_blank">周边查询</a>]');
                        linkline.push('[<a href="/newhouses/detail/'+pro[0]+'" class="d4d4" target="_blank">楼盘快讯</a>]');
                        var coor=pro[9].split(",");
                        //可以通过下面的方式修改自定义窗体的宽高
                        //info.style.width = "400px";
                        // 定义顶部标题
                        var firstout = document.createelement("div");
                        firstout.classname = "amap-overlays";

                        var outout = document.createelement("div");
                        outout.classname = "amap-info outout";

                        var outtop = document.createelement("div");
                        outtop.classname = "outtop";
                        //外围
                        var out = document.createelement("div");
                        out.classname = "out";
                        var out1 = document.createelement("div");
                        //内围
                        var nei = document.createelement("div");
                        nei.classname = "amap-info-content amap-info-outer";
                        nei.style.width = "410px;";
                        //标题
                        var titled = document.createelement("div");
                        titled.classname = "titled";
                        titled.innerhtml = title;
                        nei.appendchild(titled);
                        //标题下的分割线
                        var titleline = document.createelement("div");
                        titleline.classname = "titleline";
                        nei.appendchild(titleline);
                        //内容
                        var middle = document.createelement("div");
                        middle.classname = "content";
                        middle.innerhtml = content.join("");
                        nei.appendchild(middle);
                        //封面
                        var img = document.createelement("div");
                        img.classname = "img";
                        img.innerhtml = cover;
                        nei.appendchild(img);
                        //底部链接
                        var link = document.createelement("div");
                        link.classname = "link";
                        link.innerhtml = linkline;
                        nei.appendchild(link);
                        //关闭
                        var closex = document.createelement("a");
                        closex.classname = "amap-info-close";
                        closex.id = "close";
                        closex.innerhtml = "×";
                        closex.onclick = closeinfowindow;

                        // 定义底部内容
                        var bottom = document.createelement("div");
                        bottom.classname = "amap-info-sharp";
                        bottom.style.height = '23px';

                        out1.appendchild(nei);
                        out1.appendchild(closex);
                        out1.appendchild(bottom);
                        out.appendchild(out1);
                        outout.appendchild(outtop);
                        outout.appendchild(out);
                        firstout.appendchild(outout)
                        return firstout;
                    }

                    //关闭信息窗体
                    function closeinfowindow() {
                        map.clearinfowindow();
                    }
                })