Map 地图

使用说明

本框架推崇百度地图,借助百度地图可以制作许多实用的效果。详见百度地图JavaScript版本的API。实用前需要先申请百度地图的秘钥,然后跟随百度官方文档便可以实现常用效果,下面列举一些常用的。

自定义定位点

  • <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=M0Odnx4yOGSzD3cLlUP7DmtKben5axaw"></script>
    <script type='text/javascript'>
        //自定义一个标注
        var mapAdd = new BMap.Map("map-add",{
            enableMapClick: false,
        });
        mapAdd.centerAndZoom(new BMap.Point(112.74776564403146,37.74811011364706), 17);
        mapAdd.addControl(new BMap.MapTypeControl({
            mapTypes: []
        }));
        mapAdd.setCurrentCity("山西");
        mapAdd.enableScrollWheelZoom(true);
        //
        var picLocate = new BMap.Icon("images/locate.png", new BMap.Size(100, 100), {anchor: new BMap.Size(50, 100)});
        var locate = new BMap.Marker(new BMap.Point(112.74512462583206,37.747197067331044), {icon: picLocate});
        mapAdd.addOverlay(locate);
    </script>
                            
  •                                      <div id="map-add" style="height:400px;"></div>
                                        

自定义地图

本例需要借助切片工具BaiduMapTileCutter制作不同缩放条件下的手工地图,可去github下载。如果需要该软件教程请自行百度搜索。

  • <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=M0Odnx4yOGSzD3cLlUP7DmtKben5axaw"></script>
    <script type='text/javascript'>
        //自定义地图
        var mapTile = new BMap.Map("map-tile",{
            enableMapClick: false,
            minZoom:16,
            maxZoom:18
        });
        mapTile.centerAndZoom(new BMap.Point(112.74776564403146,37.74811011364706), 17);
        mapTile.addControl(new BMap.MapTypeControl({
            mapTypes: []
        }));
        mapTile.setCurrentCity("山西");
        mapTile.enableScrollWheelZoom(true);
        //
        var tileLayer = new BMap.TileLayer();
        tileLayer.getTilesUrl = function(tileCoord, zoom) {
            var x = tileCoord.x;
            var y = tileCoord.y;
            return 'tiles/' + zoom + '/tile-' + x + '_' + y + '.png';
        };
        mapTile.addTileLayer(tileLayer);
    </script>
                            
  •                                      <div id="map-tile" style="height:400px;"></div>
                                        

自定义窗口

自定义窗口需要借助开源库infoBox.js插件,详细用法见官网。为了更好使用该插件,本框架在原插件基础上做了若干修改,修改内容如下:

  • 修改插件默认参数。
  • 新增参数closeText,自定义关闭按钮,比如closeText:'关闭',该参数在没有填写closeIconUrl参数时有效。
  • <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=M0Odnx4yOGSzD3cLlUP7DmtKben5axaw"></script>
    <script src="https://src.axui.cn/src/plugins/baidu/infoBox.js" type="text/javascript"></script>
    <script type='text/javascript'>
        //自定义窗口
        var mapWin = new BMap.Map("map-win",{
            enableMapClick: false,
        });
        mapWin.centerAndZoom(new BMap.Point(112.74776564403146,37.74811011364706), 17);
        mapWin.addControl(new BMap.MapTypeControl({
            mapTypes: []
        }));
        mapWin.setCurrentCity("山西");
        mapWin.enableScrollWheelZoom(true);
        //
        var icon = new BMap.Icon("images/map.png", new BMap.Size(36, 36), {anchor: new BMap.Size(18, 36)});
        var mark = new BMap.Marker(new BMap.Point(112.7473883557172,37.7494511688903), {icon: icon});
        var html = $("#win").html();
        var infoBox = new BMapLib.InfoBox(mapWin, html, {});
        mapWin.addOverlay(mark);
        mark.addEventListener("click", function(){infoBox.open(mark);});
    </script>
                            
  •                         <div id="map-win" style="height:400px;"></div>
                            <div id="win" style="display: none;">
                                <div class="ax-panel ax-shadow ax-radius">
                                    <div class="ax-panel-header">关于中国(简单结构)</div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-panel-body ax-article">
                                        中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。
                                    </div>
                                </div>
                            </div>
                                        

