美文网首页
高德地图 JS API 学习摘要3

高德地图 JS API 学习摘要3

作者: Upcccz | 来源:发表于2019-02-18 19:04 被阅读0次

覆盖物

通用
  • setFitView()

地图上覆盖物较多的情况下，如果需要保证所有覆盖物都在视野范围内， 需要将地图调整到合适的缩放等级和中心点，我们可以调用setFitView()方法，以实现该效果。

//自动适配到指定视野范围
map.setFitView([m1, m2]);

//无参数时，自动自适应所有覆盖物
map.setFitView();
  • 添加/移除 一个或多个覆盖物
// 创建点覆盖物
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)
];

// 创建线覆盖物
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)
];

// 创建面覆盖物
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);
    // 点标记获取定位点  线和面标间获取其范围
    var position = type == 'marker'? overlays[0].getPosition(): overlays[0].getPath()[0];

    var infoWindow = new AMap.InfoWindow({ // 展现信息窗口
        position: position,
        // 点标记的偏移量较大 是因为点标记本身是点但是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，获取特定的覆盖物

// 创造多个点标记
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];
    // 创建点实例
    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); // markers就成为了所有点标记的集合
}

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

// 获取当前 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; // 每个点标记通过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);
}
点标记
  • 添加、修改、删除
 function addMarker() { // 增
    marker = new AMap.Marker({
        icon: "//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;
    }
    // 自定义点标记内容
    var markerContent = document.createElement("div");

    // 点标记中的图标
    var markerImg = document.createElement("img");
    markerImg.className = "markerlnglat";
    markerImg.src = "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png";
    markerContent.appendChild(markerImg);

    // 点标记中的文本
    var markerSpan = document.createElement("span");
    markerSpan.className = 'marker';
    markerSpan.innerHTML = "Hi，我被更新啦！";
    markerContent.appendChild(markerSpan);

    marker.setContent(markerContent); //更新点标记内容
    marker.setPosition([116.391467, 39.927761]); //更新点标记位置
}
  • 文本标记 AMap.Text() & text.setMap(map); 
// 创建纯文本标记
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);
  • 自定义图标
// 以 icon URL 的形式创建一个途经点
var viaMarker = new AMap.Marker({
    position: new AMap.LngLat(116.38,39.92),
    // 将一张图片的地址设置为 icon
    icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
    // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
    offset: new AMap.Pixel(-13, -30)
});


// 或者

// 创建一个 Icon
var startIcon = new AMap.Icon({
    // 图标尺寸
    size: new AMap.Size(25, 34),
    // 图标的取图地址
    image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
    // 图标所用图片大小
    imageSize: new AMap.Size(135, 40),
    // 图标取图偏移量 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)
});
  • 圆点标记

使用AMap.CircleMarker创建圆点标记。

<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)
}
  • 自定义点标记内容

通过content属性设定Marker的显示内容。

// 点标记显示内容，HTML要素字符串
var markerContent = '' +
    '<div class="custom-content-marker">' +
    '   <img src="//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);
  • 设置点标注的文本标签
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);

// 设置鼠标划过点标记显示的文字提示
marker.setTitle('我是marker的title');

// 设置label标签
// label默认蓝框白底左上角显示，样式className为：amap-marker-label
marker.setLabel({
    //修改label相对于maker的位置
    offset: new AMap.Pixel(20, 20),
    content: "<div class='info'>我是 marker 的 label 标签</div>"
});
  • 点聚合

使用AMap.MarkerClusterer展示大量的Marker点，可灵活设定聚合样式。

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)'; // 色调 饱和 亮度 透明度
    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) {//自定义图标
        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),
    // 设置是否可以拖拽
    draggable: true,
    cursor: 'move',
    // 设置拖拽效果
    raiseOnDrag: false
});

marker.setMap(map);.

// 设置点标记的动画效果，此处为弹跳效果
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(); // 继续

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) { // 鼠标移入展示label
    marker.setPosition(e.data.lnglat);
    marker.setLabel({content: e.data.name})
});

mass.setMap(map);
mass.setStyle(style); // 多个图标
mass.setStyle(style[2]); // 单个图标
  • 添加 / 移除覆盖物群组

对一类覆盖物，创建覆盖物群组，从地图上添加/移除。使用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];
    // 创建点实例
    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);
}

// 创建覆盖物群组，并将 marker 传给 OverlayGroup
var overlayGroups = new AMap.OverlayGroup(markers);

// 添加覆盖物群组
map.add(overlayGroups);

// 移除覆盖物群组
map.remove(overlayGroups);

// 批量改变 overlayGroups 内覆盖物的属性
overlayGroups.setOptions({
    strokeColor: '#ffeeff',
    outlineColor: '#3366FF'
});

相关文章

  • 高德地图 JS API 学习摘要3

    覆盖物 通用 setFitView() 地图上覆盖物较多的情况下，如果需要保证所有覆盖物都在视野范围内， 需要将地...

  • 高德地图 JS API 学习摘要6

    地理编码 地址 -> 坐标 Geocoder.getLocation，使用地理编码接口，根据地址转获取经纬度位置。...

  • 高德地图 JS API 学习摘要2

    自定义地图 指定Map.mapStyle属性，实现自定义样式地图。 使用Map.setMapStyle()方法，加...

  • 高德地图 JS API 学习摘要1

    1、安装 准备-入门-教程-地图 JS API 2、使用 1、在页面添加 JS API 的入口脚本标签，并将其中「...

  • 高德地图 JS API 学习摘要4

    地图控件 添加与移除 简易缩放按钮 3D控制罗盘 信息窗体 默认样式信息窗体 自定义样式信息窗体 信息窗体内的事件...

  • 高德地图 JS API 学习摘要5

    输入提示 获取输入提示数据 使用 Autocomplete 获取输入提示信息。 输入提示 联想输入 使用Autoc...

  • vue项目 使用google地图

    谷歌和高德地图都需要安装相关的js-api-loader google地图与高德地图都需要有API密钥以googl...

  • JS与Android —— 高德地图改变主题

    为什么要用JS改变主题？ 安卓中的高德地图API支持普通地图和卫星地图以及夜景模式地图的展示。而JS中的高德地图A...

  • 地图产品开发必备知识

    成熟的地图平台有谷歌地图、百度地图、腾讯地图、高德地图等。 学习了解地图API，包括JavaScript API、...

  • IOS 调用地图

    App中如何打开百度或者高德地图 百度地图URI API地址高德地图URI API地址腾讯地图URI API地址 ...

网友评论

      本文标题：高德地图 JS API 学习摘要3

      本文链接：https://www.haomeiwen.com/subject/pfkkeqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|高德地图 JS API 学习摘要3|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！