高德地圖 JS API 學(xué)習(xí)摘要3

覆蓋物

通用

setFitView()

地圖上覆蓋物較多的情況下，如果需要保證所有覆蓋物都在視野范圍內(nèi)，需要將地圖調(diào)整到合適的縮放等級和中心點幕与，我們可以調(diào)用setFitView()方法，以實現(xiàn)該效果镇防。

//自動適配到指定視野范圍
map.setFitView([m1, m2]);

//無參數(shù)時啦鸣，自動自適應(yīng)所有覆蓋物
map.setFitView();

添加/移除一個或多個覆蓋物

// 創(chuàng)建點覆蓋物
var marker = new AMap.Marker({
    position: new AMap.LngLat(116.39, 39.92),
    icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
    offset: new AMap.Pixel(-13, -30)
});

var polylinePath = [
    new AMap.LngLat(116.41, 39.93),
    new AMap.LngLat(116.43, 39.91)
];

// 創(chuàng)建線覆蓋物
var polyline = new AMap.Polyline({
    path: polylinePath
});

var polygonPath = [
    new AMap.LngLat(116.46, 39.93),
    new AMap.LngLat(116.44, 39.91),
    new AMap.LngLat(116.49, 39.91)
];

// 創(chuàng)建面覆蓋物
var polygon = new AMap.Polygon({
    path: polygonPath
});

map.add(marker); // 添加單個
map.add([polyline, polygon]); // 添加多個
map.remove(marker); // 移除單個
map.remove([polyline, polygon]); // 移除多個
map.clearMap(); // 清楚地圖上所有的覆蓋物

獲取某類覆蓋物

function getAllOverlays(type) {
    // 獲取type類型的覆蓋物
    var overlays = map.getAllOverlays(type);
    // 點標(biāo)記獲取定位點  線和面標(biāo)間獲取其范圍
    var position = type == 'marker'? overlays[0].getPosition(): overlays[0].getPath()[0];

    var infoWindow = new AMap.InfoWindow({ // 展現(xiàn)信息窗口
        position: position,
        // 點標(biāo)記的偏移量較大 是因為點標(biāo)記本身是點但是icon是有大小的
        offset: type == 'marker'? new AMap.Pixel(0, -35): new AMap.Pixel(0, -5),
        content: '<div>已獲取' + info[type] + '覆蓋物</div>'
    });

    infoWindow.open(map);
}
getAllOverlays.bind(null, 'marker'); // 點
getAllOverlays.bind(null, 'polyline'); // 線
getAllOverlays.bind(null, 'polygon'); // 面

獲取某個覆蓋物

利用 extData 屬性給覆蓋物添加 id，獲取特定的覆蓋物

// 創(chuàng)造多個點標(biāo)記
var lnglats = [[116.39, 39.92], [116.41, 39.93], [116.43, 39.91], [116.46, 39.93]];
var markers = [];

for (var i = 0; i < lnglats.length; i++) {
    var lnglat = lnglats[i];
    // 創(chuàng)建點實例
    var marker = new AMap.Marker({
        position: new AMap.LngLat(lnglat[0], lnglat[1]),
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b'+(i+1)+'.png',
        extData:{
            id: i + 1 // 擴展點標(biāo)記屬性
        }
    });
    markers.push(marker); // markers就成為了所有點標(biāo)記的集合
}

// 將點添加到地圖
map.add(markers);

// 獲取當(dāng)前 id為2 的覆蓋物
function getOneOverlay() {
    var targetId = 2;
    var targetMarker;

    for(var i = 0; i < markers.length; i++){
        // 獲取存在每個 extData 中的 id
        var id = markers[i].getExtData().id; // 每個點標(biāo)記通過getExtData()獲取擴展屬性對象来氧。
        if(id === targetId){
            targetMarker = markers[i];
            break;
        }
    }
    var position = targetMarker.getPosition();
    var infoWindow = new AMap.InfoWindow({
        position: position,
        offset: new AMap.Pixel(0, -35),
        content: '<div>已獲取 id 為 2 覆蓋物</div>'
    });
    infoWindow.open(map);
}

點標(biāo)記

添加诫给、修改、刪除

 function addMarker() { // 增
    marker = new AMap.Marker({
        icon: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        position: [116.406315,39.908775],
        offset: new AMap.Pixel(-13, -30)
    });
    marker.setMap(map);
}

// 清除 marker
function clearMarker() {
    if (marker) {
        marker.setMap(null);
        marker = null;
    }
}

