百度地图 - 使用marker.setIcon设置标注的图标

前提:异步加载情况下,修改标注物的图标,可使用marker.setIcon(),更改已有标注的图标。

var markers = [];
var lng = 116.404
var lat = 39.915;
for(var i=0; i<5; i++) {
    lng += i*0.01;
    lat += i*0.01;
    var point = new BMap.Point(lng, lat);
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    markers.push(marker);
    (function(j){
         setTimeout(function(){
             var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300,157));
             markers[j].setIcon(myIcon);
         },1000);
     })(i);
}
百度地图的新版本BMapGL中,Marker是一个用于标记地理位置的对象,它有一个Icon属性可以设置自定义图标。如果你想让Marker图标旋转,你需要创建一个自定义的BMapGL.Icon,并提供一个canvas元素,其中包含你的图标图像。在这个canvas上,你可以使用HTML5 Canvas API的rotate()方法来旋转图标。 首先,创建一个HTML canvas元素: ```html <canvas id="custom-marker"></canvas> ``` 然后,在JavaScript中加载这个canvas并绘制图标,同时处理旋转: ```javascript // 获取canvas元素 var canvas = document.getElementById('custom-marker'); var ctx = canvas.getContext('2d'); // 初始化图标位置和角度 var iconAngle = 0; var iconSize = 32; // 你的图标大小 // 定义图标绘制函数 function drawIcon(angle) { ctx.clearRect(0, 0, iconSize, iconSize); ctx.save(); ctx.translate(iconSize / 2, iconSize / 2); ctx.rotate(angle * Math.PI / 180); // 绘制你的图标图片 ctx.drawImage(yourImage, -yourImage.width / 2, -yourImage.height / 2, yourImage.width, yourImage.height); ctx.restore(); } // 创建BMapGL.Icon实例 var markerIcon = new BMapGL.Icon('url/to/your/image.png', { size: new BMap.Size(iconSize, iconSize), canvas: drawIcon }); // 创建Marker设置旋转图标 var marker = new BMapGL.Marker(new BMap.Point(longitude, latitude), { icon: markerIcon }); marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 可选,添加动画效果 marker.addEventListener('click', function() { // 更新旋转角度 iconAngle += 45; // 每次点击增加45度旋转 marker.setIcon({ url: 'url/to/your/image.png', angle: iconAngle }); // 更新图标 }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值