百度地图API 2.0实现点聚合分布图
Posted 喵~喵
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度地图API 2.0实现点聚合分布图相关的知识，希望对你有一定的参考价值。
实现效果图如下：
上方下拉列表使用的是handlebars模板，地图使用百度地图api2.0加载，实现选择下拉框条件后筛选出符合条件的学校点加载在地图上，蓝色是小学，红色是初中，点击学校弹出弹框展示学校的具体信息。
html代码
<link type="text/css" rel="stylesheet" href="~/Resources/css/schooldistr.css" /> <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /> <link type="text/css" rel="stylesheet" href="~/Resources/css/public.css" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=""></script> <script type="text/javascript" src="~/Resources/static/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="~/Resources/static/handlebars-v4.0.11.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> <div class="main">
<!--下拉列表模板-->
<div class="dropdownbar" id="DropdownBar"> <script id="DropdownTemplate" type="text/x-handlebars-template"> <ul> <li id="li-CategStandard"> <span class="menu"></span> <div class="dropdown-group btn-group"> <button id="CategStandard" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-value="{{CategStandard.[0].CategStandardName}}" data-limit="{{CategStandard.[0].LimitedData}}" data-name="{{CategStandard.[0].Indicator}}"> {{CategStandard.[0].CategStandardName}} <span class="caret"></span> </button> <ul class="dropdown-menu"> {{#if CategStandard}} {{#each CategStandard}} <li><a href="javascript:void(0);" data-value="{{this.CategStandardName}}" data-limit="{{this.LimitedData}}" data-name="{{this.Indicator}}">{{this.CategStandardName}}</a></li> {{/each}} {{/if}} </ul> </div> </li> <li id="li-Indicator" style="display:none"> <label class="dropdown-label">指标：</label> <div class="dropdown-group btn-group"> <button id="Indicator" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-limit="{{Indicator.[0].LimitedData}}" data-value="{{Indicator.[0].IndicatorName}}"> {{Indicator.[0].IndicatorName}} <span class="caret"></span> </button> <ul class="dropdown-menu"> {{#if Indicator}} {{#each Indicator}} <li><a href="javascript:void(0);" data-value="{{this.IndicatorName}}" data-limit="{{this.LimitedData}}">{{this.IndicatorName}}</a></li> {{/each}} {{/if}} </ul> </div> </li> <li> <label class="dropdown-label">区域：</label> <div class="dropdown-group btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="firstareacode" data-name="{{Areas.[0].AreaName}}" data-code="{{Areas.[0].AreaCode}}" data-grade="{{Areas.[0].AreaGrade}}"> {{Areas.[0].AreaName}} <span class="caret"></span> </button> <ul class="dropdown-menu"> {{#if Areas}} {{#each Areas}} <li><a onclick="GetSecondArea(this)" href="javascript:void(0);" data-name="{{this.AreaName}}" data-code="{{this.AreaCode}}" data-grade="{{this.AreaGrade}}">{{this.AreaName}}</a></li> {{/each}} {{/if}} </ul> </div> </li> <li id="second-area" class="second-area"></li> <li> <label class="dropdown-label">年份：</label> <div class="dropdown-group btn-group"> <button type="button" class="btn btn-default dropdown-toggle" id="time" data-toggle="dropdown" data-time="{{ Years.[0]}}" data-id="time" data-value="{{ Years.[0]}}"> {{ Years.[0]}} <span class="caret"></span> </button> <ul class="dropdown-menu"> {{#if Years}} {{#each Years}} <li><a href="javascript:void(0);" data-value="{{this}}">{{this}}</a></li> {{/each}} {{/if}} </ul> </div> </li> <li> <label class="dropdown-label">学校级别：</label> <div class="dropdown-group btn-group"> <button type="button" class="btn btn-default dropdown-toggle" id="SchoolGrade" data-tog以上是关于百度地图API 2.0实现点聚合分布图的主要内容，如果未能解决你的问题，请参考以下文章