高德地图重要功能小记

叠加别的图层

  var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 13
    });
    //实时路况图层
    var trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10
    });
    map.add(trafficLayer);//添加图层到地图

添加点标记

    var marker = new AMap.Marker({
        position:[116.39, 39.9]//位置
    })
    map.add(marker);//添加到地图

移除点标记

map.remove(marker)

添加椭圆

var circleMarker = new AMap.CircleMarker({
    center: new AMap.LngLat(116.39,39.9),  // 圆心位置
    radius: 10, // 圆半径
    fillColor: 'red',   // 圆形填充颜色
    strokeColor: '#fff', // 描边颜色
    strokeWeight: 2, // 描边宽度
});

map.add(circleMarker);

点击点后触发点击事件

     var infoWindow = new AMap.InfoWindow({ //创建信息窗体
        isCustom: true,  //使用自定义窗体
        content:'<div>信息窗体</div>', //信息窗体的内容可以是任意html片段
        offset: new AMap.Pixel(16, -45)
    });
    var onMarkerClick  =  function(e) {
        infoWindow.open(map, e.target.getPosition());//打开信息窗体
        //e.target就是被点击的Marker
    } 
    var marker = new AMap.Marker({
         position: [116.481181, 39.989792]
    })
    map.add(marker);
    marker.on('click',onMarkerClick);//绑定click事件

地图加载完成后触发事件

map.on('complete', function(){
    // 地图图块加载完成后触发
});

销毁地图

// 销毁地图，并清空地图容器
map.destroy( );

size: new AMap.Size(40, 50),    // 图标尺寸

AMap.MarkerClusterer 插件使用

var sts=[{
    url:"imgs/1.png",
    size:new AMap.Size(32,32),
    offset:new AMap.Pixel(-16,-30)
},
{
    url:"imgs/2.png",
    size:new AMap.Size(32,32),
    offset:new AMap.Pixel(-16,-30)
},
{
    url:"imgs/3.png",
    size:new AMap.Size(48,48),
    offset:new AMap.Pixel(-24,-45), 
    textColor:'#CC0066'
}];
 let   cluster = new AMap.MarkerClusterer(mapObj,markers,{styles:sts});
);

mapObj为地图对象，marker为

let markers = []
markers.push(new AMap.Marker({
          position: this.allPoints[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)
        }))

高德地图重要功能小记

猜你喜欢