tab窗口

与上一个例子类似,只是本例对窗口增加了监听事件,请详细观摩演示效果。

  • <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=M0Odnx4yOGSzD3cLlUP7DmtKben5axaw"></script>
    <script src="https://src.axui.cn/src/plugins/baidu/infoBox.js" type="text/javascript"></script>
    <script type='text/javascript'>
        //自定义窗口
        var mapTab = new BMap.Map("map-tab",{
            enableMapClick: false,
        });
        mapTab.centerAndZoom(new BMap.Point(112.74776564403146,37.74811011364706), 17);
        mapTab.addControl(new BMap.MapTypeControl({
            mapTypes: []
        }));
        mapTab.setCurrentCity("山西");
        mapTab.enableScrollWheelZoom(true);
        //
        var icon = new BMap.Icon("images/map.png", new BMap.Size(36, 36), {anchor: new BMap.Size(18, 36)});
        var mark = new BMap.Marker(new BMap.Point(112.74869988176178,37.745955855266835), {icon: icon});
        var html = $("#tab").html();
        var infoBox = new BMapLib.InfoBox(mapTab, html, {
            closeIconUrl: "images/close.png",
        });
        mapTab.addOverlay(mark);
        mark.addEventListener("click", function(){infoBox.open(mark);});
       //
        infoBox.addEventListener("open",
            function(e) {
                function tab(menus, conts) {
                    $(menus).children().click(function() {
                        var index = $(menus).children('li').index(this);
                        $(this).addClass("ax-active").siblings('li').removeClass("ax-active");
                        $(conts).children('li').eq(index).show().siblings('li').hide();
                    })
                }
                tab(".ax-tab-nav", ".ax-tab-content")
            });
    </script>
                            
  • <div id="map-tab" style="height:400px;"></div>
    <div id="tab" style="display: none;">
        <div class="ax-tab ax-shadow ax-radius">
            <div class="ax-grid">
                <ul class="ax-grid-inner ax-tab-nav ax-menu-tab">
                    <li class="ax-grid-block ax-col-8 ax-item ax-active">民族构成</li>
                    <li class="ax-grid-block ax-col-8 ax-item">发展历史</li>
                    <li class="ax-grid-block ax-col-8 ax-item">共和政体</li>
                    <div class="ax-clear"></div>
                </ul>
            </div>
            <div class="ax-break-line"></div>
            <ul class="ax-tab-content ax-padding">
                <li class="ax-active">中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</li>
                <li>中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。</li>
                <li>20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。</li>
            </ul>
        </div>
    </div>
                                        

热力图

