本文主要叙说了百度地图的两种用法：
1 在页面上直接调用百度地图API，显示地图
2 使用Echart框架可视化加载百度地图API
这两种使用方式，都举例说明，便于理解
一 在页面上直接使用百度地图API
首先申请百度地图JavaScript AP ak，这个ak可以理解我一种身份验证，调用百度地图必须有ak才能调用。百度地图API官网地址
ak申请
下例中调用百度地图API初始化一个地图，并定位到当前城市，直接上代码：
1首先引用百度地图API js
<script type="text/javascript" src="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" src="http://api.map.baidu.com/api?v=2.0&ak=……"></script> <script src="~/js/echarts.min.js"></script> <script src="~/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;
};示例中调用了后台接口，统计用户的位置信息存进数据库，并把登录的分布图通过地图展示出来。再此不会后台的朋友可以去掉后台接口，在前端填写假数据，来把地图展示出来，展示效果实质是一样。
实际页面展示的效果：
20180524.gif
作者：凌雲木
链接：https://www.jianshu.com/p/e57fa3dcc2b1
随时随地看视频
