一、效果图
三维地图数据暂时未加
二、代码
<!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、实时天气
