高德地圖JS API 開發小結

項目中有一塊功能要用到高德地圖，所以，想把編碼小結一下。

首先是地圖的初始化

  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();
                    }
                })