百度地图标注maker图标按照分类显示不同的样式

在这里插入图片描述
一、确定数据源,其中id代表不同的类别;

 var markerArr = [
        {title: "名称:雾云山种植基地", point: "108.813777,27.722807", id: "1", address: "江口县鄞州区泰康中路558号", tel: "0574-89018188"},
        {
            title: "名称:水银山种植基地",
            point: "108.745937,27.688522",
            id: "3",
            address: "浙江省江口县鄞州区钱湖南路1058",
            tel: "132-8138-8881"
        },
        {
            title: "名称:铜鼓坡种植基地",
            point: "108.740762,27.742759",
            id: "1",
            address: "江口县鄞州区首南街道钱湖南路928号 ",
            tel: "132-8138-8881"
        },
        {title: "名称:黑岩山种植基地", point: "108.863219,27.679309", id: "2", address: "江口县鄞州区首南中路", tel: "132-8138-8881"},
        {
            title: "名称:顶子坡种植基地",
            point: "108.836198,27.624016",
            id: "3",
            address: "江口县鄞州区利时金融大厦(浙江万里学院西)",
            tel: "132-8138-8881"
        },
        {
            title: "名称:鹅丝坳种植基地",
            point: "108.794804,27.755036",
            id: "4",
            address: "首南中路666号开元名都大酒店1楼",
            tel: "132-8138-8881"
        },
        {
            title: "名称:云舍种植基地)",
            point: "108.821251,27.751455",
            id: "3",
            address: "途径公交车:102路; 107路; 126路; 129路; 160路; 166路东环线; 166路西环线;",
            tel: "132-8138-8881"
        },
        {
            title: "名称:民和镇种植基地)",
            point: "108.797679,27.543842",
            id: "4",
            address: "途径公交车:102路; 107路; 126路; 129路; 160路; 166路东环线; 166路西环线;",
            tel: "132-8138-8881"
        },
        {
            title: "名称:老鸭顶种植基地)",
            point: "108.427433,27.781374",
            id: "2",
            address: "途径公交车:102路; 107路; 126路; 129路; 160路; 166路东环线; 166路西环线;",
            tel: "132-8138-8881"
        },
        {
            title: "名称:西牛岩种植基地)",
            point: "108.942558,27.627857",
            id: "2",
            address: "途径公交车:102路; 107路; 126路; 129路; 160路; 166路东环线; 166路西环线;",
            tel: "132-8138-8881"
        },
        {
            title: "名称:三角陂种植基地)",
            point: "108.872418,27.542817",
            id: "2",
            address: "途径公交车:102路; 107路; 126路; 129路; 160路; 166路东环线; 166路西环线;",
            tel: "132-8138-8881"
        }
    ];

二、定义图标,cat代表传递过来的参数id;

 function addMarker(point, index, cat) {
        //定义图表类型;
        var imgUrl = 'http://jiangkou.qiaodu.net/images/markers' + cat + '.png';
        var myIcon = new BMap.Icon(imgUrl,
                new BMap.Size(23, 25), {
                    offset: new BMap.Size(10, 25),
                    imageOffset: new BMap.Size(0, 0 - index * 25)
                });
        var marker = new BMap.Marker(point, {icon: myIcon});
        map.addOverlay(marker);
        return marker;
    }

三,绘制点,显示分类图标

绘制点
        for (var i = 0; i < markerArr.length; i++) {
            var p0 = markerArr[i].point.split(",")[0];
            var p1 = markerArr[i].point.split(",")[1];
            var cat = markerArr[i].id;
            var maker = addMarker(new window.BMap.Point(p0, p1), i, cat);
            addInfoWindow(maker, markerArr[i], i);
            //console.log(p0);
        }
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

漏刻有时

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值