首页手记 Echart百度地图使用

Echart百度地图使用

标签：

JavaScript

本文主要叙说了百度地图的两种用法：
1 在页面上直接调用百度地图API，显示地图
2 使用Echart框架可视化加载百度地图API
这两种使用方式，都举例说明，便于理解

一在页面上直接使用百度地图API

首先申请百度地图JavaScript AP ak，这个ak可以理解我一种身份验证，调用百度地图必须有ak才能调用。百度地图API官网地址

ak申请

下例中调用百度地图API初始化一个地图，并定位到当前城市，直接上代码：

1首先引用百度地图API js

<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://api.map.baidu.com/api?v=2.0&ak=……"></script>

2添加一个div容器，用于地图的渲染位置
<div id="allmap"></div>

3写代码实例化地图，获取当前位置并让地图定位到当前位置

var map = new BMap.Map("allmap");
map.enableScrollWheelZoom();
map.enableInertialDragging();
map.enableContinuousZoom();
map.addControl(new BMap.NavigationControl());//平移缩放控件    map.addControl(new BMap.ScaleControl());    //比例尺map.addControl(new BMap.OverviewMapControl());  //缩略地图  map.addControl(new BMap.MapTypeControl());   //地图类型 var geolocation = new BMap.Geolocation();//定位geolocation.getCurrentPosition(function(r){    if(this.getStatus() == BMAP_STATUS_SUCCESS){        var mk = new BMap.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);
        InitMAP(r.point.lng,r.point.lat)
        alert('您的位置：'+r.point.lng+','+r.point.lat);
    }    else {
        alert('failed'+this.getStatus());
        InitMAP(116.331398,39.897445)
    }        
});function InitMAP(X,Y){    var point = new BMap.Point(X,Y);//var point = new BMap.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);
}

image.png

二使用Echart框架可视化加载百度地图API

同上例使用之前也要申请百度地图JavaScript AP ak，无论什么方式ak是必须条件

1 首先引用百度地图API .Echart和Echart百度地图扩展js

<environment names="Development">
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://api.map.baidu.com/api?v=2.0&ak=……"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="~/js/echarts.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="~/js/bmap.min.js"></script></environment>

environment是我的后台环境配置，不使用.net core框架的直接去掉

2 添加一个div容器，用于地图的渲染位置

<div class="wrap">
    <div class="map" id="map">
    </div></div>

-3

