设为首页 加入收藏

TOP

百度地图API图标、文本、图例与连线(二)
2019-09-17 18:48:42 】 浏览:48
Tags:百度 地图 API 图标 文本 图例 连线
dCtrl = new LegendControl(); map.addControl(legendCtrl); }

2.5 综合

有了以上函数,综合起来就流程清晰了。以下坐标,均通过坐标拾取器获取。

    // 机器类:经度,纬度,名称
    function Machine(longitude, latitude, name){
        this.longitude = longitude;
        this.latitude = latitude;
        this.name = name;
    } 

    // 确定地图的中心位置与缩放级别
    var center = new BMap.Point(110.423997,31.40979);             
    map.centerAndZoom(center, 6);  // 级别 6,跨省视图

    // 添加图例,自由写 html
    addLegend("<div style='font-size:12px; color:gray; width:140px; padding:5px; background:white; text-align:center; border:solid 1px gray;'>总部:<img src='head.png' style='width:16px; vertical-align:middle;' />&nbsp;&nbsp;设备:<img src='machine.png'  style='width:16px; vertical-align:middle;' /></div>");

    // 总部位置
    var head = { longitude : 112.918702343957, latitude : 28.30070516 };
    addMarker(head.longitude, head.latitude, 'head', '总部');

    // 所有机器位置
    var machineList = [
        new Machine(114.876143,38.113315,'石家庄'),
        new Machine(112.521289,37.822014,'太原'),
        new Machine(108.989008,34.328175,'西安'),
        new Machine(117.230997,31.881961,'合肥'),
        new Machine(103.984944,30.553819,'成都'),
        new Machine(108.400295,22.862517,'南宁'),
        new Machine(113.257181,23.169067,'广州'),
        new Machine(120.174565,30.298715,'杭州'),
        new Machine(102.881106,24.959705,'昆明')
    ];

    // 添加所有机器并连线
    for(var i=0; i<machineList.length; i++){
        addMarker(machineList[i].longitude, machineList[i].latitude, 'machine', machineList[i].name);
        addLine(head.longitude, head.latitude, machineList[i].longitude, machineList[i].latitude);
    } 

3. 结语

本文完整代码可从此处下载:

https://github.com/triplestudio/helloworld/blob/master/baidu_map_demo.html

在此基础上,可以根据需要进一步扩展功能,具体参考百度地图开放平台开发文档:

http://lbsyun.baidu.com/

首页 上一页 1 2 下一页 尾页 2/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇JavaScript概述 下一篇【nodejs原理&源码赏析(7)】【..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目