高德地图区划聚合+海量点展示

最新推荐文章于 2024-07-31 16:50:51 发布

东边的小山

最新推荐文章于 2024-07-31 16:50:51 发布

阅读量5.5k

点赞数 2

分类专栏：地图类

本文链接：https://blog.csdn.net/yelin042/article/details/94574928

版权

地图类专栏收录该内容

9 篇文章 3 订阅

订阅专栏

<!doctype html>
<html lang="zh-CN">

<head>

<base href="//webapi.amap.com/ui/1.0/ui/geo/DistrictCluster/examples/" />
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>区划聚合+海量点展示</title>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0px;
}

#loadingTip {
position: absolute;
z-index: 9999;
top: 0;
left: 0;
padding: 3px 10px;
background: red;
color: #fff;
font-size: 14px;
}
</style>
</head>

<body>
<div id="container"></div>
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.15&key=您申请的key值'></script>

<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">
//创建地图
var map = new AMap.Map('container', {
zoom: 4
});

function initPage(DistrictCluster, PointSimplifier, $) {

var pointSimplifierIns = new PointSimplifier({
map: map, //所属的地图实例
autoSetFitView: false, //禁止自动更新地图视野
zIndex: 110,
getPosition: function(item) {

if (!item) {
return null;
}

var parts = item.split(',');

//返回经纬度
return [parseFloat(parts[0]), parseFloat(parts[1])];
},
getHoverTitle: function(dataItem, idx) {
return idx + ': ' + dataItem;
},
renderOptions: {
//点的样式
pointStyle: {
width: 6,
height: 6,
fillStyle:'rgba(153, 0, 153, 0.38)'
},
//鼠标hover时的title信息
hoverTitleStyle: {
position: 'top'
}
}
});