GHJ();//初始化定位var geolocation = new BMap.Geolocation();//获取定位信息geolocation.getCurrentPosition(function (r) {    if (this.getStatus() == BMAP_STATUS_SUCCESS) {        var city = r.address.city.substring(0, r.address.city.length - 1);        // r.address.city.Substring(0, r.address.city.Length - 1);
        InsertAddress(city , r.point.lng, r.point.lat) //r.point.lng
    }    else {        console.log('failed 你的位置未知' + this.getStatus()); //alert('failed 你的位置未知' + this.getStatus());       
    }
});//初始化地图function GHJ() { 
    var request = {};
    request.type = 'GET';
    request.url = '/Address/TrySelectALLCompetence';
    request.data = "";
    request.datatype = "json";    // request.Ticket = '@ViewData["Ticket"]';
    request.success = function (result) {        var res = JSON.parse(result);     
        data = [];        for (var i = 0; i < res.length; i++) {            var s = {};
            s.name = res[i].Name;
            s.value = res[i].Count;
            data.push(s);
            s = null;
        }
        option = {            title: {                textStyle: {                    color: '#fff'
                },                subtextStyle: {                    color: '#fff'
                },                text: '系统登录分布地图',                subtext: '作者 凌云木',                sublink: 'https://www.jianshu.com/u/79758fa3d8b0',                left: 'center'
            },            tooltip: {                trigger: 'item'
            },            legend: {                orient: 'vertical',                zlevel: 2,                //top: 45,
                right: 20,                data: ['累计', 'Top5']
            },            bmap: {                // 百度地图中心经纬度
                center: [104.114129, 37.550339],                // 百度地图缩放
                zoom: 5,                type: 'map',                //mapType: 'china',
                //selectedMode: 'multiple',
                //是否开启拖拽缩放，可以只设置 'scale' 或者 'move'
                roam: true,                //百度地图的自定义样式
                mapStyle: {                    styleJson: [
                        {                            "featureType": "water",                            "elementType": "all",                            "stylers": {                                "color": "#72b8fe"
                            }
                        },
                        {                            "featureType": "road",                            "elementType": "geometry.fill",                            "stylers": {                                "color": "#ffffff"
                            }
                        },
                        {                            "featureType": "road",                            "elementType": "geometry.stroke",                            "stylers": {                                "color": "#bababa"
                            }
                        },
                        {                            "featureType": "road",                            "elementType": "labels.text.fill",                            "stylers": {                                "color": "#767676"
                            }
                        },
                        {                            "featureType": "road",                            "elementType": "labels.text.stroke",                            "stylers": {                                "color": "#ffffff"
                            }
                        },
                        {                            "featureType": "land",                            "elementType": "all",                            "stylers": {                                "color": "#b8cb93"
                            }
                        }
                    ]
                }
            },            series: [
                {                    name: '累计',                    type: 'scatter',//散点类型
                    coordinateSystem: 'bmap',                    data: convertData(data),                    symbolSize: function (val) {                        return val[2] / 10;
                    },                    label: {                        normal: {                            formatter: '{b}{c}',                            position: 'right',                            show: false
                        },                        emphasis: {                            show: false
                        }
                    },                    tooltip: {                        formatter: function (param) {                            return param.name + '已有' + param.value[2] + '人登录';

                        }
                    },                    itemStyle: {                        normal: {                            color: '#f4e925'
                        }
                    }
                },
                {                    name: 'Top5',                    type: 'effectScatter',//散点（气泡）图
                    coordinateSystem: 'bmap',                    data: convertData(data.sort(function (a, b) {                        return b.value - a.value;//按照值的大小排序，并选择前五项
                    }).slice(0, 6)),                    symbolSize: function (val) {                        return val[2] / 10;
                    },                    showEffectOn: 'render',//配置何时显示特效。
                    rippleEffect: {//涟漪特效相关配置。
                        brushType: 'stroke'
                    },                    hoverAnimation: true,                    label: {                        normal: {                            formatter: '{b}{c}',                            position: 'right',                            show: false
                        },                        emphasis: {                            show: false
                        }
                    },                    tooltip: {                        formatter: function (param) {                            return ' 【TOP5】' + param.name + '已有' + param.value[2] + '人登录';
                        }
                    },                    itemStyle: {                        normal: {                            color: 'red',                            shadowBlur: 10,                            shadowColor: '#1334'
                        }
                    },                    zlevel: 1
                }
            ]
        };        var mapBox = document.getElementById('map');        var w = document.documentElement.clientWidth;        var h = document.documentElement.clientHeight;
        mapBox.style.width = w - 200 + 'px';
        mapBox.style.height = h - 200 + 'px';        var myChart = echarts.init(document.getElementById('map'));
        myChart.setOption(option);        //console.log(data);
    }
    ajax(request);
};//插入当前登录用户的位置信息function InsertAddress(Name, Lng, Lat) {    var params = {};
    params.Name =Name
    params.Lng = Lng;
    params.Lat = Lat;    var request = {};
    request.type = 'POST';
    request.url = '/Address/TryUpdateAddress'//TryUpdateAddress;
    request.data = params;
    request.datatype = "json";
    request.success = function (result) {        var res = JSON.parse(result);        if (res.IsSuccess == 1) {            //layer.msg(result.Message, { icon: 1 });   
            console.log("位置信息更新成功");
        }        else {            //layer.msg(res.Message, { icon: 2 });
            console.log("位置信息更新失败");
        }
    };
    ajax(request);
    param = null;

}var geoCoordMap = {    '海门': [121.15, 31.89],    '鄂尔多斯': [109.781327, 39.608266],    '招远': [120.38, 37.35],    '舟山': [122.207216, 29.985295],    '齐齐哈尔': [123.97, 47.33],    '盐城': [120.13, 33.38],    '赤峰': [118.87, 42.28],    '青岛': [120.33, 36.07],    '乳山': [121.52, 36.89],    '金昌': [102.188043, 38.520089],    '泉州': [118.58, 24.93],    '莱西': [120.53, 36.86],    '日照': [119.46, 35.42],    '胶南': [119.97, 35.88],    '南通': [121.05, 32.08],    '拉萨': [91.11, 29.97],    '云浮': [112.02, 22.93],    '梅州': [116.1, 24.55],    '文登': [122.05, 37.2],    '上海': [121.48, 31.22],    '攀枝花': [101.718637, 26.582347],    '威海': [122.1, 37.5],    '承德': [117.93, 40.97],    '厦门': [118.1, 24.46],    '汕尾': [115.375279, 22.786211],    '潮州': [116.63, 23.68],    '丹东': [124.37, 40.13],    '太仓': [121.1, 31.45],    '曲靖': [103.79, 25.51],    '烟台': [121.39, 37.52],    '福州': [119.3, 26.08],    '瓦房店': [121.979603, 39.627114],    '即墨': [120.45, 36.38],    '抚顺': [123.97, 41.97],    '玉溪': [102.52, 24.35],    '张家口': [114.87, 40.82],    '阳泉': [113.57, 37.85],    '莱州': [119.942327, 37.177017],    '湖州': [120.1, 30.86],    '汕头': [116.69, 23.39],    '昆山': [120.95, 31.39],    '宁波': [121.56, 29.86],    '湛江': [110.359377, 21.270708],    '揭阳': [116.35, 23.55],    '荣成': [122.41, 37.16],    '连云港': [119.16, 34.59],    '葫芦岛': [120.836932, 40.711052],    '常熟': [120.74, 31.64],    '东莞': [113.75, 23.04],    '河源': [114.68, 23.73],    '淮安': [119.15, 33.5],    '泰州': [119.9, 32.49],    '南宁': [108.33, 22.84],    '营口': [122.18, 40.65],    '惠州': [114.4, 23.09],    '江阴': [120.26, 31.91],    '蓬莱': [120.75, 37.8],    '韶关': [113.62, 24.84],    '嘉峪关': [98.289152, 39.77313],    '广州': [113.23, 23.16],    '延安': [109.47, 36.6],    '太原': [112.53, 37.87],    '清远': [113.01, 23.7],    '中山': [113.38, 22.52],    '昆明': [102.73, 25.04],    '寿光': [118.73, 36.86],    '盘锦': [122.070714, 41.119997],    '长治': [113.08, 36.18],    '深圳': [114.07, 22.62],    '珠海': [113.52, 22.3],    '宿迁': [118.3, 33.96],    '咸阳': [108.72, 34.36],    '铜川': [109.11, 35.09],    '平度': [119.97, 36.77],    '佛山': [113.11, 23.05],    '海口': [110.35, 20.02],    '江门': [113.06, 22.61],    '章丘': [117.53, 36.72],    '肇庆': [112.44, 23.05],    '大连': [121.62, 38.92],    '临汾': [111.5, 36.08],    '吴江': [120.63, 31.16],    '石嘴山': [106.39, 39.04],    '沈阳': [123.38, 41.8],    '苏州': [120.62, 31.32],    '茂名': [110.88, 21.68],    '嘉兴': [120.76, 30.77],    '长春': [125.35, 43.88],    '胶州': [120.03336, 36.264622],    '银川': [106.27, 38.47],    '张家港': [120.555821, 31.875428],    '三门峡': [111.19, 34.76],    '锦州': [121.15, 41.13],    '南昌': [115.89, 28.68],    '柳州': [109.4, 24.33],    '三亚': [109.511909, 18.252847],    '自贡': [104.778442, 29.33903],    '吉林': [126.57, 43.87],    '阳江': [111.95, 21.85],    '泸州': [105.39, 28.91],    '西宁': [101.74, 36.56],    '宜宾': [104.56, 29.77],    '呼和浩特': [111.65, 40.82],    '成都': [104.06, 30.67],    '大同': [113.3, 40.12],    '镇江': [119.44, 32.2],    '桂林': [110.28, 25.29],    '张家界': [110.479191, 29.117096],    '宜兴': [119.82, 31.36],    '北海': [109.12, 21.49],    '西安': [108.95, 34.27],    '金坛': [119.56, 31.74],    '东营': [118.49, 37.46],    '牡丹江': [129.58, 44.6],    '遵义': [106.9, 27.7],    '绍兴': [120.58, 30.01],    '扬州': [119.42, 32.39],    '常州': [119.95, 31.79],    '潍坊': [119.1, 36.62],    '重庆': [106.54, 29.59],    '台州': [121.420757, 28.656386],    '南京': [118.78, 32.04],    '滨州': [118.03, 37.36],    '贵阳': [106.71, 26.57],    '无锡': [120.29, 31.59],    '本溪': [123.73, 41.3],    '克拉玛依': [84.77, 45.59],    '渭南': [109.5, 34.52],    '马鞍山': [118.48, 31.56],    '宝鸡': [107.15, 34.38],    '焦作': [113.21, 35.24],    '句容': [119.16, 31.95],    '北京': [116.46, 39.92],    '徐州': [117.2, 34.26],    '衡水': [115.72, 37.72],    '包头': [110, 40.58],    '绵阳': [104.73, 31.48],    '乌鲁木齐': [87.68, 43.77],    '枣庄': [117.57, 34.86],    '杭州': [120.19, 30.26],    '淄博': [118.05, 36.78],    '鞍山': [122.85, 41.12],    '溧阳': [119.48, 31.43],    '库尔勒': [86.06, 41.68],    '安阳': [114.35, 36.1],    '开封': [114.35, 34.79],    '济南': [117, 36.65],    '德阳': [104.37, 31.13],    '温州': [120.65, 28.01],    '九江': [115.97, 29.71],    '邯郸': [114.47, 36.6],    '临安': [119.72, 30.23],    '兰州': [103.73, 36.03],    '沧州': [116.83, 38.33],    '临沂': [118.35, 35.05],    '南充': [106.110698, 30.837793],    '天津': [117.2, 39.13],    '富阳': [119.95, 30.07],    '泰安': [117.13, 36.18],    '诸暨': [120.23, 29.71],    '郑州': [113.65, 34.76],    '哈尔滨': [126.63, 45.75],    '聊城': [115.97, 36.45],    '芜湖': [118.38, 31.33],    '唐山': [118.02, 39.63],    '平顶山': [113.29, 33.75],    '邢台': [114.48, 37.05],    '德州': [116.29, 37.45],    '济宁': [116.59, 35.38],    '荆州': [112.239741, 30.335165],    '宜昌': [111.3, 30.7],    '义乌': [120.06, 29.32],    '丽水': [119.92, 28.45],    '洛阳': [112.44, 34.7],    '秦皇岛': [119.57, 39.95],    '株洲': [113.16, 27.83],    '石家庄': [114.48, 38.03],    '莱芜': [117.67, 36.19],    '常德': [111.69, 29.05],    '保定': [115.48, 38.85],    '湘潭': [112.91, 27.87],    '金华': [119.64, 29.12],    '岳阳': [113.09, 29.37],    '长沙': [113, 28.21],    '衢州': [118.88, 28.97],    '廊坊': [116.7, 39.53],    '菏泽': [115.480656, 35.23375],    '合肥': [117.27, 31.86],    '武汉': [114.31, 30.52],    '大庆': [125.03, 46.58]
};var convertData = function (data) {    var res = [];    for (var i = 0; i < data.length; i++) {        var geoCoord = geoCoordMap[data[i].name];        if (geoCoord) {
            res.push({                name: data[i].name,                value: geoCoord.concat(data[i].value)
            });
        }
    }    return res;
};

示例中调用了后台接口，统计用户的位置信息存进数据库，并把登录的分布图通过地图展示出来。再此不会后台的朋友可以去掉后台接口，在前端填写假数据，来把地图展示出来，展示效果实质是一样。

实际页面展示的效果：