高德地图 多状态业务自适应显示多个点标记
多个状态业务点在地图上展示，参考了高德地图自适应显示多个点标记，大致上差不多，但是要修改成自己的业务。
1、直接copy高德地图的自适应显示多个点标记html代码，把key修改成自己申请的；
2、下面是我的代码：
ps:要把key换成自己的。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>自适应显示多个点标记</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.4.1&key= "></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body onload="loadMap()">
<div id="container"></div>
<div id="tip">
<a href="javascript:void(0);" style="text-decoration: none;"><input type="radio" id="registereduser" checked ='checked' style="width:15px;height:15px;" onclick="registereduserClick()"/><span style="color: green">注册用户</span></a>
|
<a href="javascript:void(0);" style="text-decoration: none;"><input type="radio" id="targetuser" checked ='checked' style="width:15px;height:15px;" onclick="targetuserClick()"/><span style="color: red">目标用户</span></a> |
<a href="javascript:void(0);" style="text-decoration: none;"><input type="radio" id="activeuser" checked ='checked' style="width:15px;height:15px;" onclick="activeuserClick()"/><span style="color: blue">活跃用户</span></a> |
<a href="javascript:void(0);" style="text-decoration: none;"><span style="color:orange" onclick="alluserClick()">查看全部</span></a>
</div>
<script>
function loadMap(){
var map = new AMap.Map('container', {
resizeEnable: true,
center: [104.053375,30.669503],
zoom: 9
});
map.clearMap();
//注册用户
if(document.getElementById("registereduser").checked){
var points_a = ['104.32666,30.652965','104.179718,30.487427','104.068482,30.65769',' 104.332153,30.43771'];
for(var i=0;i<points_a.length;i+=1){
var usera = points_a[i].split(",");
var markers_a = [{
icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png',
position: [usera[0],usera[1]]
}];
markers_a.forEach(function(marker) {
new AMap.Marker({
map: map,
icon: marker.icon,
position: [marker.position[0], marker.position[1]],
offset: new AMap.Pixel(-12, -36)
});
});
}
}
//活跃用户
if(document.getElementById("targetuser").checked){
var points_b = ['104.715302,30.609243','104.380219,30.250455','104.613678,30.325163','104.7771,30.226727'];
for(var i=0;i<points_b.length;i+=1){
var userb = points_b[i].split(",");
var markers_b = [{
icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b2.png',
position: [userb[0],userb[1]]
}];
markers_b.forEach(function(marker) {
new AMap.Marker({
map: map,
icon: marker.icon,
position: [marker.position[0], marker.position[1]],
offset: new AMap.Pixel(-12, -36)
});
});
}
}
//关注用户
if(document.getElementById("activeuser").checked){
var points_c = ['104.240143,30.509909','104.204437,30.39863','104.413178,30.550128','104.488709,30.467307'];
for(var i=0;i<points_c.length;i+=1){
var userc = points_c[i].split(",");
var markers_c = [{
icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b3.png',
position: [userc[0],userc[1]]
}];
markers_c.forEach(function(marker) {
new AMap.Marker({
map: map,
icon: marker.icon,
position: [marker.position[0], marker.position[1]],
offset: new AMap.Pixel(-12, -36)
});
});
}
}
}
//注册用户
function registereduserClick(){
if(document.getElementById("registereduser").checked){
document.getElementById("registereduser").checked=true;
document.getElementById("targetuser").checked=false;
document.getElementById("activeuser").checked=false;
loadMap();
}else{
document.getElementById("registereduser").checked=false;
loadMap();
}
}
//目标用户
function targetuserClick(){
if(document.getElementById("targetuser").checked){
document.getElementById("targetuser").checked=true;
document.getElementById("activeuser").checked=false;
document.getElementById("registereduser").checked=false;
loadMap();
}else{
document.getElementById("targetuser").checked=false;
loadMap();
}
}
//活跃用户
function activeuserClick(){
if(document.getElementById("activeuser").checked){
document.getElementById("activeuser").checked=true;
document.getElementById("targetuser").checked=false;
document.getElementById("registereduser").checked=false;
loadMap();
}else{
document.getElementById("activeuser").checked=false;
loadMap();
}
}
function alluserClick(){
document.getElementById("activeuser").checked=true;
document.getElementById("targetuser").checked=true;
document.getElementById("registereduser").checked=true;
loadMap();
}
</script>
</body>
</html>
ps:效果图