// marker.setContent()  &  marker.setPosition()
function updateMarker() {
    if (!marker) {
        return;
    }
    // 自定義點標(biāo)記內(nèi)容
    var markerContent = document.createElement("div");

    // 點標(biāo)記中的圖標(biāo)
    var markerImg = document.createElement("img");
    markerImg.className = "markerlnglat";
    markerImg.src = "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png";
    markerContent.appendChild(markerImg);

    // 點標(biāo)記中的文本
    var markerSpan = document.createElement("span");
    markerSpan.className = 'marker';
    markerSpan.innerHTML = "Hi啦扬，我被更新啦中狂！";
    markerContent.appendChild(markerSpan);

    marker.setContent(markerContent); //更新點標(biāo)記內(nèi)容
    marker.setPosition([116.391467, 39.927761]); //更新點標(biāo)記位置
}

文本標(biāo)記 AMap.Text() & text.setMap(map);

// 創(chuàng)建純文本標(biāo)記
var text = new AMap.Text({
    text:'sfhalo',
    textAlign:'center', // 'left' 'right', 'center',
    verticalAlign:'middle', //middle 、bottom
    draggable:true, // 是否可拖拽
    cursor:'pointer',
    angle:10,
    style:{
        'padding': '.75rem 1.25rem',
        'margin-bottom': '1rem',
        'border-radius': '.25rem',
        'background-color': 'white',
        'width': '15rem',
        'border-width': 0,
        'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)', // 陰影
        'text-align': 'center',
        'font-size': '20px',
        'color': 'blue'
    },
    position: [116.396923,39.918203]
});

text.setMap(map);

自定義圖標(biāo)

// 以 icon URL 的形式創(chuàng)建一個途經(jīng)點
var viaMarker = new AMap.Marker({
    position: new AMap.LngLat(116.38,39.92),
    // 將一張圖片的地址設(shè)置為 icon
    icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
    // 設(shè)置了 icon 以后扑毡，設(shè)置 icon 的偏移量胃榕，以 icon 的 [center bottom] 為原點
    offset: new AMap.Pixel(-13, -30)
});


// 或者

// 創(chuàng)建一個 Icon
var startIcon = new AMap.Icon({
    // 圖標(biāo)尺寸
    size: new AMap.Size(25, 34),
    // 圖標(biāo)的取圖地址
    image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
    // 圖標(biāo)所用圖片大小
    imageSize: new AMap.Size(135, 40),
    // 圖標(biāo)取圖偏移量 css sprite
    imageOffset: new AMap.Pixel(-9, -3)
});

// 將 icon 傳入 marker
var startMarker = new AMap.Marker({
    position: new AMap.LngLat(116.35,39.89),
    icon: startIcon,
    offset: new AMap.Pixel(-13, -30)
});

圓點標(biāo)記

使用AMap.CircleMarker創(chuàng)建圓點標(biāo)記。

<script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/resource/capitals.js'></script>

var map = new AMap.Map('map', {
    // viewMode: '3D',
    zoom: 4,
    center: [ 108, 34]
})

for(var i=0;i<capitals.length;i+=1){
    var center = capitals[i].center;
    var circleMarker = new AMap.CircleMarker({
        center:center,
        radius:10+Math.random()*10,//3D視圖下僚楞，CircleMarker半徑不要超過64px
        strokeColor:'white',
        strokeWeight:2,
        strokeOpacity:0.5,
        fillColor:'rgba(0,0,255,1)',
        fillOpacity:0.5,
        zIndex:10,
        bubble:true,
        cursor:'pointer',
        clickable: true
    })
    circleMarker.setMap(map)
}

自定義點標(biāo)記內(nèi)容

通過content屬性設(shè)定Marker的顯示內(nèi)容勤晚。

// 點標(biāo)記顯示內(nèi)容，HTML要素字符串
var markerContent = '' +
    '<div class="custom-content-marker">' +
    '   <img src="http://a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">' +
    '   <div class="close-btn" onclick="clearMarker()">X</div>' +
    '</div>';

var marker = new AMap.Marker({
    position: position,
    // 將 html 傳給 content
    content: markerContent,
    // 以 icon 的 [center bottom] 為原點
    offset: new AMap.Pixel(-13, -30)
});

// 將 markers 添加到地圖
map.add(marker);

設(shè)置點標(biāo)注的文本標(biāo)簽

var marker = new AMap.Marker({
    position: map.getCenter(),
    icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
    offset: new AMap.Pixel(-13, -30)
});

marker.setMap(map);

// 設(shè)置鼠標(biāo)劃過點標(biāo)記顯示的文字提示
marker.setTitle('我是marker的title');

// 設(shè)置label標(biāo)簽
// label默認藍框白底左上角顯示泉褐，樣式className為：amap-marker-label
marker.setLabel({
    //修改label相對于maker的位置
    offset: new AMap.Pixel(20, 20),
    content: "<div class='info'>我是 marker 的 label 標(biāo)簽</div>"
});

點聚合

使用AMap.MarkerClusterer展示大量的Marker點赐写，可靈活設(shè)定聚合樣式。

