在网页中嵌入高德地图，效果如下：
高德地图开发者的官网地址：https://lbs.amap.com/api/java...
使用前需要注册账号和获取key，阅读官网教程，有详细的注册流程；
https://lbs.amap.com/api/java...
下面直接上代码，我的代码可能不能正常运转，因为有向后台发请求，你可以针对自己的业务进行修改，代码绝对是自己跑过的项目上的，真是可靠！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<div id="content-wrapper">
<!-- Main content -->
<section class="content" style="background: #ecf0f5;">
<div id="mapContainer" class="map" tabindex="0"></div>
</section>
</div>
</div>
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- 页面地图【开始】 -->
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.11&key=f6ee07ce6b36ef10876b7d1ed533dadc&plugin=AMap.MarkerClusterer">
</script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">
//设定高度适应屏幕高度【开始】
var myWindow=document.getElementById("mapContainer");
var screenHeight = window.screen.availHeight;
var screenWidth = window.screen.availWidth;
myWindow.style.width=screenWidth+"px";
myWindow.style.height=screenHeight+"px";
//设定高度适应屏幕高度【结束】
AMapUI.loadUI(['overlay/SimpleInfoWindow'], function(SimpleInfoWindow) {
var cluster, markers = [];
var points= [];
var map = new AMap.Map("mapContainer", {
mapStyle: 'amap://styles/normal',
resizeEnable: true,
center: [105, 32],
zoom: 5
});
getLngLat();//从后台获取经纬度数据的方法,数据格式请参考返回的http://a.amap.com/jsapi_demos/static/china.js
//高德官网聚合点的使用实例：https://lbs.amap.com/api/javascript-api/example/marker/markerclusterer
function getLngLat(){
$.ajax({
url:"map/getPositions",
type:"post",
data : {
"roleId" : "1"
},
async:false,
dataType: "json",
success: function(result){
points = result.data;
}
});
}
$.each(points, function(i, item) { //遍历每个点，我的业务要给每个点添加点击事件
var marker = new AMap.Marker({
position: points[i].lngLat.split(','),
content: '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
offset: new AMap.Pixel(-15, -15)
})
var equiId = item.equipmentId;
var equiName = item.equipmentName;
addClickHandler(equiId, equiName,marker); //给标记点添加点击事件
markers.push(marker);
});
var count = markers.length;
var _renderCluserMarker = function (context) {
var factor = Math.pow(context.count / count, 1 / 18);
var div = document.createElement('div');
var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
div.style.width = div.style.height = size/2 + 'px';
div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 1px ' + shadowColor;
div.innerHTML = context.count;
div.style.lineHeight = size/2 + 'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div)
};
addCluster(2);
function addCluster(tag) {
if (cluster) {
cluster.setMap(null);
}
if (tag == 2) {//完全自定义
cluster = new AMap.MarkerClusterer(map, markers, {
gridSize: 80,
maxZoom:17,//设置聚合点的层级，即从哪一层开始不再进行聚合操作，每个点都是分开的，我加这个是为了实现标记点的点击时间，聚合在一起的点没法获取单独点的信息
renderCluserMarker: _renderCluserMarker
});
}else if (tag == 1) {//自定义图标
var sts = [{
url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
size: new AMap.Size(32, 32),
offset: new AMap.Pixel(-16, -16)
}, {
url: "https://a.amap.com/jsapi_demos/static/images/green.png",
size: new AMap.Size(32, 32),
offset: new AMap.Pixel(-16, -16)
}, {
url: "https://a.amap.com/jsapi_demos/static/images/orange.png",
size: new AMap.Size(36, 36),
offset: new AMap.Pixel(-18, -18)
}, {
url: "https://a.amap.com/jsapi_demos/static/images/red.png",
size: new AMap.Size(48, 48),
offset: new AMap.Pixel(-24, -24)
}, {
url: "https://a.amap.com/jsapi_demos/static/images/darkRed.png",
size: new AMap.Size(48, 48),
offset: new AMap.Pixel(-24, -24)
}];
cluster = new AMap.MarkerClusterer(map, markers, {
styles: sts,
gridSize: 80
});
} else {//默认样式
cluster = new AMap.MarkerClusterer(map, markers, {gridSize: 80});
}
}
function addClickHandler(equiId,equiName,marker){
marker.on("click",function(e){
openInfo(equiId,equiName,marker,e)}
);
}
function openInfo(equiId,equiName,marker,e){
var channel = "";
$.ajax({
url : "dataAcquisition/realtime",
type : "post",
data : {
"equipmentId" : equiId
},
dataType : "json",
success : function(result) {
var data = result.data;
if(data==undefined){
channel+="<h5 style='color: red;'>未查找到通道监测信息！</h5>";
}else{
var num =data.length;
//超过5分钟提示
lTime=(new Date(data[0].receiveTime)).getTime();
cTime=(new Date()).getTime();
$("#last-time").text("最后监测时间："+data[0].receiveTime);
if((cTime-lTime)>(5*60*1000)){ $("#last-time").css({"color":"red"}); }
else{$("#last-time").css({"color":"#21242e"});}
//设定尺寸适应容器【开始】
let count = Math.ceil(num/3);
//设定尺寸适应容器【结束】
for(let i=0; i<count; i++){
let startIndex = 3*i;
let endIndex = (3*i+3>num)?num:(3*i+3);
channel+="<tr>";
//通道结果每三个循环一回，缘于界面展示效果较规整
for(let j=startIndex; j<endIndex; j++){
let state=parseFloat(data[j].state);
if(state==5){
var resultMsg=(data[j].temperature==2999)?("系统调整中"):(data[j].temperature);
channel+="<td class='green' style='padding: 10px;'><span class='span_left'>"+data[j].opticalFiberPosition+"：</span><span class='span_right'>"+resultMsg+"</span></td>";
}
else if(state==4){channel+="<td class='red' style=' padding: 10px;'><span class='span_left'>"+data[j].opticalFiberPosition+"：</span><span class='span_right'>- - - - -</span></td>"; }
else if(state==3){channel+="<td class='red' style='padding: 10px;'><span class='span_left'>"+data[j].opticalFiberPosition+"：</span><span class='span_right'>- - -</span></td>"; }
else{channel+="<td class='yellow' style='padding: 10px;'><span class='span_left'>"+data[j].opticalFiberPosition+"：</span><span class='span_right'>"+data[j].temperature+"</span></td>"; }
}
channel+="</tr>";
}
}
$("#chwin").html(channel);
}
});
new SimpleInfoWindow({
infoTitle: '<strong>'+equiName+'实时温度</strong>',
infoBody: '<p class="my-desc"><span id="last-time"></span><br/><table id="chwin"></table></p>',
//基点指向marker的头部位置
offset: new AMap.Pixel(-45, -31)
}).open(map, marker.getPosition());
}
});
</script>
<!-- 页面地图【结束】 -->
</body>
</html>
小小菜鸟，如有不正确之处，请指正！
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。