HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遼陽公安實戰平臺</title>
<!-- 引入 百度地圖AK -->
<!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KIMrzTQzQsUaaektLTCaSrcAxU3YVSQN"></script>-->
<!-- 引入 ECharts -->
<script type="text/javascript" src="js/incubator-echarts-master/dist/echarts.min.js"></script>
<!-- 引入百度地圖擴展 -->
<script type="text/javascript" src="js/incubator-echarts-master/dist/extension/bmap.min.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div id="bmap" style="width:1366px;height: 768px">
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
JS:
var data = [
{name: '遼陽', value: 200},
{name: '遼陽1', value: 100}
];
var geoCoordMap = {
'遼陽':[123.172451205,41.2733392656],
'遼陽1':[123.39609,41.27482]
};
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;
};
//加載百度地圖
$(document).ready(function () {
var myChart = echarts.init(document.getElementById('bmap'));
myChart.showLoading();
$.getJSON('211000.json', function (lyjson) {
myChart.hideLoading();
echarts.registerMap('211000', lyjson);
option = {
// title: {
// text: '遼陽市地圖首頁',
// x:'center'
// },
geo: {
map: '211000',
// roam: true,
itemStyle:{
normal:{
label:{
show:true
},
areaColor: '#01215c',
borderWidth: 5,//設置外層邊框
borderColor:'#9ffcff',
shadowColor: 'rgba(0,54,255, 1)',
shadowBlur: 150
}
},
label: {
normal: {
show: true,
textStyle: {
color: '#000000'
}
}
}
},
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
itemStyle: {
color: '#f495eb'
}
}
]
};
myChart.setOption(option);
});
});
預覽效果：
![]()