var cluster, markers = [];
// points是所有點的集合
for (var i = 0; i < points.length; i += 1) {
    markers.push(new AMap.Marker({
        position: points[i]['lnglat'],
        content: '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
        offset: new AMap.Pixel(-15, -15)
    }))
}

var count = markers.length;
var _renderClusterMarker = function (context) {
    var factor = Math.pow(context.count / count, 1 / 18); // 冪次方
    var div = document.createElement('div');
    var Hue = 180 - factor * 180;
    var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)'; // 色調(diào) 飽和 亮度 透明度
    var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
    var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
    var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
    div.style.backgroundColor = bgColor;
    var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
    div.style.width = div.style.height = size + 'px';
    div.style.border = 'solid 1px ' + borderColor;
    div.style.borderRadius = size / 2 + 'px';
    div.style.boxShadow = '0 0 1px ' + shadowColor;
    div.innerHTML = context.count;
    div.style.lineHeight = size + 'px';
    div.style.color = fontColor;
    div.style.fontSize = '14px';
    div.style.textAlign = 'center';
    context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
    context.marker.setContent(div)
};

addCluster(2);

function addCluster(tag) {
    if (cluster) {
        cluster.setMap(null);
    }
    if (tag == 2) {//完全自定義
        cluster = new AMap.MarkerClusterer(map, markers, {
            gridSize: 80,
            renderClusterMarker: _renderClusterMarker
        });
    } else if (tag == 1) {//自定義圖標(biāo)
        var sts = [{
            url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
            size: new AMap.Size(32, 32),
            offset: new AMap.Pixel(-16, -16)
        }, {
            url: "https://a.amap.com/jsapi_demos/static/images/green.png",
            size: new AMap.Size(32, 32),
            offset: new AMap.Pixel(-16, -16)
        }, {
            url: "https://a.amap.com/jsapi_demos/static/images/orange.png",
            size: new AMap.Size(36, 36),
            offset: new AMap.Pixel(-18, -18)
        }, {
            url: "https://a.amap.com/jsapi_demos/static/images/red.png",
            size: new AMap.Size(48, 48),
            offset: new AMap.Pixel(-24, -24)
        }, {
            url: "https://a.amap.com/jsapi_demos/static/images/darkRed.png",
            size: new AMap.Size(48, 48),
            offset: new AMap.Pixel(-24, -24)
        }];
        cluster = new AMap.MarkerClusterer(map, markers, {
            styles: sts,
            gridSize: 80
        });
    } else {//默認樣式
        cluster = new AMap.MarkerClusterer(map, markers, {gridSize: 80});
    }
}

點拖拽效果

var marker = new AMap.Marker({
    position: map.getCenter(),
    icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
    offset: new AMap.Pixel(-13, -30),
    // 設(shè)置是否可以拖拽
    draggable: true,
    cursor: 'move',
    // 設(shè)置拖拽效果
    raiseOnDrag: false
});

marker.setMap(map);.

// 設(shè)置點標(biāo)記的動畫效果膜赃，此處為彈跳效果
marker.setAnimation('AMAP_ANIMATION_BOUNCE');

軌跡回放

var marker;
var lineArr = [[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]];

var map = new AMap.Map("container", {
    resizeEnable: true,
    center: [116.397428, 39.90923],
    zoom: 17
});

marker = new AMap.Marker({
    map: map,
    position: [116.478935,39.997761],
    icon: "https://webapi.amap.com/images/car.png",
    offset: new AMap.Pixel(-26, -13),
    autoRotation: true,
    angle:-90,
});

// 繪制軌跡
var polyline = new AMap.Polyline({
    map: map,
    path: lineArr,
    showDir:true,
    strokeColor: "#28F",  //線顏色
    // strokeOpacity: 1,     //線透明度
    strokeWeight: 6,      //線寬
    // strokeStyle: "solid"  //線樣式
});

var passedPolyline = new AMap.Polyline({
    map: map,
    // path: lineArr,
    strokeColor: "#AF5",  //線顏色
    // strokeOpacity: 1,     //線透明度
    strokeWeight: 6,      //線寬
    // strokeStyle: "solid"  //線樣式
});


marker.on('moving', function (e) {
    passedPolyline.setPath(e.passedPath);
});


marker.moveAlong(lineArr, 200);// 開始

marker.pauseMove(); // 暫停

marker.resumeMove(); // 繼續(xù)

marker.stopMove(); // 停止

加載海量點

<script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/citys.js'></script>
var map = new AMap.Map('container', {
    zoom: 4,
    center: [102.342785, 35.312316]
});

var style = [{
    url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
    anchor: new AMap.Pixel(6, 6),
    size: new AMap.Size(11, 11)
}, {
    url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
    anchor: new AMap.Pixel(4, 4),
    size: new AMap.Size(7, 7)
}, {
    url: 'https://a.amap.com/jsapi_demos/static/images/mass2.png',
    anchor: new AMap.Pixel(3, 3),
    size: new AMap.Size(5, 5)
}];

