使用Echart搭配百度地图创建某一地区热点图的注意点
【摘要】
使用Echart搭配百度地图创建的热点图,为网友免费做的demo,细节没有调整.记录一下写的过程.
效果图:
代码:
<!DOCTYPE html><html style="height: 100%"><head> <meta charset="utf-8">...
使用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,对比官方给出的例子,不是太难的功能都能做出的出来
文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。
原文链接：fizzz.blog.csdn.net/article/details/82979130
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）