使用Echart搭配百度地图创建的热点图,为网友免费做的demo,细节没有调整.记录一下写的过程.
效果图:
代码:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<style type="text/css">
html, body {
height: 100%;
width: 100%;
}
</style>
</head>
<body style="height: 100%; margin: 0">
<div id="container"
style="height: 600px;width: 600px;margin: 20px auto;position: relative;top: 50%;margin-top: -300px"></div>
<script type="text/javascript" src="http://echarts.baidu.com/examples/vendors/jquery/jquery.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript"
src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=NqENdsDTP1QxhUn047Z7C6Tfsgv5X1mj"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var dom = document.getElementById('container')
var myChart = echarts.init(dom)
var app = {}
option = null
app.title = '热力图与百度地图扩展'
var points = [
[114.295024, 22.632375],
[114.295124, 22.632475],
[114.295224, 22.632575],
[114.295324, 22.632675],
[114.295424, 22.632775],
[114.295524, 22.632875],
[114.295624, 22.632975],
[114.295724, 22.633075],
[114.295824, 22.633175],
[114.295924, 22.633275],
[114.296024, 22.633375],
[114.296124, 22.633475],
[114.296224, 22.633575],
[114.296324, 22.633675],
[114.296424, 22.633775],
[114.296524, 22.633875],
[114.296624, 22.633975],
[114.296724, 22.634075],
[114.296824, 22.634175],
[114.296924, 22.634275],
[114.297024, 22.634375],
[114.297124, 22.634475],
[114.297224, 22.634575],
[114.297324, 22.634675],
[114.297424, 22.634775],
[114.297524, 22.634875],
[114.297624, 22.634975],
[114.297724, 22.635075],
[114.297824, 22.635175],
[114.297924, 22.635275],
[114.298024, 22.635375],
[114.298124, 22.635475],
[114.298224, 22.635575],
[114.298324, 22.635675],
[114.298424, 22.635775],
[114.298524, 22.635875],
[114.298624, 22.635975],
[114.298724, 22.636075],
[114.298824, 22.636175],
[114.298924, 22.636275],
[114.299024, 22.636375],
[114.299124, 22.636475],
[114.299224, 22.636575],
[114.299324, 22.636675],
[114.299424, 22.636775],
[114.299524, 22.636875],
[114.299624, 22.636975],
[114.299724, 22.637075],
[114.299824, 22.637175],
[114.299924, 22.637275]]
myChart.setOption(option = {
animation: false,
bmap: {
center: [114.294924, 22.632275],
zoom: 15,
roam: false,
mapStyle: {style: 'midnight'},
enableMapClick:false
},
visualMap: {
show: false,
top: 'top',
min: 0,
max: 5,
seriesIndex: 0,
calculable: false,
inRange: {
color: ['blue', 'blue', 'green', 'yellow', 'red']
}
},
series: [{
type: 'heatmap',
coordinateSystem: 'bmap',
data: points,
pointSize: 5,
blurSize: 6
}]
})
var markerDataArr = [
{num: 1, point: [114.294924, 22.632275], imgurl: '', text: '东部华侨城'},
{num: 2, point: [114.295031, 22.624567], imgurl: '', text: '东部华侨城大峡谷'},
{num: 3, point: [114.309861, 22.614975], imgurl: '', text: '茶溪谷大峡谷'},
{num: 4, point: [114.30691, 22.623766], imgurl: '', text: '华侨酒店'},
{num: 6, point: [114.312242, 22.610332], imgurl: '', text: '华侨城总站'},
{num: 7, point: [114.30165, 22.614285], imgurl: '', text: '东部华侨城天麓'},
{num: 8, point: [114.284623, 22.636045], imgurl: '', text: '茵特拉根会议中心'},
{num: 9, point: [114.286962, 22.638202], imgurl: '', text: '东部华侨城茶溪谷'},
{num: 10, point: [114.283761, 22.647719], imgurl: '', text: '三洲田水库'}
]
if (!app.inNode) {
// 添加百度地图插件
var bmap = myChart.getModel().getComponent('bmap').getBMap()
// bmap.setEnableMapClick('false')
//MapOptions{ enableMapClick:false}
var myIcon = new BMap.Icon('./0.png', new BMap.Size(42, 56))
for (var i = 0; i < markerDataArr.length; i++) {
var item = markerDataArr[i]
var pointItem = new BMap.Point(item.point[0], item.point[1])
var opts = {
position: pointItem, // 指定文本标注所在的地理位置
offset: new BMap.Size(-30, 30) //设置文本偏移量
}
var label = new BMap.Label(item.text, opts) // 创建文本标注对象
label.setStyle({
color: '#fff',
backgroundColor: 'transform',
border: 'none',
fontSize: '12px',
fontFamily: '微软雅黑'
})
var mapMaker = new BMap.Marker(pointItem, {icon: myIcon})
bmap.addOverlay(mapMaker)
bmap.addOverlay(label)
}
}
</script>
</body>
</html>
代码解释及注意点:
- 搭配地图插件需要引入相应的库
- 使用
var bmap = myChart.getModel().getComponent('bmap').getBMap() // 获取百度地图对象 从而使用地图api
- 多查API,对比官方给出的例子,不是太难的功能都能做出的出来