文档章节

百度Echarts2.0 组合 BMap

丶你与时光
 丶你与时光
发布于 2017/08/17 00:57
字数 466
阅读 32
收藏 0

          百度Echarts2.0 组合 BMap 使用,直接上代码。

 

<!DOCTYPE html>
<html >
<body>
<div id="bmap"  style="height:350px;"></div>
</body>
</html>
<style>
    .anchorBL{display:none}
</style>
<!-- Javascript Libraries -->

<!--BAIDU  map  api-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="></script>
<!-- jQuery -->
<script src="/static/superadmin/js/jquery.min.js"></script>
<script src="/static/echarts/build/dist/echarts.js"></script>
<script>
    require.config({
        packages: [
            {
                name: 'echarts',
                location: '/static/echarts/src',
                main: 'echarts'
            },
            {
                name: 'zrender',
                //location: 'http://ecomfe.github.io/zrender/src',
                location: '/static/zrender-2.1.0/src',
                main: 'zrender'
            },
            {
                name: 'BMap',
                location: '/static/echarts/extension/BMap/src',
                main: 'main'
            }
        ]
    });
    require(
            [
                'echarts',
                'BMap',
                'echarts/chart/map'
            ],
            function (echarts, BMapExtension) {
                // 初始化地图
                var BMapExt = new BMapExtension($('#bmap')[0], BMap, echarts, {
                    enableMapClick: false
                });
                var map = BMapExt.getMap();
                var container = BMapExt.getEchartsContainer();

                var startPoint = {
                    x: 104.114129,
                    y: 37.550339
                };

                var point = new BMap.Point(startPoint.x, startPoint.y);
                map.centerAndZoom(point, 5);
                map.enableScrollWheelZoom(true);
                // 地图自定义样式  可以不加,如果不加地图会是百度地图原样
                map.setMapStyle({
                    styleJson: [
                        {
                            "featureType": "water",
                            "elementType": "all",
                            "stylers": {
                                "color": "#044161"
                            }
                        },
                        {
                            "featureType": "land",
                            "elementType": "all",
                            "stylers": {
                                "color": "#004981"
                            }
                        },
                        {
                            "featureType": "boundary",
                            "elementType": "geometry",
                            "stylers": {
                                "color": "#064f85"
                            }
                        },
                        {
                            "featureType": "railway",
                            "elementType": "all",
                            "stylers": {
                                "visibility": "off"
                            }
                        },
                        {
                            "featureType": "highway",
                            "elementType": "geometry",
                            "stylers": {
                                "color": "#004981"
                            }
                        },
                        {
                            "featureType": "highway",
                            "elementType": "geometry.fill",
                            "stylers": {
                                "color": "#005b96",
                                "lightness": 1
                            }
                        },
                        {
                            "featureType": "highway",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off"
                            }
                        },
                        {
                            "featureType": "arterial",
                            "elementType": "geometry",
                            "stylers": {
                                "color": "#004981"
                            }
                        },
                        {
                            "featureType": "arterial",
                            "elementType": "geometry.fill",
                            "stylers": {
                                "color": "#00508b"
                            }
                        },
                        {
                            "featureType": "poi",
                            "elementType": "all",
                            "stylers": {
                                "visibility": "off"
                            }
                        },
                        {
                            "featureType": "green",
                            "elementType": "all",
                            "stylers": {
                                "color": "#056197",
                                "visibility": "off"
                            }
                        },
                        {
                            "featureType": "subway",
                            "elementType": "all",
                            "stylers": {
                                "visibility": "off"
                            }
                        },
                        {
                            "featureType": "manmade",
                            "elementType": "all",
                            "stylers": {
                                "visibility": "off"
                            }
                        },
                        {
                            "featureType": "local",
                            "elementType": "all",
                            "stylers": {
                                "visibility": "off"
                            }
                        },
                        {
                            "featureType": "arterial",
                            "elementType": "labels",
                            "stylers": {
                                "visibility": "off"
                            }
                        },
                        {
                            "featureType": "boundary",
                            "elementType": "geometry.fill",
                            "stylers": {
                                "color": "#029fd4"
                            }
                        },
                        {
                            "featureType": "building",
                            "elementType": "all",
                            "stylers": {
                                "color": "#1a5787"
                            }
                        },
                        {
                            "featureType": "label",
                            "elementType": "all",
                            "stylers": {
                                "visibility": "off"
                            }
                        }
                    ]
                });

                option={
                    color: [
                        'gold',
                        'aqua',
                        'lime'
                    ],
                   
                    tooltip: {
                        trigger: 'item',
                        formatter: function(v){
                            var v1=v[1];
                            var v2=v[2];
                            return v1+v2+"次";
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: [
                            '标注'
                        ],
                        selectedMode: 'multiple'
                    },
//                    toolbox: {
//                        show: true,
//                        orient: 'vertical',
//                        x: 'right',
//                        y: 'center',
//                        feature: {
//                            mark: {
//                                show: true
//                            },
//                            dataView: {
//                                show: true,
//                                readOnly: false
//                            },
//                            restore: {
//                                show: true
//                            },
//                            saveAsImage: {
//                                show: true
//                            }
//                        }
//                    },
                    dataRange: {
                        min: 0,
                        max: 100,
                        y: '60%',
                        calculable: true,
                        color: [
                            '#ff3333',
                            'orange',
                            'yellow',
                            'lime',
                            'aqua'
                        ]
                    },
                    series: [
                        {
                            name: '标注',
                            type: 'map',
                            mapType: 'none',
                            data: [

                            ],
                            geoCoord: {
                                "辽宁省沈阳": [
                                    123.431991,
                                    41.806243
                                ],
                                "辽宁省锦州": [
                                    121.126983,
                                    41.094940
                                ],
                                "浙江省杭州": [
                                    120.154388,
                                    30.274002
                                ]
                            },
                            markPoint: {
                                symbol: 'emptyCircle',
                                symbolSize: function(v){
                                    return 10+v/10
                                },
                                effect: {
                                    show: true,
                                    shadowBlur: 0
                                },
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: false
                                        }
                                    }
                                },
                                data: [
                                    {
                                        name: '辽宁省沈阳',
                                        value: 100
                                    },
                                    {
                                        name: '辽宁省锦州',
                                        value: 40
                                    },
                                    {
                                        name: '浙江省杭州',
                                        value: 10
                                    }
                                ]
                            }
                        }
                    ]
                };
                var myChart = BMapExt.initECharts(container);
                window.onresize = myChart.onresize;
                BMapExt.setOption(option);
            }
    );
