可以随着地图级别放大而详情，单击显示详情，再次单击取消显示详情
这是那效果图：
直接上手代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>区域多边形</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style>
html,body {
height: 100%;
margin: 0px;
padding: 0px;
}
#mapContainer {
width: 100%;
height: 100%;
}
.info_card {
display: inline-block;
margin: 50px auto;
position: absolute;
width: 200px;
height:200px;
background-color: #c7c9c8;
border: 5px solid #ffffff;
color: #000000;
}
.info_card .title{
font-weight: 700;
text-align: center;
color: #000;
}
.info_card .content{
overflow-y: auto;
height: 200px;
margin-left: 3px;
color: #797676;
}
.info_card span.cancle{
width:0;
height:0;
font-size:0;
overflow:hidden;
position:absolute;
}
.info_card span.bot{
border-width:20px;
border-style:solid dashed dashed;
border-color:#ffffff transparent transparent;
left:80px;
bottom:-40px;
}
.info_card span.top{
border-width:20px;
border-style:solid dashed dashed;
border-color:#c7c9c8 transparent transparent;
left:80px;
bottom:-33px;
}
</style>
</head>
<body onload="initMap()">
<div id="mapContainer"></div>
<script>
//昌乐社区
var sq1 = '[{"lat":24.772309,"lng":103.287526,"height":0},{"lat":24.774041,"lng":103.289434,"height":0},{"lat":24.77660980270998,"lng":103.29263543150046,"height":0},{"lat":24.779492169140383,"lng":103.29410780938088,"height":0},{"lat":24.78245139068698,"lng":103.29523589240307,"height":0},{"lat":24.789036449343183,"lng":103.30012491155082,"height":0},{"lat":24.79163294951183,"lng":103.29824139517598,"height":0},{"lat":24.79377931714381,"lng":103.29477379292871,"height":0},{"lat":24.79402489377494,"lng":103.29169961060961,"height":0},{"lat":24.79396806621897,"lng":103.28986560418889,"height":0},{"lat":24.793730214504116,"lng":103.2879326812648,"height":0},{"lat":24.78851560060115,"lng":103.2752060015282,"height":0},{"lat":24.77332571500139,"lng":103.27444457765705,"height":0},{"lat":24.76830526670409,"lng":103.27488606690349,"height":0},{"lat":24.770889600000153,"lng":103.27594062688331,"height":0},{"lat":24.773992782257878,"lng":103.27967942521536,"height":0},{"lat":24.775795262039995,"lng":103.28192376557308,"height":0}]';
//万城四期网格
var sq1_1 = '[{"lat":24.772367848674104,"lng":103.28755493031758,"height":0},{"lat":24.77240456801984,"lng":103.28774199484235,"height":0},{"lat":24.772454706229134,"lng":103.28785673058474,"height":0},{"lat":24.772659870206038,"lng":103.28805730278464,"height":0},{"lat":24.773076565703796,"lng":103.2885017866638,"height":0},{"lat":24.773565276529624,"lng":103.28901137732748,"height":0},{"lat":24.77392766523397,"lng":103.28940339001224,"height":0},{"lat":24.774041,"lng":103.289434,"height":0},{"lat":24.7742012874291,"lng":103.28930072551157,"height":0},{"lat":24.774348490370798,"lng":103.28909488020031,"height":0},{"lat":24.77464287281814,"lng":103.2887265434913,"height":0},{"lat":24.774956944356827,"lng":103.28831502023445,"height":0},{"lat":24.77502240519854,"lng":103.28822667180884,"height":0},{"lat":24.77507465409898,"lng":103.28809480078257,"height":0},{"lat":24.775061138718847,"lng":103.28785996060435,"height":0},{"lat":24.774385879893757,"lng":103.2871378999796,"height":0},{"lat":24.773513966383128,"lng":103.28627865042859,"height":0},{"lat":24.77335174747211,"lng":103.28638579528626,"height":0},{"lat":24.77318965430162,"lng":103.28652188030605,"height":0},{"lat":24.772839269032627,"lng":103.28683735148888,"height":0},{"lat":24.772665482169458,"lng":103.28698065650258,"height":0},{"lat":24.77249196157566,"lng":103.28716727720337,"height":0},{"lat":24.77241008415427,"lng":103.28731781098418,"height":0}]';
//万城二期网格
var sq1_2 = '[{"lat":24.773345239962882,"lng":103.2861044237527,"height":0},{"lat":24.775058676295423,"lng":103.28787580704716,"height":0},{"lat":24.775314865766784,"lng":103.28759546637741,"height":0},{"lat":24.77662910956722,"lng":103.28601440860223,"height":0},{"lat":24.774751294868352,"lng":103.28406708132866,"height":0}]';
//小乐台旧社区
var sq2 = '[{"lat":24.772568315654418,"lng":103.28670239210987,"height":0},{"lat":24.77302814208675,"lng":103.28634244383647,"height":0},{"lat":24.773318747036445,"lng":103.28602876421633,"height":0},{"lat":24.77316720123353,"lng":103.28617117620149,"height":0},{"lat":24.77331023397699,"lng":103.28602013873217,"height":0},{"lat":24.77456783615783,"lng":103.28414638140464,"height":0},{"lat":24.77462110585226,"lng":103.28396856259349,"height":0},{"lat":24.774213042337866,"lng":103.28347567106448,"height":0},{"lat":24.769416289458558,"lng":103.27834108656202,"height":0},{"lat":24.768211715355637,"lng":103.27955690817794,"height":0},{"lat":24.76694389250556,"lng":103.28077354883021,"height":0},{"lat":24.766048799411895,"lng":103.28077184504582,"height":0},{"lat":24.765498956928496,"lng":103.2812304338554,"height":0},{"lat":24.769475181899658,"lng":103.28535078674713,"height":0},{"lat":24.771609808296688,"lng":103.28780907997123,"height":0}]';
//小乐台旧网格
var sq2_1 = '[{"lat":24.77073801016765,"lng":103.28514165258935,"height":0},{"lat":24.771345420973116,"lng":103.28481422914649,"height":0},{"lat":24.772477308128558,"lng":103.2851345151389,"height":0},{"lat":24.77331023397699,"lng":103.28602013873217,"height":0},{"lat":24.77456783615783,"lng":103.28414638140464,"height":0},{"lat":24.77462110585226,"lng":103.28396856259349,"height":0},{"lat":24.774213042337866,"lng":103.28347567106448,"height":0},{"lat":24.769416289458558,"lng":103.27834108656202,"height":0},{"lat":24.768211715355637,"lng":103.27955690817794,"height":0},{"lat":24.76694389250556,"lng":103.28077354883021,"height":0},{"lat":24.766048799411895,"lng":103.28077184504582,"height":0},{"lat":24.765498956928496,"lng":103.2812304338554,"height":0},{"lat":24.769475181899658,"lng":103.28535078674713,"height":0},{"lat":24.769986237394114,"lng":103.28463907710568,"height":0}]';
//天赐良缘网格
var sq2_2 = '[{"lat":24.770811884067143,"lng":103.2865211109206,"height":0},{"lat":24.771346274143422,"lng":103.28704476352596,"height":0},{"lat":24.771635737524463,"lng":103.28727708630595,"height":0},{"lat":24.771862758743552,"lng":103.28738134064065,"height":0},{"lat":24.772459045358872,"lng":103.28682775435163,"height":0},{"lat":24.773045782790728,"lng":103.28619199641503,"height":0},{"lat":24.772205761969204,"lng":103.28611761557431,"height":0},{"lat":24.771466453107017,"lng":103.28568364962962,"height":0},{"lat":24.77078049244932,"lng":103.2852688756252,"height":0},{"lat":24.77037585577454,"lng":103.28571806716718,"height":0},{"lat":24.770964653696968,"lng":103.28629672142267,"height":0}]';
var sq = [
{
id:"1",
data:sq1,
title:"昌乐社区",
},
{
id:"2",
data:sq2,
title:"小乐台旧社区",
},
];
var sq_1 = [
{
id:"1-1",
data:sq1_1,
title:"昌乐社区-万城四期网格",
},
{
id:"1-2",
data:sq1_2,
title:"昌乐社区-万城二期网格",
},
{
id:"2-1",
data:sq2_1,
title:"小乐台旧社区-小乐台旧网格",
},
{
id:"2-2",
data:sq2_2,
title:"小乐台旧社区-天赐良缘网格",
},
];
var zoom = 14,map;
function initMap() {
var center = new TMap.LatLng(24.773079,103.287714);//设置中心点坐标
//初始化地图
map = new TMap.Map('mapContainer', {
center: center,
zoom: 14,
baseMap: {type: 'satellite'}// 设置卫星地图
});
var eventClick = function (res) {
var r = res;
var res = res && res.geometry;
console.log(res);
if (res) {
var doc = $("#info"+res.id);
if(doc.length > 0){
doc.remove();
}else{
showMapsInfo(map,res.id,r.latLng,res.properties.title,"绘制区域点击事件：<br>多边形ID：" + res.id + '; <br>样式ID：' + res.styleId);
}
}
}
//地图进行缩放的时候监听该函数
map.on('zoomend',function(){
zoom = Math.round(map.getZoom());
console.log("当前地图缩放级别：",zoom+"---"+map.getZoom());
//显示网格信息
if(zoom>14){
var sq_1Map = showMaps(map,sq_1,"sq_1",'rgba(250,235,215,0.5)','#FF0000');
sq_1Map.on('click', eventClick);
}
});
var sqMap = showMaps(map,sq,"sq",'rgba(250,235,215,0.3)','#3777FF');
sqMap.on('click', eventClick);
}
/**
* 将坐标转化为绘制区域所需的数组
* param {type} data
* return {Array|parseTMapArr.res}
*/
function parseTMapArr(data){
data = $.parseJSON(data);
var res = [];
$.each(data, function (i,v){
res.push(new TMap.LatLng(v.lat,v.lng))
});
return res;;
}
/**
* 绘制区域
* param {type} map
* param {type} datas
* param {type} polygonid
* param {type} bgColor
* param {type} borderColor
* return {TMap.MultiPolygon}
*/
function showMaps(map,datas,polygonid,bgColor,borderColor){
var geometries = [];
$.each(datas, function (i,v){
var path = $.parseJSON(v.data);
geometries.push({
'id': v.id, //多边形图形数据的标志信息
'styleId': 'polygon', //样式id
'paths': path, //多边形的位置信息
'properties': { //多边形的属性数据
'title':v.title
}
});
});
//初始化polygon
return new TMap.MultiPolygon({
id: polygonid, //图层id
map: map, //显示多边形图层的底图
styles: { //多边形的相关样式
'polygon': new TMap.PolygonStyle({
'color': bgColor, //面填充色
'showBorder':true, //是否显示拔起面的边线
'borderColor': borderColor //边线颜色
})
},
geometries: geometries
});
}
/**
* 显示信息
* param {type} map
* param {type} id
* param {type} position 显示位置，经纬度
* param {type} title
* param {type} content
* param {type} x 偏移量
* param {type} y 偏移量
* return {TMap.InfoWindow}
*/
function showMapsInfo(map,id,position,title,content,x=-5,y=-75){
return new TMap.InfoWindow({
map: map,
enableCustom: true,
position: new TMap.LatLng(position.lat,position.lng),
offset: { y:y, x:x},
content:
'<div class="info_card" id="info'+id+'">'+
' <div align="left" class="content"><div class="title">'+title+'</div>'+content+'</div>'+
' <span class="cancle bot"></span>'+
' <span class="cancle top"></span>'+
'</div>',
});
}
</script>
</body>
</html>