使用热力图需要用到百度地图开源库heatMap.js,详见官网。可以通过本框架开发的百度地图坐标拾取器获得模拟热力点位,详见百度地图坐标拾取器

  • <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=M0Odnx4yOGSzD3cLlUP7DmtKben5axaw"></script>
    <script src="https://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js" type="text/javascript"></script>
    <script >
        //热力图
        var heatMap = new BMap.Map("map-heat");
        heatMap.centerAndZoom(new BMap.Point(112.74776564403146,37.74811011364706), 17);
        heatMap.enableScrollWheelZoom();
        var points =[{"lng":112.74954428894115,"lat":37.74771066618233,"count":22},{"lng":112.74958022116155,"lat":37.747568000195315,"count":43},{"lng":112.74952632283096,"lat":37.747653599820815,"count":10},{"lng":112.74952632283096,"lat":37.74743960056988,"count":90},{"lng":112.74952632283096,"lat":37.74722560069487,"count":111},{"lng":112.74954428894115,"lat":37.747140000570134,"count":65},{"lng":112.74958022116155,"lat":37.74701160019579,"count":70},{"lng":112.74958022116155,"lat":37.74689746634112,"count":23},{"lng":112.74954428894115,"lat":37.746640664519056,"count":189},{"lng":112.74954428894115,"lat":37.74654079690112,"count":150},{"lng":112.74961615338195,"lat":37.74645519597758,"count":60},{"lng":112.74967005171256,"lat":37.746412395478366,"count":67},{"lng":112.74981378059415,"lat":37.74628399383094,"count":83},{"lng":112.75002937391655,"lat":37.74619839260785,"count":172},{"lng":112.75067615388373,"lat":37.74614132507031,"count":118},{"lng":112.75089174720613,"lat":37.74639812863975,"count":60},{"lng":112.75087378109592,"lat":37.746583597325454,"count":7},{"lng":112.75087378109592,"lat":37.7468261325918,"count":176},{"lng":112.75087378109592,"lat":37.746968800021094,"count":113},{"lng":112.75096361164692,"lat":37.7475822668065,"count":86},{"lng":112.75096361164692,"lat":37.747696399596116,"count":29},{"lng":112.75096361164692,"lat":37.7477962656414,"count":120},{"lng":112.74803513568439,"lat":37.744914362279495,"count":120},{"lng":112.74803513568439,"lat":37.744942896530866,"count":71},{"lng":112.7480531017946,"lat":37.745099834715106,"count":29},{"lng":112.7480531017946,"lat":37.74542797710676,"count":141},{"lng":112.7480531017946,"lat":37.74569905014974,"count":58},{"lng":112.74803513568439,"lat":37.74587025366099,"count":80},{"lng":112.74724462683561,"lat":37.7460129229486,"count":24},{"lng":112.747190728505,"lat":37.7458987875407,"count":96},{"lng":112.7471188640642,"lat":37.745784651955276,"count":190},{"lng":112.7471188640642,"lat":37.74574185106499,"count":141},{"lng":112.74702903351321,"lat":37.74490009514964,"count":90},{"lng":112.74702903351321,"lat":37.74490009514964,"count":137},{"lng":112.74668767741942,"lat":37.74481449231231,"count":47},{"lng":112.74666971130922,"lat":37.74481449231231,"count":95},{"lng":112.74652598242763,"lat":37.74481449231231,"count":78},{"lng":112.74701106740301,"lat":37.746726265226265,"count":6},{"lng":112.74684937241122,"lat":37.7468831995968,"count":57},{"lng":112.74683140630101,"lat":37.74806732993637,"count":53},{"lng":112.74683140630101,"lat":37.7474681338394,"count":136},{"lng":112.74713683017441,"lat":37.74808159645048,"count":172},{"lng":112.7472625929458,"lat":37.74846679128285,"count":40},{"lng":112.7472625929458,"lat":37.74858092269672,"count":110},{"lng":112.74769377959059,"lat":37.74918010970719,"count":153},{"lng":112.74772971181099,"lat":37.74918010970719,"count":24},{"lng":112.7472625929458,"lat":37.74946543513536,"count":102},{"lng":112.7472985251662,"lat":37.74957956499597,"count":113},{"lng":112.7474961523784,"lat":37.74957956499597,"count":51},{"lng":112.7475141184886,"lat":37.74977929182491,"count":127},{"lng":112.7474063218274,"lat":37.74956529877311,"count":156},{"lng":112.74717276239481,"lat":37.74937983762341,"count":113},{"lng":112.74693920296221,"lat":37.74933703882998,"count":184},{"lng":112.7472985251662,"lat":37.74903744657705,"count":25},{"lng":112.7474063218274,"lat":37.74905171290255,"count":144},{"lng":112.7474961523784,"lat":37.7490945118624,"count":15},{"lng":112.74551988025645,"lat":37.74793893118462,"count":56},{"lng":112.74519649027286,"lat":37.74798173079349,"count":93},{"lng":112.74507072750146,"lat":37.74798173079349,"count":155},{"lng":112.74469343918727,"lat":37.74796746425997,"count":146},{"lng":112.74453174419547,"lat":37.74795319772368,"count":12},{"lng":112.74429818476288,"lat":37.74771066618233,"count":158},{"lng":112.74428021865268,"lat":37.74736826734755,"count":131},{"lng":112.74435208309347,"lat":37.74729693405588,"count":22},{"lng":112.74476530362807,"lat":37.747140000570134,"count":14},{"lng":112.74474733751786,"lat":37.7468831995968,"count":77},{"lng":112.74474733751786,"lat":37.74686893284971,"count":30},{"lng":112.74521445638305,"lat":37.74689746634112,"count":43},{"lng":112.74521445638305,"lat":37.746925999821435,"count":128},{"lng":112.74534021915446,"lat":37.74668346488515,"count":99},{"lng":112.74534021915446,"lat":37.74668346488515,"count":180},{"lng":112.74537615137486,"lat":37.74665493131052,"count":80},{"lng":112.7515205610631,"lat":37.746483729629865,"count":23},{"lng":112.7515205610631,"lat":37.746783332308915,"count":12},{"lng":112.7514846288427,"lat":37.74722560069487,"count":71},{"lng":112.7514846288427,"lat":37.74736826734755,"count":132},{"lng":112.75205954436909,"lat":37.747910398098156,"count":179},{"lng":112.75231106991188,"lat":37.747910398098156,"count":26},{"lng":112.75268835822608,"lat":37.74753946696463,"count":16},{"lng":112.75256259545468,"lat":37.747382533997566,"count":106},{"lng":112.75252666323428,"lat":37.74722560069487,"count":125},{"lng":112.75250869712409,"lat":37.74705440034553,"count":145},{"lng":112.75250869712409,"lat":37.746968800021094,"count":143},{"lng":112.75213140880989,"lat":37.74701160019579,"count":179},{"lng":112.7520415782589,"lat":37.74702586691515,"count":71},{"lng":112.75227513769148,"lat":37.74689746634112,"count":194},{"lng":112.7521853071405,"lat":37.74686893284971,"count":131},{"lng":112.7521493749201,"lat":37.746769065542416,"count":194},{"lng":112.7520775104793,"lat":37.746726265226265,"count":163},{"lng":112.7520775104793,"lat":37.74671199844866,"count":105},{"lng":112.75213140880989,"lat":37.746726265226265,"count":158},{"lng":112.75213140880989,"lat":37.74674053200109,"count":71},{"lng":112.7521134426997,"lat":37.746783332308915,"count":20},{"lng":112.75209547658949,"lat":37.74679759907266,"count":167},{"lng":112.7517900527161,"lat":37.74702586691515,"count":131},{"lng":112.7518798832671,"lat":37.747168533956135,"count":81},{"lng":112.75229310380169,"lat":37.74594158833946,"count":164},{"lng":112.7517900527161,"lat":37.7460557236808,"count":64},{"lng":112.7515924255039,"lat":37.74609852438804,"count":4},{"lng":112.75139479829171,"lat":37.74609852438804,"count":149},{"lng":112.7513768321815,"lat":37.74594158833946,"count":128},{"lng":112.7514846288427,"lat":37.74574185106499,"count":38},{"lng":112.75146666273251,"lat":37.745556380251934,"count":199},{"lng":112.75146666273251,"lat":37.74502849921841,"count":99},{"lng":112.7515205610631,"lat":37.74490009514964,"count":118},{"lng":112.7517181882753,"lat":37.74490009514964,"count":196},{"lng":112.75213140880989,"lat":37.74490009514964,"count":181},{"lng":112.75222123936089,"lat":37.74490009514964,"count":89},{"lng":112.75069411999392,"lat":37.74475742369862,"count":188},{"lng":112.75015513668794,"lat":37.74481449231231,"count":22},{"lng":112.74828666122718,"lat":37.74464328633811,"count":34},{"lng":112.74828666122718,"lat":37.74464328633811,"count":133},{"lng":112.7481608984558,"lat":37.74464328633811,"count":141},{"lng":112.7480531017946,"lat":37.744629019155575,"count":64},{"lng":112.7478914068028,"lat":37.744629019155575,"count":156},{"lng":112.7477476779212,"lat":37.744629019155575,"count":83},{"lng":112.7477476779212,"lat":37.744629019155575,"count":67},{"lng":112.74763988126,"lat":37.74517117014244,"count":193},{"lng":112.7477117457008,"lat":37.74549931221515,"count":172},{"lng":112.74907717007596,"lat":37.74474315653826,"count":142},{"lng":112.74929276339836,"lat":37.74474315653826,"count":132},{"lng":112.74911310229636,"lat":37.75000755039226,"count":166},{"lng":112.74913106840657,"lat":37.750250074342084,"count":194},{"lng":112.74904123785556,"lat":37.750706587837726,"count":58},{"lng":112.74904123785556,"lat":37.75089204563403,"count":171},{"lng":112.74895140730457,"lat":37.751120300739814,"count":46},{"lng":112.74864598343117,"lat":37.75090631159893,"count":13},{"lng":112.74832259344758,"lat":37.750792183801956,"count":66},{"lng":112.74810700012519,"lat":37.750763651824975,"count":95},{"lng":112.7477836101416,"lat":37.75077791781487,"count":0},{"lng":112.7476219151498,"lat":37.75087777966635,"count":180},{"lng":112.75024496723894,"lat":37.7509776413819,"count":72},{"lng":112.75024496723894,"lat":37.7509776413819,"count":159},{"lng":112.75028089945934,"lat":37.75080644978628,"count":13},{"lng":112.75053242500213,"lat":37.75052112957268,"count":199},{"lng":112.75065818777352,"lat":37.75052112957268,"count":2},{"lng":112.75085581498573,"lat":37.75050686353287,"count":89},{"lng":112.75116123885911,"lat":37.750449799345915,"count":81},{"lng":112.75116123885911,"lat":37.750378469049814,"count":98},{"lng":112.75125106941012,"lat":37.75080644978628,"count":1},{"lng":112.75125106941012,"lat":37.7510204392184,"count":120},{"lng":112.75126903552031,"lat":37.75113456666034,"count":129},{"lng":112.7516283577243,"lat":37.75046406539681,"count":138},{"lng":112.7517002221651,"lat":37.75010741329222,"count":192},{"lng":112.7516642899447,"lat":37.75030713868437,"count":49},{"lng":112.7516642899447,"lat":37.750250074342084,"count":138},{"lng":112.7516642899447,"lat":37.750250074342084,"count":22},{"lng":112.7517541204957,"lat":37.75002181652915,"count":63},{"lng":112.7516283577243,"lat":37.74983635653331,"count":114},{"lng":112.7515924255039,"lat":37.74962236364793,"count":77},{"lng":112.7515924255039,"lat":37.74959383121607,"count":47},{"lng":112.75157445939371,"lat":37.74957956499597,"count":80},{"lng":112.7514846288427,"lat":37.74957956499597,"count":144},{"lng":112.74431615087308,"lat":37.749650896068715,"count":159},{"lng":112.74429818476288,"lat":37.74937983762341,"count":107},{"lng":112.74429818476288,"lat":37.7492942400116,"count":150},{"lng":112.74429818476288,"lat":37.74880918499191,"count":76},{"lng":112.74422632032208,"lat":37.74858092269672,"count":9},{"lng":112.7438310658977,"lat":37.749165843406665,"count":53},{"lng":112.74377716756709,"lat":37.749165843406665,"count":80},{"lng":112.7436514047957,"lat":37.749151577103355,"count":192},{"lng":112.74377716756709,"lat":37.74880918499191,"count":49},{"lng":112.74397479477929,"lat":37.74875211948468,"count":125},{"lng":112.74395682866908,"lat":37.74869505393307,"count":71},{"lng":112.74397479477929,"lat":37.74859518911097,"count":99},{"lng":112.74402869310988,"lat":37.74855238985989,"count":33},{"lng":112.74404665922009,"lat":37.74853812343733,"count":109},{"lng":112.7433459809223,"lat":37.747781999071826,"count":64},{"lng":112.7433280148121,"lat":37.747781999071826,"count":96},{"lng":112.74307648926931,"lat":37.74772493276578,"count":95},{"lng":112.74298665871831,"lat":37.74772493276578,"count":193},{"lng":112.74298665871831,"lat":37.74772493276578,"count":18},{"lng":112.74296869260812,"lat":37.7480958629618,"count":89},{"lng":112.74287886205711,"lat":37.7480958629618,"count":193},{"lng":112.74282496372652,"lat":37.74805306341949,"count":191},{"lng":112.75249073101388,"lat":37.748267060881425,"count":186},{"lng":112.75250869712409,"lat":37.74835265969146,"count":118},{"lng":112.75274225655667,"lat":37.74833839323005,"count":164},{"lng":112.75267039211587,"lat":37.74823852792256,"count":14},{"lng":112.75267039211587,"lat":37.748167195476846,"count":74},{"lng":112.75276022266688,"lat":37.748010263852215,"count":128},{"lng":112.7521853071405,"lat":37.74822426143896,"count":173},{"lng":112.7520415782589,"lat":37.74832412676588,"count":71},{"lng":112.7520415782589,"lat":37.74835265969146,"count":180},{"lng":112.7517002221651,"lat":37.748252794403385,"count":101},{"lng":112.7518259849365,"lat":37.74796746425997,"count":193},{"lng":112.7518259849365,"lat":37.747910398098156,"count":27},{"lng":112.7514846288427,"lat":37.74776773249947,"count":78},{"lng":112.74999344169615,"lat":37.748252794403385,"count":171},{"lng":112.75020903501854,"lat":37.748723586714426,"count":133},{"lng":112.75028089945934,"lat":37.748267060881425,"count":128},{"lng":112.75035276390014,"lat":37.748267060881425,"count":123},{"lng":112.75049649278174,"lat":37.74855238985989,"count":84},{"lng":112.75090971331632,"lat":37.748851984093214,"count":138},{"lng":112.75117920496932,"lat":37.748794918619275,"count":85},{"lng":112.74807106790479,"lat":37.74893758222093,"count":120},{"lng":112.7481249662354,"lat":37.74896611490798,"count":100},{"lng":112.74814293234559,"lat":37.74859518911097,"count":116},{"lng":112.74814293234559,"lat":37.74853812343733,"count":76},{"lng":112.74814293234559,"lat":37.74850959058385,"count":6},{"lng":112.74772971181099,"lat":37.75019300995541,"count":3},{"lng":112.7476758134804,"lat":37.75074938583233,"count":157},{"lng":112.74620259244404,"lat":37.75080644978628,"count":60},{"lng":112.74604089745223,"lat":37.750849247722634,"count":65},{"lng":112.74573547357885,"lat":37.75082071576785,"count":88},{"lng":112.74487310028927,"lat":37.75066378981817,"count":111},{"lng":112.74541208359526,"lat":37.75080644978628,"count":134},{"lng":112.74539411748505,"lat":37.750792183801956,"count":147},{"lng":112.74544801581565,"lat":37.75057819370416,"count":129},{"lng":112.74553784636664,"lat":37.750449799345915,"count":8},{"lng":112.74560971080744,"lat":37.750292872602955,"count":9},{"lng":112.74577140579925,"lat":37.75012167940969,"count":118},{"lng":112.74589716857064,"lat":37.75002181652915,"count":83},{"lng":112.74519649027286,"lat":37.751434150350846,"count":40},{"lng":112.74569954135845,"lat":37.75139135275567,"count":122},{"lng":112.74433411698328,"lat":37.7511630984931,"count":64},{"lng":112.74428021865268,"lat":37.75099190733018,"count":65},{"lng":112.74424428643228,"lat":37.750678055827464,"count":125},{"lng":112.74442394753427,"lat":37.75066378981817,"count":106},{"lng":112.74433411698328,"lat":37.750449799345915,"count":9},{"lng":112.74424428643228,"lat":37.75039273511458,"count":106},{"lng":112.74435208309347,"lat":37.7460557236808,"count":114},{"lng":112.74433411698328,"lat":37.745955855266835,"count":59},{"lng":112.74433411698328,"lat":37.74587025366099,"count":74},{"lng":112.74438801531387,"lat":37.74582745282063,"count":54},{"lng":112.74449581197507,"lat":37.74577038499463,"count":124},{"lng":112.74442394753427,"lat":37.74539944304399,"count":65},{"lng":112.74444191364448,"lat":37.74528530668198,"count":112},{"lng":112.74469343918727,"lat":37.744942896530866,"count":155},{"lng":112.74532225304425,"lat":37.74474315653826,"count":152},{"lng":112.74544801581565,"lat":37.74472888937513,"count":174},{"lng":112.74620259244404,"lat":37.74461475197026,"count":12},{"lng":112.74663377908882,"lat":37.744472079964524,"count":82},{"lng":112.74654394853782,"lat":37.74438647662796,"count":115},{"lng":112.74618462633383,"lat":37.74437220939549,"count":162},{"lng":112.74535818526465,"lat":37.74437220939549,"count":113},{"lng":112.74471140529747,"lat":37.74438647662796,"count":85},{"lng":112.74424428643228,"lat":37.74482875945879,"count":122},{"lng":112.74440598142408,"lat":37.74531384078912,"count":131},{"lng":112.74487310028927,"lat":37.7455991812504,"count":80},{"lng":112.74489106639946,"lat":37.74585598671697,"count":84},{"lng":112.74447784586488,"lat":37.746583597325454,"count":69},{"lng":112.74428021865268,"lat":37.74679759907266,"count":118},{"lng":112.7436873370161,"lat":37.746811865833614,"count":183},{"lng":112.7434897098039,"lat":37.746811865833614,"count":94},{"lng":112.7432381842611,"lat":37.746811865833614,"count":127},{"lng":112.7436873370161,"lat":37.75082071576785,"count":102},{"lng":112.74374123534669,"lat":37.75050686353287,"count":168},{"lng":112.7438310658977,"lat":37.750478331444945,"count":173},{"lng":112.7435076759141,"lat":37.750478331444945,"count":63},{"lng":112.74390293033849,"lat":37.750407001176576,"count":47},{"lng":112.74402869310988,"lat":37.75030713868437,"count":189},{"lng":112.75078395054493,"lat":37.74577038499463,"count":106},{"lng":112.75073005221432,"lat":37.745556380251934,"count":19},{"lng":112.75004734002674,"lat":37.74792466464279,"count":145},{"lng":112.74986767892474,"lat":37.74781053220821,"count":132},{"lng":112.74984971281455,"lat":37.74781053220821,"count":26},{"lng":112.75015513668794,"lat":37.74715426726451,"count":187},{"lng":112.75010123835735,"lat":37.746469462805095,"count":65},{"lng":112.75024496723894,"lat":37.7468831995968,"count":40},{"lng":112.75051445889193,"lat":37.747482400469984,"count":89},{"lng":112.75044259445113,"lat":37.74679759907266,"count":188},];
        heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});
        heatMap.addOverlay(heatmapOverlay);
        heatmapOverlay.setDataSet({data:points,max:150});
    </script>
                            
  • <div id="map-heat" style="height:400px;"></div>
                                        

百度地图坐标拾取器

网上缺乏百度地图坐标拾取器,百度官方的拾取器也不够好用,参见百度地图坐标拾取系统。在项目开发中,针对实际情况本框架开发了一款坐标拾取器工具。本拾取器功能如下:

  • 1、单击获取位置经纬度
  • 2、连续单击获得热力图点位
  • 3、输入经纬度直接中心定位
  • 4、输入地名进行模糊定位
  • 5、通过缩放操作获得缩放比例
  • 6、显示或隐藏瓦片图层
  • 7、保留百度地图默认控件
  • 8、一键回到初始状态
  • 9、一键清除所有点位
在线使用 下载使用