</script>

 

© 著作权归作者所有

丶你与时光
粉丝 0
博文 3
码字总数 661
作品 0
长春
私信 提问
在React中使用百度地图api的一系列demo

github地址:github.com/shenglifen/… 本次更新 地图实例:地图展示 前言 因为之前工作的关系,会频繁的使用各种地图,例如百度地图,高德地图,谷歌地图等。所以想整理一下,写一个在react...

ssssslf
2018/09/17
0
0
百度地图API入门——(1)第一个超简单应用:显示广州天河公园

1. 先上程序 2. 百度地图API 如上程序所示,更简单的加载方式如此: 3. BMap类 百度地图API提供了最基础的BMap类,我们可以通过其构造函数创建一个BMap对象。 4. centerAndZoom BMap的一个成...

晨曦之光
2012/04/24
835
0
百度地图---之---路径规划

1、百度自带的路径规划 var myP1 = new BMap.Point(116.380967,39.913285); //起点 var myP2 = new BMap.Point(116.424374,39.914668); //终点 var driving2 = new BMap.DrivingRoute(map, ......

吹比龙
2016/03/18
460
0
基于百度地图 api 封装的 React 组件库 - React-BMap

React-BMap 基于百度地图JavaScript Api封装的React组件库,使用这个库最好需要先了解React和百度地图JavaScript Api。 React-BMap只是利用了React组件的生命周期,来调用对应的百度地图Jav...

Kai_Ni
2017/07/04
0
0
百度地图拖动标注后获取坐标

本来想用图吧的API来做的,结果弄了下,在手机上弄不了。换用百度地图了。。本功能个人觉得在很多地方用到,先记下来,省得每次都得翻地图API文档一点一点弄。 功能表现为: 地图一开始打开就...

niunan
2017/05/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Redox OS 发布 0.5 版

Redox OS 是一个几乎完全以 Rust 语言编写的通用操作系统及周围生态(例如文件系统、显示服务器及 Rust 版本的 libc)。其遵循微内核架构,在一定程度上兼容于 POSIX。 该项目于日前发布了 ...

linuxCool
33分钟前
0
0
更新上传git/gitee项目时出现密码配置错误(incorrect username or password)的解决办法

1.输入【git remote add origin git地址】 命令时出现incorrect username or password的错误,这是因为之前弹出输入账户和密码时输错了,而且会一直默认错误的账户和密码,因此需要把之前输入...

west_coast
41分钟前
0
0
Jenkins基础入门-1-Jenkins简单介绍和环境安装

如果在做自动化测试的朋友,应该熟悉Jenkins,或者至少使用过。如果一个人没有使用过Jenkins或者hudson,hudson是Jenkins的前身,他还说自己做过自动化测试,只能说,他只不过是在做半自动化...

shzwork
41分钟前
0
0
linux上解压版安装jdk,tomcat

需要的安装包 1.vmware12 2.centos7版本 3.安装完成后需要xshell来连接远程虚拟机,虚拟机保证要联网,网络畅通。 4.xftp用来向linux传输文件用,一般来说xshell和xftp配套使用 5.对应的压缩...

architect刘源源
今天
26
0
使用 spring 的 IOC 解决程序耦合

工厂模式解耦 在实际开发中我们可以把三层的对象都使用配置文件配置起来,当启动服务器应用加载的时候,让一个类中的方法通过读取配置文件,把这些对象创建出来并存起来。在接下来的使用的时...

骚年锦时
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部