一、效果图
三维地图数据暂时未加
二、代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu"></script>
<script type="text/javascript" src="./index/js/Heatmap.js"></script>
<script src="./public/js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./public/js/knockout.js" type="text/javascript" charset="utf-8"></script>
<script src="./public/js/common.js"></script>
<title>热力图功能示例</title>
<style type="text/css">
ul,li{list-style: none;margin:0;padding:0;float:left;}
html{height:100%}
body{height:100%;margin:0px;padding:0px;font-family:"微软雅黑";}
#container{height:800px;width:100%;}
#r-result{width:100%;}
</style>
<style>
body,
html,
#container {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<div id="container"></div>
<div id="r-result">
<input type="button" onclick="openHeatmap();" value="显示热力图"/>
<input type="button" onclick="closeHeatmap();" value="关闭热力图"/>
</div>
</body>
</html>
<script type="text/javascript">
// 创建地图实例
var map = new BMap.Map("container");
//设置地图的中心点
var point = new BMap.Point(112.572396, 37.742323);
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point, 7);
// 加卫星地图
map.addControl(new BMap.MapTypeControl());
// 允许滚轮缩放
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
// 添加带有定位的导航控件
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true
});
map.addControl(navigationControl);
//解决标注点不居中的问题
map.panBy(50, 150);//中心点偏移多少像素（width,height）为div 宽高的1/2;
//背景颜色
changeMapStyle('midnight');
var cityName = '山西省';
var bdary = new BMap.Boundary();
bdary.get(cityName, function (rs) { //获取行政区域
var EN_JW = "180, 90;"; //东北角
var NW_JW = "-180, 90;"; //西北角
var WS_JW = "-180, -90;"; //西南角
var SE_JW = "180, -90;"; //东南角
//4.添加环形遮罩层
var ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW,
{ strokeColor: "none", fillColor: "rgb(74,148,235)", fillOpacity:1, strokeOpacity: 0.5 }); //建立多边形覆盖物
map.addOverlay(ply1);
});
function changeMapStyle(style){
var mapStyle ={
features: ["road","building","water","land"],//隐藏地图上的"poi",
style : style,
};
map.setMapStyle(mapStyle);
}
//设置热力图的点参数
//var points =[
//{"lng":117.862179,"lat":30.940701,"count":50},
// {"lng":117.226897,"lat":30.703597,"count":51},
// {"lng":117.79901,"lat":30.956806,"count":15},
// {"lng":117.899809,"lat":30.917902,"count":40},
// {"lng":117.799091,"lat":30.956403,"count":100}];
var points=[
{
"count": 34,
"lat": 40.425915,
"lng": 114.103311
},
{
"count": 24,
"lat": 40.367392,
"lng": 113.755414
},
{
"count": 40,
"lat": 40.14715,
"lng": 113.299329
},
{
"count": 18,
"lat": 40.102783,
"lng": 113.373362
},
{
"count": 32,
"lat": 40.07186,
"lng": 113.413833
},
{
"count": 37,
"lat": 40.089025,
"lng": 113.257268
},
{
"count": 66,
"lat": 40.107325,
"lng": 112.990665
},
{
"count": 24,
"lat": 40.03454,
"lng": 113.552155
},
{
"count": 57,
"lat": 40.032754,
"lng": 113.233398
},
{
"count": 55,
"lat": 39.963134,
"lng": 113.148129
},
{
"count": 30,
"lat": 40.178421,
"lng": 113.523777
},
{
"count": 51,
"lat": 40.112329,
"lng": 113.303283
},
{
"count": 87,
"lat": 39.942381,
"lng": 112.719342
},
{
"count": 50,
"lat": 40.081792,
"lng": 113.304433
},
{
"count": 24,
"lat": 39.99486,
"lng": 112.4735
},
{
"count": 0,
"lat": 40.063813,
"lng": 116.25371
},
{
"count": 68,
"lat": 39.910925,
"lng": 116.413384
},
{
"count": 18,
"lat": 39.868272,
"lng": 112.054603
},
{
"count": 43,
"lat": 39.726399,
"lng": 113.120639
},
{
"count": 89,
"lat": 39.711724,
"lng": 113.69873
},
{
"count": 1,
"lat": 40.253152,
"lng": 117.164857
},
{
"count": 79,
"lat": 39.53403,
"lng": 112.822432
},
{
"count": 82,
"lat": 39.613957,
"lng": 112.364496
},
{
"count": 57,
"lat": 39.552573,
"lng": 112.807964
},
{
"count": 89,
"lat": 37.4752,
"lng": 112.26879
},
{
"count": 39,
"lat": 39.504412,
"lng": 113.107248
},
{
"count": 40,
"lat": 39.448825,
"lng": 114.241368
},
{
"count": 97,
"lat": 39.512792,
"lng": 111.785797
},
{
"count": 75,
"lat": 39.535909,
"lng": 112.089957
},
{
"count": 97,
"lat": 39.393808,
"lng": 112.419997
},
{
"count": 66,
"lat": 39.393833,
"lng": 112.592307
},
{
"count": 69,
"lat": 39.391512,
"lng": 111.140464
},
{
"count": 96,
"lat": 39.910925,
"lng": 116.413384
},
{
"count": 96,
"lat": 39.195237,
"lng": 113.271408
},
{
"count": 78,
"lat": 39.390702,
"lng": 111.144449
},
{
"count": 62,
"lat": 38.91702,
"lng": 111.85341
},
{
"count": 66,
"lat": 39.071689,
"lng": 112.0041
},
{
"count": 80,
"lat": 39.479929,
"lng": 112.822867
},
{
"count": 21,
"lat": 39.072728,
"lng": 112.966552
},
{
"count": 95,
"lat": 39.028337,
"lng": 111.092542
},
{
"count": 91,
"lat": 39.013539,
"lng": 112.321534
},
{
"count": 39,
"lat": 39.004829,
"lng": 112.841274
},
{
"count": 15,
"lat": 38.710151,
"lng": 111.579478
},
{
"count": 9,
"lat": 38.736476,
"lng": 112.717487
},
{
"count": 53,
"lat": 38.468804,
"lng": 111.134392
},
{
"count": 66,
"lat": 38.422383,
"lng": 112.740624
},
{
"count": 26,
"lat": 38.638408,
"lng": 113.173729
},
{
"count": 3,
"lat": 38.56188,
"lng": 111.29778
},
{
"count": 50,
"lat": 38.365147,
"lng": 111.945432
},
{
"count": 50,
"lat": 38.432788,
"lng": 112.622604
},
{
"count": 91,
"lat": 38.434272,
"lng": 112.718247
},
{
"count": 86,
"lat": 38.41476,
"lng": 112.739115
},
{
"count": 59,
"lat": 38.480223,
"lng": 112.896984
},
{
"count": 27,
"lat": 38.479974,
"lng": 112.963529
},
{
"count": 1,
"lat": 38.470955,
"lng": 111.132586
},
{
"count": 77,
"lat": 38.285029,
"lng": 111.678592
},
{
"count": 78,
"lat": 38.287329,
"lng": 111.195035
},
{
"count": 60,
"lat": 38.177404,
"lng": 111.61197
},
{
"count": 44,
"lat": 38.175477,
"lng": 111.120607
},
{
"count": 96,
"lat": 38.073195,
"lng": 111.803591
},
{
"count": 32,
"lat": 38.113795,
"lng": 112.669764
},
{
"count": 85,
"lat": 38.075477,
"lng": 112.708834
},
{
"count": 25,
"lat": 38.078499,
"lng": 112.654393
},
{
"count": 72,
"lat": 38.120044,
"lng": 113.444974
},
{
"count": 92,
"lat": 38.080454,
"lng": 113.504353
},
{
"count": 1,
"lat": 38.052951,
"lng": 111.09943
},
{
"count": 86,
"lat": 37.882873,
"lng": 111.605608
},
{
"count": 31,
"lat": 37.913,
"lng": 112.182453
},
{
"count": 27,
"lat": 37.880546,
"lng": 112.48324
},
{
"count": 25,
"lat": 38.038314,
"lng": 112.574591
},
{
"count": 66,
"lat": 38.078499,
"lng": 112.654393
},
{
"count": 3,
"lat": 38.056727,
"lng": 112.942685
},
{
"count": 87,
"lat": 38.080454,
"lng": 113.504353
},
{
"count": 99,
"lat": 38.07635,
"lng": 113.514279
},
{
"count": 18,
"lat": 37.997976,
"lng": 112.517963
},
{
"count": 76,
"lat": 38.031842,
"lng": 112.666271
},
{
"count": 10,
"lat": 37.960237,
"lng": 112.573665
},
{
"count": 80,
"lat": 37.945943,
"lng": 112.493605
},
{
"count": 49,
"lat": 37.900837,
"lng": 112.620647
},
{
"count": 39,
"lat": 37.864607,
"lng": 112.532682
},
{
"count": 8,
"lat": 40.13763,
"lng": 116.279471
},
{
"count": 63,
"lat": 37.822795,
"lng": 112.57144
},
{
"count": 23,
"lat": 37.820738,
"lng": 112.554361
},
{
"count": 85,
"lat": 37.80138,
"lng": 112.47612
},
{
"count": 0,
"lat": 37.74949,
"lng": 112.580495
},
{
"count": 48,
"lat": 37.881417,
"lng": 112.537844
},
{
"count": 75,
"lat": 37.779717,
"lng": 112.509155
},
{
"count": 23,
"lat": 37.742323,
"lng": 112.572396
},
{
"count": 96,
"lat": 37.71094,
"lng": 112.582585
},
{
"count": 63,
"lat": 37.70394,
"lng": 112.714504
},
{
"count": 93,
"lat": 37.716981,
"lng": 112.783119
},
{
"count": 44,
"lat": 37.752791,
"lng": 112.749448
},
{
"count": 21,
"lat": 37.584082,
"lng": 112.783894
},
{
"count": 28,
"lat": 37.520072,
"lng": 112.090548
},
{
"count": 56,
"lat": 37.588552,
"lng": 112.296217
},
{
"count": 29,
"lat": 37.957211,
"lng": 110.998415
},
{
"count": 7,
"lat": 37.810783,
"lng": 111.008151
},
{
"count": 99,
"lat": 37.747893,
"lng": 111.230333
},
{
"count": 14,
"lat": 37.557277,
"lng": 110.801354
},
{
"count": 54,
"lat": 37.504036,
"lng": 110.92328
},
{
"count": 58,
"lat": 37.527136,
"lng": 111.14772
},
{
"count": 88,
"lat": 37.533871,
"lng": 111.261241
},
{
"count": 9,
"lat": 37.46673,
"lng": 111.12445
},
{
"count": 78,
"lat": 37.585295,
"lng": 112.231899
},
{
"count": 2,
"lat": 37.692839,
"lng": 112.759595
},
{
"count": 96,
"lat": 37.391531,
"lng": 112.458666
},
{
"count": 11,
"lat": 37.535805,
"lng": 111.217036
},
{
"count": 63,
"lat": 37.4443,
"lng": 112.035599
},
{
"count": 75,
"lat": 37.862361,
"lng": 113.587617
},
{
"count": 73,
"lat": 37.839645,
"lng": 113.603813
},
{
"count": 70,
"lat": 37.912592,
"lng": 113.738611
},
{
"count": 79,
"lat": 37.832499,
"lng": 113.492343
},
{
"count": 33,
"lat": 37.885952,
"lng": 113.622568
},
{
"count": 33,
"lat": 37.872577,
"lng": 113.628238
},
{
"count": 87,
"lat": 37.806077,
"lng": 113.654702
},
{
"count": 63,
"lat": 37.874056,
"lng": 113.63306
},
{
"count": 13,
"lat": 37.863367,
"lng": 113.63509
},
{
"count": 14,
"lat": 37.754273,
"lng": 113.581927
},
{
"count": 83,
"lat": 37.957931,
"lng": 112.829974
},
{
"count": 87,
"lat": 37.617884,
"lng": 113.713613
},
{
"count": 97,
"lat": 37.589485,
"lng": 113.840931
},
{
"count": 13,
"lat": 37.301553,
"lng": 113.449855
},
{
"count": 3,
"lat": 37.449304,
"lng": 111.136561
},
{
"count": 59,
"lat": 37.465855,
"lng": 110.851677
},
{
"count": 56,
"lat": 37.242506,
"lng": 110.913008
},
{
"count": 46,
"lat": 37.271292,
"lng": 111.794597
},
{
"count": 59,
"lat": 37.524498,
"lng": 111.15045
},
{
"count": 6,
"lat": 37.285945,
"lng": 112.262723
},
{
"count": 9,
"lat": 37.290732,
"lng": 112.374751
},
{
"count": 38,
"lat": 37.195601,
"lng": 112.182456
},
{
"count": 47,
"lat": 37.004588,
"lng": 110.853803
},
{
"count": 21,
"lat": 36.969702,
"lng": 110.806919
},
{
"count": 1,
"lat": 37.151063,
"lng": 111.785606
},
{
"count": 19,
"lat": 37.132843,
"lng": 111.793313
},
{
"count": 13,
"lat": 36.895317,
"lng": 111.999227
},
{
"count": 53,
"lat": 37.08281,
"lng": 112.05942
},
{
"count": 57,
"lat": 36.913206,
"lng": 112.47688
},
{
"count": 32,
"lat": 36.92228,
"lng": 111.91427
},
{
"count": 53,
"lat": 36.86312,
"lng": 111.81418
},
{
"count": 36,
"lat": 36.81341,
"lng": 111.81154
},
{
"count": 87,
"lat": 37.07637,
"lng": 112.9816
},
{
"count": 92,
"lat": 37.11691,
"lng": 112.79101
},
{
"count": 40,
"lat": 36.99733,
"lng": 113.35538
},
{
"count": 5,
"lat": 36.710199,
"lng": 112.302793
},
{
"count": 36,
"lat": 36.705237,
"lng": 112.831766
},
{
"count": 75,
"lat": 36.615542,
"lng": 111.770429
},
{
"count": 91,
"lat": 36.49707,
"lng": 111.862676
},
{
"count": 51,
"lat": 36.574607,
"lng": 111.761509
},
{
"count": 4,
"lat": 36.554124,
"lng": 111.699373
},
{
"count": 53,
"lat": 36.435515,
"lng": 111.829715
},
{
"count": 50,
"lat": 36.633618,
"lng": 110.937907
},
{
"count": 45,
"lat": 36.520867,
"lng": 110.775544
},
{
"count": 43,
"lat": 36.418005,
"lng": 111.102474
},
{
"count": 66,
"lat": 36.374258,
"lng": 111.196938
},
{
"count": 17,
"lat": 36.108694,
"lng": 110.47144
},
{
"count": 4,
"lat": 35.976442,
"lng": 110.853498
},
{
"count": 45,
"lat": 36.34382,
"lng": 112.315886
},
{
"count": 92,
"lat": 36.343011,
"lng": 111.739689
},
{
"count": 63,
"lat": 36.26205,
"lng": 111.709617
},
{
"count": 17,
"lat": 36.242887,
"lng": 111.503639
},
{
"count": 28,
"lat": 36.356956,
"lng": 111.707103
},
{
"count": 51,
"lat": 36.128419,
"lng": 111.466508
},
{
"count": 77,
"lat": 36.229776,
"lng": 111.559826
},
{
"count": 24,
"lat": 36.075672,
"lng": 111.893163
},
{
"count": 12,
"lat": 35.682511,
"lng": 113.324071
},
{
"count": 39,
"lat": 35.996911,
"lng": 111.486143
},
{
"count": 52,
"lat": 36.084562,
"lng": 111.58643
},
{
"count": 7,
"lat": 35.913315,
"lng": 111.341033
},
{
"count": 37,
"lat": 36.08161,
"lng": 111.007593
},
{
"count": 41,
"lat": 35.766752,
"lng": 111.468029
},
{
"count": 61,
"lat": 35.737582,
"lng": 112.401288
},
{
"count": 83,
"lat": 36.186163,
"lng": 113.14343
},
{
"count": 25,
"lat": 35.65473,
"lng": 111.808235
},
{
"count": 82,
"lat": 36.093742,
"lng": 111.52553
},
{
"count": 25,
"lat": 36.369785,
"lng": 113.121023
},
{
"count": 53,
"lat": 36.248002,
"lng": 111.392909
},
{
"count": 62,
"lat": 36.442457,
"lng": 112.985134
},
{
"count": 11,
"lat": 36.365443,
"lng": 112.858259
},
{
"count": 77,
"lat": 36.490708,
"lng": 113.376438
},
{
"count": 44,
"lat": 36.358427,
"lng": 113.056022
},
{
"count": 95,
"lat": 35.703104,
"lng": 111.368137
},
{
"count": 33,
"lat": 36.506434,
"lng": 112.345959
},
{
"count": 89,
"lat": 36.585463,
"lng": 112.633669
},
{
"count": 62,
"lat": 35.431151,
"lng": 111.34003
},
{
"count": 0,
"lat": 36.339691,
"lng": 113.235578
},
{
"count": 43,
"lat": 36.205989,
"lng": 113.442517
},
{
"count": 83,
"lat": 35.141564,
"lng": 110.963153
},
{
"count": 11,
"lat": 36.291508,
"lng": 112.973899
},
{
"count": 91,
"lat": 36.201268,
"lng": 113.122559
},
{
"count": 62,
"lat": 36.223227,
"lng": 112.993604
},
{
"count": 53,
"lat": 36.277888,
"lng": 113.356794
},
{
"count": 33,
"lat": 36.127345,
"lng": 113.097999
},
{
"count": 54,
"lat": 36.128002,
"lng": 112.884566
},
{
"count": 42,
"lat": 36.075537,
"lng": 112.887779
},
{
"count": 31,
"lat": 36.576335,
"lng": 111.709291
},
{
"count": 33,
"lat": 35.055862,
"lng": 111.313924
},
{
"count": 0,
"lat": 35.074279,
"lng": 111.003628
},
{
"count": 87,
"lat": 35.695397,
"lng": 110.760743
},
{
"count": 37,
"lat": 35.668249,
"lng": 110.647417
},
{
"count": 70,
"lat": 35.625665,
"lng": 110.896017
},
{
"count": 99,
"lat": 35.62263,
"lng": 111.231406
},
{
"count": 80,
"lat": 35.610404,
"lng": 110.989415
},
{
"count": 42,
"lat": 35.508147,
"lng": 111.311709
},
{
"count": 23,
"lat": 35.497276,
"lng": 111.575487
},
{
"count": 77,
"lat": 35.362931,
"lng": 111.23141
},
{
"count": 78,
"lat": 35.037902,
"lng": 111.033555
},
{
"count": 43,
"lat": 35.355832,
"lng": 111.220061
},
{
"count": 29,
"lat": 35.421109,
"lng": 110.844576
},
{
"count": 31,
"lat": 35.147462,
"lng": 111.226431
},
{
"count": 54,
"lat": 35.303015,
"lng": 111.676607
},
{
"count": 63,
"lat": 35.10155,
"lng": 110.56127
},
{
"count": 23,
"lat": 35.492181,
"lng": 112.421454
},
{
"count": 58,
"lat": 35.146335,
"lng": 110.820566
},
{
"count": 51,
"lat": 35.035358,
"lng": 111.036871
},
{
"count": 62,
"lat": 35.138104,
"lng": 110.962814
},
{
"count": 87,
"lat": 35.032707,
"lng": 111.013389
},
{
"count": 64,
"lat": 35.679762,
"lng": 112.16546
},
{
"count": 25,
"lat": 34.865899,
"lng": 110.528872
},
{
"count": 51,
"lat": 36.956792,
"lng": 112.603464
},
{
"count": 7,
"lat": 34.842925,
"lng": 111.22348
},
{
"count": 59,
"lat": 35.358163,
"lng": 110.778886
},
{
"count": 97,
"lat": 34.699388,
"lng": 110.700612
},
{
"count": 2,
"lat": 35.884042,
"lng": 112.984695
},
{
"count": 49,
"lat": 35.816518,
"lng": 112.9439935
},
{
"count": 30,
"lat": 35.786527,
"lng": 112.987244
},
{
"count": 65,
"lat": 36.537053,
"lng": 112.058871
},
{
"count": 59,
"lat": 35.496285,
"lng": 112.858578
},
{
"count": 67,
"lat": 36.323339,
"lng": 113.280501
},
{
"count": 88,
"lat": 35.655939,
"lng": 112.523712
},
{
"count": 78,
"lat": 35.547142,
"lng": 112.968891
},
{
"count": 65,
"lat": 35.644064,
"lng": 112.963154
},
{
"count": 58,
"lat": 39.305554,
"lng": 114.421844
},
{
"count": 49,
"lat": 35.608118,
"lng": 112.340102
},
{
"count": 13,
"lat": 38.497556,
"lng": 111.573003
},
{
"count": 3,
"lat": 35.59977,
"lng": 112.794401
},
{
"count": 14,
"lat": 40.45918,
"lng": 124.072422
},
{
"count": 15,
"lat": 39.910925,
"lng": 116.413384
}
];
//判断浏览器是否支持canvas
if(!isSupportCanvas()){alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')}
//热力图初始化(radius是指热力图半径)
heatmapOverlay1 = new BMapLib.HeatmapOverlay({"radius":20});
//地图添加热力图层
map.addOverlay(heatmapOverlay1);
//热力图层添加数据
heatmapOverlay1.setDataSet({data:points,max:100});
//判断浏览区是否支持canvas
function isSupportCanvas(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
//显示热力图
function openHeatmap(){
heatmapOverlay1.show();
}
//关闭热力图
function closeHeatmap(){
heatmapOverlay1.hide();
}
openHeatmap();
var citys = [
{
"pointName": "玉泉",
"longitude": "114.103311",
"latitude": "40.425915"
},
{
"pointName": "阳高",
"longitude": "113.755414",
"latitude": "40.367392"
},
{
"pointName": "北郊",
"longitude": "113.299329",
"latitude": "40.14715"
},
{
"pointName": "大同市",
"longitude": "113.373362",
"latitude": "40.102783"
},
{
"pointName": "御东",
"longitude": "113.413833",
"latitude": "40.07186"
},
{
"pointName": "马军营",
"longitude": "113.257268",
"latitude": "40.089025"
},
{
"pointName": "高山",
"longitude": "112.990665",
"latitude": "40.107325"
},
{
"pointName": "官堡",
"longitude": "113.552155",
"latitude": "40.03454"
},
{
"pointName": "三井",
"longitude": "113.233398",
"latitude": "40.032754"
},
{
"pointName": "西万庄",
"longitude": "113.148129",
"latitude": "39.963134"
},
{
"pointName": "羊坊",
"longitude": "113.523777",
"latitude": "40.178421"
},
{
"pointName": "雁同",
"longitude": "113.303283",
"latitude": "40.112329"
},
{
"pointName": "南京庄",
"longitude": "112.719342",
"latitude": "39.942381"
},
{
"pointName": "平城",
"longitude": "113.304433",
"latitude": "40.081792"
},
{
"pointName": "右玉",
"longitude": "112.4735",
"latitude": "39.99486"
},
{
"pointName": "明海湖",
"longitude": "112.054603",
"latitude": "39.868272"
},
{
"pointName": "亲和",
"longitude": "113.120639",
"latitude": "39.726399"
},
{
"pointName": "浑源",
"longitude": "113.69873",
"latitude": "39.711724"
},
{
"pointName": "翠微",
"longitude": "112.822432",
"latitude": "39.53403"
},
{
"pointName": "向阳堡",
"longitude": "112.364496",
"latitude": "39.613957"
},
{
"pointName": "七里沟",
"longitude": "112.807964",
"latitude": "39.552573"
},
{
"pointName": "北岳",
"longitude": "112.26879",
"latitude": "37.4752"
},
{
"pointName": "石店",
"longitude": "113.107248",
"latitude": "39.504412"
},
{
"pointName": "灵丘",
"longitude": "114.241368",
"latitude": "39.448825"
},
{
"pointName": "方城",
"longitude": "111.785797",
"latitude": "39.512792"
},
{
"pointName": "水头",
"longitude": "112.089957",
"latitude": "39.535909"
},
{
"pointName": "铺上",
"longitude": "112.419997",
"latitude": "39.393808"
},
{
"pointName": "吉庄",
"longitude": "112.592307",
"latitude": "39.393833"
},
{
"pointName": "古渡",
"longitude": "111.140464",
"latitude": "39.391512"
},
{
"pointName": "繁峙",
"longitude": "113.271408",
"latitude": "39.195237"
},
{
"pointName": "河曲",
"longitude": "111.144449",
"latitude": "39.390702"
},
{
"pointName": "五寨",
"longitude": "111.85341",
"latitude": "38.91702"
},
{
"pointName": "义井",
"longitude": "112.0041",
"latitude": "39.071689"
},
{
"pointName": "安荣",
"longitude": "112.822867",
"latitude": "39.479929"
},
{
"pointName": "代县",
"longitude": "112.966552",
"latitude": "39.072728"
},
{
"pointName": "保德",
"longitude": "111.092542",
"latitude": "39.028337"
},
{
"pointName": "凤凰",
"longitude": "112.321534",
"latitude": "39.013539"
},
{
"pointName": "宁远",
"longitude": "112.841274",
"latitude": "39.004829"
},
{
"pointName": "岢岚",
"longitude": "111.579478",
"latitude": "38.710151"
},
{
"pointName": "原平",
"longitude": "112.717487",
"latitude": "38.736476"
},
{
"pointName": "兴县",
"longitude": "111.134392",
"latitude": "38.468804"
},
{
"pointName": "忻州",
"longitude": "112.740624",
"latitude": "38.422383"
},
{
"pointName": "永安",
"longitude": "113.173729",
"latitude": "38.638408"
},
{
"pointName": "北坡牵",
"longitude": "111.29778",
"latitude": "38.56188"
},
{
"pointName": "静乐",
"longitude": "111.945432",
"latitude": "38.365147"
},
{
"pointName": "忻都",
"longitude": "112.622604",
"latitude": "38.432788"
},
{
"pointName": "秀容牵",
"longitude": "112.718247",
"latitude": "38.434272"
},
{
"pointName": "匡村",
"longitude": "112.739115",
"latitude": "38.41476"
},
{
"pointName": "长安",
"longitude": "112.896984",
"latitude": "38.480223"
},
{
"pointName": "定襄",
"longitude": "112.963529",
"latitude": "38.479974"
},
{
"pointName": "蔚汾",
"longitude": "111.132586",
"latitude": "38.470955"
},
{
"pointName": "岚县",
"longitude": "111.678592",
"latitude": "38.285029"
},
{
"pointName": "固贤",
"longitude": "111.195035",
"latitude": "38.287329"
},
{
"pointName": "袁家村",
"longitude": "111.61197",
"latitude": "38.177404"
},
{
"pointName": "白文牵",
"longitude": "111.120607",
"latitude": "38.175477"
},
{
"pointName": "娄烦",
"longitude": "111.803591",
"latitude": "38.073195"
},
{
"pointName": "上安",
"longitude": "112.669764",
"latitude": "38.113795"
},
{
"pointName": "东方铝厂",
"longitude": "112.708834",
"latitude": "38.075477"
},
{
"pointName": "盂县",
"longitude": "112.654393",
"latitude": "38.078499"
},
{
"pointName": "阳泉北",
"longitude": "113.444974",
"latitude": "38.120044"
},
{
"pointName": "温池",
"longitude": "113.504353",
"latitude": "38.080454"
},
{
"pointName": "大居",
"longitude": "111.09943",
"latitude": "38.052951"
},
{
"pointName": "云顶山",
"longitude": "111.605608",
"latitude": "37.882873"
},
{
"pointName": "古交市",
"longitude": "112.182453",
"latitude": "37.913"
},
{
"pointName": "南杜",
"longitude": "112.48324",
"latitude": "37.880546"
},
{
"pointName": "赵家山",
"longitude": "112.574591",
"latitude": "38.038314"
},
{
"pointName": "阳曲西牵",
"longitude": "112.654393",
"latitude": "38.078499"
},
{
"pointName": "东凌井",
"longitude": "112.942685",
"latitude": "38.056727"
},
{
"pointName": "温池",
"longitude": "113.504353",
"latitude": "38.080454"
},
{
"pointName": "邓庄汇集",
"longitude": "113.514279",
"latitude": "38.07635"
},
{
"pointName": "向阳",
"longitude": "112.517963",
"latitude": "37.997976"
},
{
"pointName": "侯村",
"longitude": "112.666271",
"latitude": "38.031842"
},
{
"pointName": "新店",
"longitude": "112.573665",
"latitude": "37.960237"
},
{
"pointName": "东流",
"longitude": "112.493605",
"latitude": "37.945943"
},
{
"pointName": "解放",
"longitude": "112.620647",
"latitude": "37.900837"
},
{
"pointName": "迎西",
"longitude": "112.532682",
"latitude": "37.864607"
},
{
"pointName": "长风",
"longitude": "112.57144",
"latitude": "37.822795"
},
{
"pointName": "杨家堡",
"longitude": "112.554361",
"latitude": "37.820738"
},
{
"pointName": "冶峪",
"longitude": "112.47612",
"latitude": "37.80138"
},
{
"pointName": "康宁",
"longitude": "112.580495",
"latitude": "37.74949"
},
{
"pointName": "滨河",
"longitude": "112.537844",
"latitude": "37.881417"
},
{
"pointName": "晋阳",
"longitude": "112.509155",
"latitude": "37.779717"
},
{
"pointName": "小店",
"longitude": "112.572396",
"latitude": "37.742323"
},
{
"pointName": "汾东",
"longitude": "112.582585",
"latitude": "37.71094"
},
{
"pointName": "榆次",
"longitude": "112.714504",
"latitude": "37.70394"
},
{
"pointName": "天湖",
"longitude": "112.783119",
"latitude": "37.716981"
},
{
"pointName": "福瑞",
"longitude": "112.749448",
"latitude": "37.752791"
},
{
"pointName": "北田",
"longitude": "112.783894",
"latitude": "37.584082"
},
{
"pointName": "广兴",
"longitude": "112.090548",
"latitude": "37.520072"
},
{
"pointName": "阳煤太化",
"longitude": "112.296217",
"latitude": "37.588552"
},
{
"pointName": "临县",
"longitude": "110.998415",
"latitude": "37.957211"
},
{
"pointName": "杜家岭",
"longitude": "111.008151",
"latitude": "37.810783"
},
{
"pointName": "峪口串补站",
"longitude": "111.230333",
"latitude": "37.747893"
},
{
"pointName": "孟门牵",
"longitude": "110.801354",
"latitude": "37.557277"
},
{
"pointName": "冯家垣",
"longitude": "110.92328",
"latitude": "37.504036"
},
{
"pointName": "石州",
"longitude": "111.14772",
"latitude": "37.527136"
},
{
"pointName": "车家湾",
"longitude": "111.261241",
"latitude": "37.533871"
},
{
"pointName": "中钰",
"longitude": "111.12445",
"latitude": "37.46673"
},
{
"pointName": "夏家营",
"longitude": "112.231899",
"latitude": "37.585295"
},
{
"pointName": "晋中",
"longitude": "112.759595",
"latitude": "37.692839"
},
{
"pointName": "东观",
"longitude": "112.458666",
"latitude": "37.391531"
},
{
"pointName": "宜安",
"longitude": "111.217036",
"latitude": "37.535805"
},
{
"pointName": "文水",
"longitude": "112.035599",
"latitude": "37.4443"
},
{
"pointName": "阳泉",
"longitude": "113.587617",
"latitude": "37.862361"
},
{
"pointName": "傅庄汇集",
"longitude": "113.603813",
"latitude": "37.839645"
},
{
"pointName": "连庄",
"longitude": "113.738611",
"latitude": "37.912592"
},
{
"pointName": "海落湾",
"longitude": "113.492343",
"latitude": "37.832499"
},
{
"pointName": "长岭",
"longitude": "113.622568",
"latitude": "37.885952"
},
{
"pointName": "桃东",
"longitude": "113.628238",
"latitude": "37.872577"
},
{
"pointName": "红卫",
"longitude": "113.654702",
"latitude": "37.806077"
},
{
"pointName": "兆铝",
"longitude": "113.63306",
"latitude": "37.874056"
},
{
"pointName": "兆丰一期",
"longitude": "113.63509",
"latitude": "37.863367"
},
{
"pointName": "苏峪",
"longitude": "113.581927",
"latitude": "37.754273"
},
{
"pointName": "鹿泉",
"longitude": "112.829974",
"latitude": "37.957931"
},
{
"pointName": "昔阳",
"longitude": "113.713613",
"latitude": "37.617884"
},
{
"pointName": "黄岩",
"longitude": "113.840931",
"latitude": "37.589485"
},
{
"pointName": "云山",
"longitude": "113.449855",
"latitude": "37.301553"
},
{
"pointName": "金罗",
"longitude": "111.136561",
"latitude": "37.449304"
},
{
"pointName": "龙花垣",
"longitude": "110.851677",
"latitude": "37.465855"
},
{
"pointName": "留誉牵",
"longitude": "110.913008",
"latitude": "37.242506"
},
{
"pointName": "汾阳",
"longitude": "111.794597",
"latitude": "37.271292"
},
{
"pointName": "吕梁",
"longitude": "111.15045",
"latitude": "37.524498"
},
{
"pointName": "洪善",
"longitude": "112.262723",
"latitude": "37.285945"
},
{
"pointName": "顺丰牵",
"longitude": "112.374751",
"latitude": "37.290732"
},
{
"pointName": "平遥",
"longitude": "112.182456",
"latitude": "37.195601"
},
{
"pointName": "灵泉",
"longitude": "110.853803",
"latitude": "37.004588"
},
{
"pointName": "段庄牵",
"longitude": "110.806919",
"latitude": "36.969702"
},
{
"pointName": "孝义",
"longitude": "111.785606",
"latitude": "37.151063"
},
{
"pointName": "胜溪",
"longitude": "111.793313",
"latitude": "37.132843"
},
{
"pointName": "绵山",
"longitude": "111.999227",
"latitude": "36.895317"
},
{
"pointName": "东湖龙",
"longitude": "112.05942",
"latitude": "37.08281"
},
{
"pointName": "通利牵",
"longitude": "112.47688",
"latitude": "36.913206"
},
{
"pointName": "永吉",
"longitude": "111.91427",
"latitude": "36.92228"
},
{
"pointName": "安顺",
"longitude": "111.81418",
"latitude": "36.86312"
},
{
"pointName": "希铝",
"longitude": "111.81154",
"latitude": "36.81341"
},
{
"pointName": "榆社",
"longitude": "112.98160 ",
"latitude": "37.07637"
},
{
"pointName": "河峪",
"longitude": "112.79101",
"latitude": "37.11691"
},
{
"pointName": "辽阳",
"longitude": "113.35538",
"latitude": "36.99733"
},
{
"pointName": "兴盛",
"longitude": "112.302793",
"latitude": "36.710199"
},
{
"pointName": "沁州",
"longitude": "112.831766",
"latitude": "36.705237"
},
{
"pointName": "杜坪牵",
"longitude": "111.770429",
"latitude": "36.615542"
},
{
"pointName": "陶唐",
"longitude": "111.862676",
"latitude": "36.49707"
},
{
"pointName": "霍州",
"longitude": "111.761509",
"latitude": "36.574607"
},
{
"pointName": "寺庄",
"longitude": "111.699373",
"latitude": "36.554124"
},
{
"pointName": "兴唐",
"longitude": "111.829715",
"latitude": "36.435515"
},
{
"pointName": "曹城牵",
"longitude": "110.937907",
"latitude": "36.633618"
},
{
"pointName": "德美",
"longitude": "110.775544",
"latitude": "36.520867"
},
{
"pointName": "蒲县",
"longitude": "111.102474",
"latitude": "36.418005"
},
{
"pointName": "肖家沟村",
"longitude": "111.196938",
"latitude": "36.374258"
},
{
"pointName": "壶口",
"longitude": "110.47144",
"latitude": "36.108694"
},
{
"pointName": "乡宁",
"longitude": "110.853498",
"latitude": "35.976442"
},
{
"pointName": "罗云",
"longitude": "112.315886",
"latitude": "36.34382"
},
{
"pointName": "明姜",
"longitude": "111.739689",
"latitude": "36.343011"
},
{
"pointName": "辛堡牵",
"longitude": "111.709617",
"latitude": "36.26205"
},
{
"pointName": "魏村",
"longitude": "111.503639",
"latitude": "36.242887"
},
{
"pointName": "永乐",
"longitude": "111.707103",
"latitude": "36.356956"
},
{
"pointName": "刘村",
"longitude": "111.466508",
"latitude": "36.128419"
},
{
"pointName": "乔北",
"longitude": "111.559826",
"latitude": "36.229776"
},
{
"pointName": "北韩村",
"longitude": "111.893163",
"latitude": "36.075672"
},
{
"pointName": "岭北",
"longitude": "113.324071",
"latitude": "35.682511"
},
{
"pointName": "张礼",
"longitude": "111.486143",
"latitude": "35.996911"
},
{
"pointName": "尧都",
"longitude": "111.58643",
"latitude": "36.084562"
},
{
"pointName": "古城",
"longitude": "111.341033",
"latitude": "35.913315"
},
{
"pointName": "跃进牵",
"longitude": "111.007593",
"latitude": "36.08161"
},
{
"pointName": "里村",
"longitude": "111.468029",
"latitude": "35.766752"
},
{
"pointName": "郑庄",
"longitude": "112.401288",
"latitude": "35.737582"
},
{
"pointName": "宏阳",
"longitude": "113.14343",
"latitude": "36.186163"
},
{
"pointName": "翔山",
"longitude": "111.808235",
"latitude": "35.65473"
},
{
"pointName": "临汾",
"longitude": "111.52553",
"latitude": "36.093742"
},
{
"pointName": "安居",
"longitude": "113.121023",
"latitude": "36.369785"
},
{
"pointName": "紫金山",
"longitude": "111.392909",
"latitude": "36.248002"
},
{
"pointName": "侯堡",
"longitude": "112.985134",
"latitude": "36.442457"
},
{
"pointName": "煤基油",
"longitude": "112.858259",
"latitude": "36.365443"
},
{
"pointName": "正川",
"longitude": "113.376438",
"latitude": "36.490708"
},
{
"pointName": "长钢",
"longitude": "113.056022",
"latitude": "36.358427"
},
{
"pointName": "东吉",
"longitude": "111.368137",
"latitude": "35.703104"
},
{
"pointName": "希望",
"longitude": "112.345959",
"latitude": "36.506434"
},
{
"pointName": "红岭",
"longitude": "112.633669",
"latitude": "36.585463"
},
{
"pointName": "仁和",
"longitude": "111.34003",
"latitude": "35.431151"
},
{
"pointName": "潞城",
"longitude": "113.235578",
"latitude": "36.339691"
},
{
"pointName": "平顺",
"longitude": "113.442517",
"latitude": "36.205989"
},
{
"pointName": "久安",
"longitude": "110.963153",
"latitude": "35.141564"
},
{
"pointName": "东鸣",
"longitude": "112.973899",
"latitude": "36.291508"
},
{
"pointName": "长治西",
"longitude": "113.122559",
"latitude": "36.201268"
},
{
"pointName": "康庄",
"longitude": "112.993604",
"latitude": "36.223227"
},
{
"pointName": "祥井",
"longitude": "113.356794",
"latitude": "36.277888"
},
{
"pointName": "苏店",
"longitude": "113.097999",
"latitude": "36.127345"
},
{
"pointName": "西庄",
"longitude": "112.884566",
"latitude": "36.128002"
},
{
"pointName": "大堡头",
"longitude": "112.887779",
"latitude": "36.075537"
},
{
"pointName": "良平牵",
"longitude": "111.709291",
"latitude": "36.576335"
},
{
"pointName": "沙峪牵",
"longitude": "111.313924",
"latitude": "35.055862"
},
{
"pointName": "紫岭",
"longitude": "111.003628",
"latitude": "35.074279"
},
{
"pointName": "侯家庄",
"longitude": "110.760743",
"latitude": "35.695397"
},
{
"pointName": "龙门",
"longitude": "110.647417",
"latitude": "35.668249"
},
{
"pointName": "梁村",
"longitude": "110.896017",
"latitude": "35.625665"
},
{
"pointName": "新绛",
"longitude": "111.231406",
"latitude": "35.62263"
},
{
"pointName": "稷山",
"longitude": "110.989415",
"latitude": "35.610404"
},
{
"pointName": "任家山牵",
"longitude": "111.311709",
"latitude": "35.508147"
},
{
"pointName": "绛县",
"longitude": "111.575487",
"latitude": "35.497276"
},
{
"pointName": "闻喜",
"longitude": "111.23141",
"latitude": "35.362931"
},
{
"pointName": "金鑫",
"longitude": "111.033555",
"latitude": "35.037902"
},
{
"pointName": "桐乡",
"longitude": "111.220061",
"latitude": "35.355832"
},
{
"pointName": "万荣",
"longitude": "110.844576",
"latitude": "35.421109"
},
{
"pointName": "夏县",
"longitude": "111.226431",
"latitude": "35.147462"
},
{
"pointName": "垣曲",
"longitude": "111.676607",
"latitude": "35.303015"
},
{
"pointName": "临晋",
"longitude": "110.56127",
"latitude": "35.10155"
},
{
"pointName": "景阳",
"longitude": "112.421454",
"latitude": "35.492181"
},
{
"pointName": "顺达",
"longitude": "110.820566",
"latitude": "35.146335"
},
{
"pointName": "盐湖",
"longitude": "111.036871",
"latitude": "35.035358"
},
{
"pointName": "三家庄",
"longitude": "110.962814",
"latitude": "35.138104"
},
{
"pointName": "运城",
"longitude": "111.013389",
"latitude": "35.032707"
},
{
"pointName": "杏园",
"longitude": "112.16546",
"latitude": "35.679762"
},
{
"pointName": "华圣",
"longitude": "110.528872",
"latitude": "34.865899"
},
{
"pointName": "桃园",
"longitude": "112.603464",
"latitude": "36.956792"
},
{
"pointName": "平陆",
"longitude": "111.22348",
"latitude": "34.842925"
},
{
"pointName": "桥头",
"longitude": "110.778886",
"latitude": "35.358163"
},
{
"pointName": "芮城",
"longitude": "110.700612",
"latitude": "34.699388"
},
{
"pointName": "神农",
"longitude": "112.984695",
"latitude": "35.884042"
},
{
"pointName": "晋丰",
"longitude": "112.9439935",
"latitude": "35.816518"
},
{
"pointName": "定林",
"longitude": "112.987244",
"latitude": "35.786527"
},
{
"pointName": "秦川",
"longitude": "112.058871",
"latitude": "36.537053"
},
{
"pointName": "晋城",
"longitude": "112.858578",
"latitude": "35.496285"
},
{
"pointName": "天脊",
"longitude": "113.280501",
"latitude": "36.323339"
},
{
"pointName": "曲堤",
"longitude": "112.523712",
"latitude": "35.655939"
},
{
"pointName": "丹河",
"longitude": "112.968891",
"latitude": "35.547142"
},
{
"pointName": "北义城",
"longitude": "112.963154",
"latitude": "35.644064"
},
{
"pointName": "海会",
"longitude": "114.421844",
"latitude": "39.305554"
},
{
"pointName": "芹池",
"longitude": "112.340102",
"latitude": "35.608118"
},
{
"pointName": "东沟",
"longitude": "111.573003",
"latitude": "38.497556"
},
{
"pointName": "泽州东",
"longitude": "112.794401",
"latitude": "35.59977"
}
]
for (let i = 0; i < citys.length; i++) {
var pt = new BMap.Point(citys[i].longitude, citys[i].latitude);
var marker = new BMap.Marker(pt);
map.addOverlay(marker);
// 点标记添加点击事件
//添加监听事件
(function() {
var thePoint = citys[i];
marker.addEventListener("click",
function() {
showInfo(this,thePoint);
});
})();
}
function ajaxGetBaseAsync(urls, param, callback) {
$.ajax({
type: "get",
url: urls,
data: param,
dataType: "JSON",
// contentType: "application/json",
success: function(data) {
callback(data);
}
});
};
function showInfo(thisMarker,point) {
let param = {
location: point.longitude + "," + point.latitude,
key: '6d48cb8a9ed4420db40381497b2dcc2d'
}
let weather;
ajaxGetBaseAsync("https://devapi.qweather.com/v7/weather/now",param,function (res){
console.log(res.now)
weather = res.now;
//获取点的信息
var sContent =
'<ul style="margin:0 0 5px 0;padding:0.2em 0">'
+'<li style="line-height: 26px;font-size: 15px;">'
+'<span style="width: 50px;display: inline-block;">名称：</span>' + point.pointName + '</li>'+ '<br/>'
+'<li style="line-height: 26px;font-size: 15px;">'
+'<span style="width: 50px;display: inline-block;">天气：</span>' + weather.text + '<br/>'
+'<span style="width: 80px;display: inline-block;">当前温度：</span>' + weather.temp + "度"+ '<br/>'
+'<span style="width: 50px;display: inline-block;">风向：</span>' + weather.windDir + '<br/>'
+'<span style="width: 50px;display: inline-block;">风级：</span>' + weather.windScale + "级" + '</li>'
+'</ul>';
var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口对象
thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow
})
}
</script>
<script>
</script>
三、附件:相关文章
1、百度API地图的标注不是居中显示，而是显示在左上角是怎么回事？已解决！
2、实时天气
