高德地图 多状态业务自适应显示多个点标记
2017-11-29 09:46
537 查看
多个状态业务点在地图上展示,参考了高德地图自适应显示多个点标记,大致上差不多,但是要修改成自己的业务。
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:效果图
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:效果图
相关文章推荐
- 高德地图多个Marker标记自动缩放全部显示在屏幕中
- (转)高德地图多个Marker标记自动缩放全部显示在屏幕中
- 高德地图多个Marker标记自动缩放全部显示在屏幕中
- myeclipse中svn图标状态(同步标记)不显示问题的解决方法
- ArcGIS Server地图加载过程显示等待状态
- 【高德地图开发3】---地图显示
- Myeclipse SVN图标状态(同步标记)不显示问题的解决办
- 百度地图API二:根据标注点坐标范围计算显示缩放级别zoom自适应显示地图
- 高德地图自定义marker不显示的问题
- 【高德地图开发】---地图显示
- Android Studio之高德地图实现定位和3D地图显示
- Swift - 使用MapKit显示地图,并在地图上做标记
- 微信公众号中高德地图显示路线开发
- 显示高德地图及蓝点
- 高德地图开发--地图的显示
- Myeclipse--中Project的svn图标状态(同步标记)不显示问题
- 高德地图多点标记 marker JSAPI
- 在地图页面,自动布局控件开始是隐藏或在屏幕外需要正常显示时再为正常的显示状态的,需要在显示之前加入
- Android 高德地图开发 之 解决地图不显示
- Android 高德地图显示只有Logo没有地图解决方案