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

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

20191219194428592.png


一、确定数据源,其中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);
        }
相关文章
|
定位技术
百度地图开发:map.setViewport让标注显示在最佳视野内
百度地图开发:map.setViewport让标注显示在最佳视野内
327 0
|
移动开发 JavaScript 前端开发
数据可视化大屏百度地图手机端标注开发实战案例解析(jsAPI接口、标注分类图片、文本标签、分类筛选、自适应高度信息弹窗、PHP后端API)
数据可视化大屏百度地图手机端标注开发实战案例解析(jsAPI接口、标注分类图片、文本标签、分类筛选、自适应高度信息弹窗、PHP后端API)
205 0
|
数据可视化 前端开发 搜索推荐
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
288 0
|
定位技术 API 容器
百度地图API开发:停车场分布标注和检索静态版
百度地图API开发:停车场分布标注和检索静态版
150 0
|
6月前
|
容器
百度富文本上传图片后样式崩塌
百度富文本上传图片后样式崩塌
58 0
百度富文本上传图片后样式崩塌
|
搜索推荐 数据可视化 JavaScript
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
213 1
|
数据可视化 前端开发 安全
漏刻有时地理信息可视化百度地图标注系统本地Excel版说明书
漏刻有时地理信息可视化百度地图标注系统本地Excel版说明书
88 1
|
前端开发 定位技术 数据安全/隐私保护
百度地图高级开发:LBS服务实时定位覆盖范围内关键词标注的解决方案(2)
百度地图高级开发:LBS服务实时定位覆盖范围内关键词标注的解决方案(2)
89 0
|
JSON 定位技术 API
百度地图高级开发:获取某范围半径圆形区域检索覆盖物内的所有标注的解决方案(1)
百度地图高级开发:获取某范围半径圆形区域检索覆盖物内的所有标注的解决方案(1)
283 0
|
JSON JavaScript 定位技术
python实现直接读取excle数据实现的百度地图标注
python实现直接读取excle数据实现的百度地图标注
116 0

热门文章

最新文章