bMap+Echarts--百度地图使用方法

迷南。 2023-07-25 11:12 70阅读 0赞

项目需求将客户添加的站点如下表示在百度地图上，[这是官网的示例][Link 1]，鼠标滑过显示基本信息，打了一些马赛克，凑合看，蓝色圆点都是添加的站点：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]  
首先引入相关文件：  
![在这里插入图片描述][2020041416463072.png]  
然后：

var len = data.rows.length    //  data.rows是后台返回站点的数组
    var mapChart = echarts.init(document.getElementById('myChart'));   //  初始化echarts
    // 将得到的数据转换成需要的二维数组的形式
    var array = [];
    for (var i=0;i<len;i++) {
        var arr0 = []
        arr0.push(data.rows[i].longitude,data.rows[i].latitude,data.rows[i].orgName,data.rows[i].place,data.rows[i].orgId)
        array.push(arr0)
    }
    //  最终 array 的形式：[[120.3, 30.2, '第一个站点',  1],[100.3, 50.2, '第二个站点',  2]...]
    mapChart.setOption({    //  地图相关配置项
        bmap: {
            center: [121.060838, 31.11664],    //  中心点
            zoom: 12,          //  放大倍数
            roam: true,
        },
        title: {      //  标题样式
            x: "center",
            subtextStyle: {
                color: '#00F6FF',
                fontSize: 15,
                textShadowColor: "#64FAFF",
                textShadowBlur: 5,
                textShadowOffsetX: 0,
                textShadowOffsetY: 0,
            },
        },
        tooltip: {   //  每个站点的显示信息
            trigger: 'item',
            formatter: function (params) {   //  params是数组array里每个项
                return "所属区域：" + params.value[2] + "<br/>地点：" + params.value[3] + "<br>经度：" + params.value[1] + "<br/>纬度：" + params.value[0] + "<br/>"
            }
        },
        series: [{
            type: 'scatter',
            coordinateSystem: 'bmap',
            symbol: "circle",      // 标识点的样式
            symbolSize: "16",     // 标识点的大小
            color: "#0031C4",     // 标识点的颜色
            data: array,     // 标识点的数组array
        }]
    });
    // 点击每个站点可以进行相关操作
    mapChart.on("click",function (e) {
       console.log(e)    //  每个标识点的信息
    })
    var bmap = mapChart.getModel().getComponent('bmap').getBMap();    // 通过echarts实例获取地图实例的方法
    bmap.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP]}));    //  看这里 http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a2b15
    // bmap.setMapStyle({style: 'midnight'});  //  地图样式 
    // http://lbsyun.baidu.com/index.php?title=jspopular/guide/custom    官网v2.0
    // http://lbsyun.baidu.com/custom/list.htm     官网v2.0
    //默认地图样式(normal)
    //清新蓝风格(light)
    //黑夜风格(dark)
    //清新蓝绿风格(bluish)
    //高端灰风格(grayscale)
    //强边界风格(hardedge)
    //青春绿风格(darkgreen)
    //浪漫粉风格(pink)
    //午夜蓝风格(midnight)
    //自然绿风格(grassgreen)
    //精简风格(googlelite)
    //红色警戒风格(redalert)
    
    //  上面这些模板样式如果无法满足需求，可以自己编辑个性化样式   http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/custom
    
    $(window).resize(function () {   // 自适应
        mapChart.resize();
    })

至此就能完整的渲染出了，我查阅的时候发现[这篇博客写的非常好][Link 2]，可以结合看看，最重要多看看官网API。

[Link 1]: https://www.echartsjs.com/examples/zh/index.html#chart-type-map
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: /images/20230528/38391cf9e8034864953b682fb24bc151.png
[2020041416463072.png]: /images/20230528/4deb97372a25481abe753c0afa8565b0.png
[Link 2]: https://blog.csdn.net/Fimooo/article/details/102948186

发表评论取消回复

表情：

评论列表（有 0 条评论，70人围观）

还没有评论，来说两句吧...

相关阅读

相关 bMap+Echarts--百度地图使用方法

项目需求将客户添加的站点如下表示在百度地图上，[这是官网的示例][Link 1]，鼠标滑过显示基本信息，打了一些马赛克，凑合看，蓝色圆点都是添加的站点： ![在这里插入图片

迷南。/ 2023年07月25日 11:12/ 0 赞/ 71 阅读

相关百度地图

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&services=true"></

电玩女神/ 2022年10月01日 03:58/ 0 赞/ 420 阅读

相关 Androida百度地图开发之显示百度地图

前提需要自己获取apikey 如果还不会获取，可参考网址: [http://blog.csdn.net/zhengyikuangge/article/details/

不念不忘少年蓝@/ 2022年09月23日 11:55/ 0 赞/ 400 阅读

相关百度地图API使用记录

背景：最近需要开发一个使用到地图的网站，对百度地图API做了些研究，记录如下使用方法： 1.引入百度脚本 <span style="

逃离我推掉我的手/ 2022年08月05日 08:16/ 0 赞/ 374 阅读

相关百度地图

百度地图Demo 详情请看 [http://lbsyun.baidu.com/index.php?title=jspopular/guide/introduction

太过爱你忘了你带给我的痛/ 2022年07月13日 10:59/ 0 赞/ 542 阅读

相关 html百度地图使用记录

map.panTo(new\_point); 需要在当前窗口下才能调用成功。tab要切换到才能调用有效果 ![Image 1][] var

Love The Way You Lie/ 2022年06月09日 03:08/ 0 赞/ 333 阅读

相关百度地图

PC端定位不准确主要应用到移动端第一、申请百度密钥很简单的几步就搞定第二、引入文件 html 代码效果预览 1 2 3 4 5

朱雀/ 2022年06月05日 04:42/ 0 赞/ 491 阅读

相关百度地图

$(function(){ var BMapInit=function(){ var map =

曾经终败给现在/ 2022年05月23日 09:57/ 0 赞/ 480 阅读

相关 iOS 百度地图大头针使用

百度地图使用第五讲：大头针使用（地图标注） http://bbs.yusian.com/thread-8384-1-1.html (出处: 小龙虾IT笔记) 转载于:

痛定思痛。/ 2021年12月23日 06:17/ 0 赞/ 223 阅读

相关百度地图API 加载百度地图

前言百度地图在日常生活中应用的越来越多，功能也日渐丰富，我们可以使用ArcGIS JS API加载在线百度地图（[https://blog.csdn.net/i

布满荆棘的人生/ 2021年09月15日 02:50/ 0 赞/ 845 阅读