var mass = new AMap.MassMarks(citys, {
    opacity: 1,
    zIndex: 111,
    cursor: 'pointer',
    style: style
});

var marker = new AMap.Marker({content: ' ', map: map});

mass.on('mouseover', function (e) { // 鼠標(biāo)移入展示label
    marker.setPosition(e.data.lnglat);
    marker.setLabel({content: e.data.name})
});

mass.setMap(map);
mass.setStyle(style); // 多個圖標(biāo)
mass.setStyle(style[2]); // 單個圖標(biāo)

添加 / 移除覆蓋物群組

對一類覆蓋物挺邀，創(chuàng)建覆蓋物群組，從地圖上添加/移除跳座。使用setOptions()可以批量修改覆蓋物群組的屬性端铛。

 var map = new AMap.Map("container", {
    zoom: 13,
    center: [116.43, 39.92],
    resizeEnable: true
});

var lnglats = [[116.39, 39.92], [116.41, 39.93], [116.43, 39.91], [116.46, 39.93]];
var markers = [];

for (var i = 0; i < lnglats.length; i++) {
    var lnglat = lnglats[i];
    // 創(chuàng)建點實例
    var marker = new AMap.Marker({
        position: new AMap.LngLat(lnglat[0], lnglat[1]),
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b' + (i + 1) + '.png',
        extData: {
            id: i + 1
        }
    });
    markers.push(marker);
}

// 創(chuàng)建覆蓋物群組，并將 marker 傳給 OverlayGroup
var overlayGroups = new AMap.OverlayGroup(markers);

// 添加覆蓋物群組
map.add(overlayGroups);

// 移除覆蓋物群組
map.remove(overlayGroups);

// 批量改變 overlayGroups 內(nèi)覆蓋物的屬性
overlayGroups.setOptions({
    strokeColor: '#ffeeff',
    outlineColor: '#3366FF'
});

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末疲眷，一起剝皮案震驚了整個濱河市禾蚕，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌狂丝，老刑警劉巖换淆，帶你破解...
沈念sama閱讀 217,657評論 6贊 505
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件哗总，死亡現(xiàn)場離奇詭異，居然都是意外死亡倍试，警方通過查閱死者的電腦和手機讯屈，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,889評論 3贊 394
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來县习，“玉大人涮母，你說我怎么就攤上這事≡暝福” “怎么了叛本？”我有些...
開封第一講書人閱讀 164,057評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長攘已。經(jīng)常有香客問我炮赦，道長，這世上最難降的妖魔是什么样勃？我笑而不...
開封第一講書人閱讀 58,509評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任吠勘，我火速辦了婚禮，結(jié)果婚禮上峡眶，老公的妹妹穿的比我還像新娘剧防。我一直安慰自己，他們只是感情好辫樱，可當(dāng)我...
茶點故事閱讀 67,562評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布峭拘。她就那樣靜靜地躺著，像睡著了一般狮暑。火紅的嫁衣襯著肌膚如雪鸡挠。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,443評論 1贊 302
城市分裂傳說
那天搬男，我揣著相機與錄音拣展，去河邊找鬼。笑死缔逛，一個胖子當(dāng)著我的面吹牛备埃，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播褐奴，決...
沈念sama閱讀 40,251評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼按脚，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了敦冬？” 一聲冷哼從身側(cè)響起辅搬，我...
開封第一講書人閱讀 39,129評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎脖旱，沒想到半個月后伞辛，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體烂翰，經(jīng)...
沈念sama閱讀 45,561評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,779評論 3贊 335
?白月光啟示錄
正文我和宋清朗相戀三年蚤氏，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片踊兜。...
茶點故事閱讀 39,902評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡竿滨，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出捏境，到底是詐尸還是另有隱情于游，我是刑警寧澤，帶...
沈念sama閱讀 35,621評論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布垫言，位于F島的核電站贰剥，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏筷频。R本人自食惡果不足惜蚌成，卻給世界環(huán)境...
茶點故事閱讀 41,220評論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望凛捏。院中可真熱鬧担忧，春花似錦、人聲如沸坯癣。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,838評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽示罗。三九已至惩猫，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間蚜点，已是汗流浹背轧房。一陣腳步聲響...
開封第一講書人閱讀 32,971評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留禽额，地道東北人锯厢。一個月前我還...
沈念sama閱讀 48,025評論 2贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長得像脯倒，于是被迫代替她去往敵國和親实辑。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 44,843評論 2贊 354

高德地圖 JS API 學(xué)習(xí)摘要3

覆蓋物

通用

點標(biāo)記

推薦閱讀更多精彩內(nèi)容