1010_百度地图API JS调用实例

百度地图API JS调用实例

2017年12月26日 

 

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_30455841/article/details/78900036

因为最近项目中需要使用百度地图，特此记录一下使用过程，大致跟百度地图API中的demo一样，只是将多个方法进行了一下封装。

主要是用到了地图定位、地图坐标点选择、智能搜索定位。直接上代码：

样式：

<span style="color:#000000"><code>    <span style="color:#006666"><<span style="color:#4f4f4f">style</span>></span>
        <span style="color:#000000">body</span>,<span style="color:#000000">html</span>,<span style="color:#000000">div</span>,<span style="color:#000000">header</span>{
            margin:<span style="color:#009900"><span style="color:#009900">0</span></span>;
            padding:<span style="color:#009900"><span style="color:#009900">0</span></span>;}
        <span style="color:#9b703f">#icon_header</span> {
            width:<span style="color:#009900"> <span style="color:#009900">100</span>%</span>;
            height:<span style="color:#009900"> <span style="color:#009900">45</span>px</span>;
            line-height:<span style="color:#009900"> <span style="color:#009900">45</span>px</span>;
            position:<span style="color:#009900"> relative</span>;
            z-index:<span style="color:#009900"> <span style="color:#009900">5</span></span>;
            zoom:<span style="color:#009900"> <span style="color:#009900">1</span></span>;
            vertical-align:<span style="color:#009900"> middle</span>;
            background:<span style="color:#009900"> <span style="color:#006666">#fff</span></span>;
            margin:<span style="color:#009900"> auto</span>;
            text-align:<span style="color:#009900"> left</span>;
            border-bottom:<span style="color:#009900"> <span style="color:#009900">1</span>px solid <span style="color:#006666">#ddd</span></span>;
        }
        <span style="color:#9b703f">#icon_header</span> > <span style="color:#000000">a</span> {
            position:<span style="color:#009900"> absolute</span>;
            z-index:<span style="color:#009900"> <span style="color:#009900">5</span></span>;
            zoom:<span style="color:#009900"> <span style="color:#009900">1</span></span>;
            top:<span style="color:#009900"> <span style="color:#009900">0</span></span>;
            width:<span style="color:#009900"> <span style="color:#009900">45</span>px</span>;
            height:<span style="color:#009900"> <span style="color:#009900">45</span>px</span>;
            vertical-align:<span style="color:#009900"> middle</span>;
            text-align:<span style="color:#009900"> center</span>;
            color:<span style="color:#009900"> <span style="color:#006666">#666</span></span>;
            font-size:<span style="color:#009900"> <span style="color:#009900">1</span>rem</span>;
            text-decoration:<span style="color:#009900"> none</span>;
        }
        <span style="color:#9b703f">#confirm_location</span>{right:<span style="color:#009900"> <span style="color:#009900">0</span></span>;}
        <span style="color:#9b703f">#icon_header</span> <span style="color:#000000">div</span>{text-align:<span style="color:#009900"> center</span>;}
        <span style="color:#9b703f">#r-result</span> {
            width:<span style="color:#009900"> <span style="color:#009900">90</span>%</span>;
            background:<span style="color:#009900"> white</span>;
            position:<span style="color:#009900"> absolute</span>;
            top:<span style="color:#009900"> <span style="color:#009900">10</span>%</span>;
            left:<span style="color:#009900"> <span style="color:#009900">5</span>%</span>;
            height:<span style="color:#009900"> <span style="color:#009900">40</span>px</span>;
            line-height:<span style="color:#009900"> <span style="color:#009900">40</span>px</span>;
            border-radius:<span style="color:#009900"> <span style="color:#009900">4</span>px</span>;
            box-shadow:<span style="color:#009900"> <span style="color:#009900">2</span>px <span style="color:#009900">2</span>px <span style="color:#009900">5</span>px <span style="color:#006666">rgba(<span style="color:#009900">0</span>, <span style="color:#009900">0</span>, <span style="color:#009900">0</span>, <span style="color:#009900">0.3</span>)</span></span>;
        }
        <span style="color:#9b703f">#r-result</span> <span style="color:#000000">input</span> {
            border:<span style="color:#009900"> none</span>;
            background:<span style="color:#009900"> none</span>;
            outline:<span style="color:#009900"> none</span>;
            padding-left:<span style="color:#009900"> <span style="color:#009900">2</span>%</span>;
            width:<span style="color:#009900"> <span style="color:#009900">96</span>%</span>; }
    <span style="color:#006666"></<span style="color:#4f4f4f">style</span>></span></code></span>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50

HTML：

<span style="color:#000000"><code><header id=<span style="color:#009900">"icon_header"</span>>
    <<span style="color:#000088">div</span>>
        选择地址
    </<span style="color:#000088">div</span>>
    <a href=<span style="color:#009900">"javascript:;"</span> id=<span style="color:#009900">"confirm_location"</span>>确定</a>
</header>


<<span style="color:#000088">div</span> id=<span style="color:#009900">"map_show"</span>></<span style="color:#000088">div</span>>
<<span style="color:#000088">div</span> id=<span style="color:#009900">"r-result"</span>>
    <input type=<span style="color:#009900">"text"</span> id=<span style="color:#009900">"suggestId"</span> placeholder=<span style="color:#009900">"请输入地点"</span>/>
</<span style="color:#000088">div</span>>
<<span style="color:#000088">div</span> id=<span style="color:#009900">"searchResultPanel"</span> style=<span style="color:#009900">"display:none;"</span>></<span style="color:#000088">div</span>></code></span>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

JS:

<span style="color:#000000"><code><span style="color:#880000"><!--引入百度地图API--></span>
<span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">"text/javascript"</span> <span style="color:#4f4f4f">src</span>=<span style="color:#009900">"http://api.map.baidu.com/api?v=2.0&ak=iBM9rbzTH2dMZW7MbYMYmFgb"</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">script</span>></span>
    <span style="color:#000088">function</span> <span style="color:#009900">AddMap</span><span style="color:#4f4f4f">()</span>{
        <span style="color:#880000">//设置地图容器高度</span>
        <span style="color:#000088">var</span> screenH=window.innerHeight;
        <span style="color:#000088">var</span> headerH=<span style="color:#000088">this</span>.elById(<span style="color:#009900">"icon_header"</span>).offsetHeight;
        <span style="color:#000088">this</span>.elById(<span style="color:#009900">"map_show"</span>).style.height=screenH-headerH+<span style="color:#009900">"px"</span>;
    }

    <span style="color:#880000">/**
     * @param el 地图初始化容器
     * @param p  初始化坐标点
     */</span>
    AddMap.prototype.init=<span style="color:#000088">function</span><span style="color:#4f4f4f">(el,p)</span>{
        <span style="color:#000088">var</span> point={
            lng:<span style="color:#006666">116.404113</span>,
            lat:<span style="color:#006666">39.914965</span>
        };
        <span style="color:#000088">if</span>(p && p.lng && p.lat){
            point.lng=p.lng;
            point.lat=p.lat;
        }
        <span style="color:#000088">this</span>.m = <span style="color:#000088">new</span> BMap.Map(el);      <span style="color:#880000">//实例化地图</span>
        <span style="color:#000088">this</span>.p = <span style="color:#000088">new</span> BMap.Point(point.lng,point.lat);

        <span style="color:#000088">this</span>.m.enableContinuousZoom();    <span style="color:#880000">//启用地图惯性拖拽</span>
        <span style="color:#000088">this</span>.m.enableScrollWheelZoom();   <span style="color:#880000">//启用滚轮放大缩小</span>
        <span style="color:#000088">this</span>.m.centerAndZoom(<span style="color:#000088">this</span>.p, <span style="color:#006666">12</span>);  <span style="color:#880000">//设置地图显示中间点、地图显示级别</span>

        <span style="color:#000088">this</span>.addMaker(<span style="color:#000088">this</span>.p);
        <span style="color:#000088">this</span>.search();               <span style="color:#880000">//搜索</span>
        <span style="color:#000088">this</span>.getLocation();
    };

    <span style="color:#880000">//获取坐标点位置</span>
    AddMap.prototype.getLocation=<span style="color:#000088">function</span><span style="color:#4f4f4f">()</span>{
        <span style="color:#000088">var</span> _this=<span style="color:#000088">this</span>;
        <span style="color:#000088">var</span> confirm=<span style="color:#000088">this</span>.elById(<span style="color:#009900">"confirm_location"</span>);
        confirm.addEventListener(<span style="color:#009900">"click"</span>,<span style="color:#000088">function</span><span style="color:#4f4f4f">()</span>{
            <span style="color:#000088">var</span> makerPoint=_this.makerPoint();
            console.log(makerPoint)
        });
    };

    AddMap.prototype.elById=<span style="color:#000088">function</span><span style="color:#4f4f4f">(id)</span> {
        <span style="color:#000088">return</span> document.getElementById(id);
    };

    <span style="color:#880000">//添加坐标显示</span>
    AddMap.prototype.addMaker=<span style="color:#000088">function</span><span style="color:#4f4f4f">(location)</span>{
        <span style="color:#000088">var</span> mk = <span style="color:#000088">new</span> BMap.Marker(location);
        mk.enableDragging();        <span style="color:#880000">//marker可拖拽</span>
        mk.enableMassClear();
        <span style="color:#000088">this</span>.m.addOverlay(mk); <span style="color:#880000">//在地图中添加marker</span>

        <span style="color:#000088">this</span>.makerPoint=<span style="color:#000088">function</span><span style="color:#4f4f4f">()</span>{
            <span style="color:#000088">return</span> mk.getPosition(); <span style="color:#880000">//返回当前坐标</span>
        };

    };

    <span style="color:#880000">//搜索</span>
    AddMap.prototype.search=<span style="color:#000088">function</span><span style="color:#4f4f4f">()</span>{
        <span style="color:#000088">var</span> _this=<span style="color:#000088">this</span>;
        <span style="color:#000088">var</span> ac = <span style="color:#000088">new</span> BMap.Autocomplete(    <span style="color:#880000">//建立一个自动完成的对象</span>
                {
                    <span style="color:#009900">"input"</span> : <span style="color:#009900">"suggestId"</span>,
                    <span style="color:#009900">"location"</span> : _this.m
                }
        );
        ac.addEventListener(<span style="color:#009900">"onconfirm"</span>, <span style="color:#000088">function</span><span style="color:#4f4f4f">(e)</span> {    <span style="color:#880000">//鼠标点击下拉列表后的事件</span>
            <span style="color:#000088">var</span> _value = e.item.value;
            myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            _this.elById(<span style="color:#009900">"searchResultPanel"</span>).innerHTML =<span style="color:#009900">"onconfirm<br />index = "</span> + e.item.index + <span style="color:#009900">"<br />myValue = "</span> + myValue;
            _this.setPlace(_this.m);
        });
    };

    <span style="color:#880000">//定位到具体位置</span>
    AddMap.prototype.setPlace=<span style="color:#000088">function</span><span style="color:#4f4f4f">(m)</span>{
        <span style="color:#000088">var</span> _this=<span style="color:#000088">this</span>;
        m.clearOverlays();    <span style="color:#880000">//清除地图上所有覆盖物</span>
        <span style="color:#000088">function</span> <span style="color:#009900">myFun</span><span style="color:#4f4f4f">()</span>{
            <span style="color:#000088">var</span> pp = local.getResults().getPoi(<span style="color:#006666">0</span>).point;    <span style="color:#880000">//获取第一个智能搜索的结果</span>
            m.centerAndZoom(pp, <span style="color:#006666">15</span>);  <span style="color:#880000">//设置地图显示中间点、地图显示级别</span>
            _this.addMaker(pp);
        }
        <span style="color:#000088">var</span> local = <span style="color:#000088">new</span> BMap.LocalSearch(m, { <span style="color:#880000">//智能搜索</span>
            onSearchComplete: myFun
        });
        local.search(myValue);
    };

    <span style="color:#000088">var</span> mapInclude=<span style="color:#000088">new</span> AddMap();

    <span style="color:#880000">//初始化地图</span>
    <span style="color:#880000">//需传入容器DOM（id），可传坐标点定位</span>
    mapInclude.init(<span style="color:#009900">"map_show"</span>,{lng:<span style="color:#006666">104.072247</span>,lat:<span style="color:#006666">30.663436</span>});

<span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span></code></span>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101

我这里是针对移动端大小进行的布局，只需要稍微修改一下布局就可以在PC端使用。

页面初始化： 

搜索： 

点击右上角确定选取的坐标点：

以上代码复制粘贴下来即可运行

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度地图api调用</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=iBM9rbzTH2dMZW7MbYMYmFgb"></script>
    <style>
        body,html,div,header{
            margin:0;
            padding:0;}
        #icon_header {
            width: 100%;
            height: 45px;
            line-height: 45px;
            position: relative;
            z-index: 5;
            zoom: 1;
            vertical-align: middle;
            background: #fff;
            margin: auto;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        #icon_header > a {
            position: absolute;
            z-index: 5;
            zoom: 1;
            top: 0;
            width: 90px;
            height: 45px;
            vertical-align: middle;
            text-align: center;
            color: #666;
            font-size: 1rem;
            text-decoration: none;
        }
        #confirm_location{right: 0;}
        #icon_header div{text-align: center;}
        #r-result {
            width: 90%;
            background: white;
            position: absolute;
            top: 10%;
            left: 5%;
            height: 40px;
            line-height: 40px;
            border-radius: 4px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        }
        #r-result input {
            border: none;
            background: none;
            outline: none;
            padding-left: 2%;
            width: 96%; }
    </style>

</head>

<body>

    <header id="icon_header">
        <div>
            选择地址
        </div>
        <a href="javascript:;" id="confirm_location">红点位置</a>
    </header>


    <div id="map_show"></div>
    <div id="r-result">
        <input type="text" id="suggestId" placeholder="请输入要搜索的地点"/>
    </div>
    <div id="searchResultPanel" style="display:none;"></div>

</body>






<script>
    function AddMap(){
        //设置地图容器高度
        var screenH=window.innerHeight;
        var headerH=this.elById("icon_header").offsetHeight;
        this.elById("map_show").style.height=screenH-headerH+"px";
    }

    /**
     * @param el 地图初始化容器
     * @param p  初始化坐标点
     */
    AddMap.prototype.init=function(el,p){
        var point={
            lng:116.404113,
            lat:39.914965
            // lng:113.3208,
            // lat:23.1287
            // lat: 23.132423
            // lng: 113.333046


        };
        if(p && p.lng && p.lat){
            point.lng=p.lng;
            point.lat=p.lat;
        }
        this.m = new BMap.Map(el);      //实例化地图
        this.p = new BMap.Point(point.lng,point.lat);

        this.m.setCurrentCity("广州");   //设置中心城市
        this.m.enableContinuousZoom();    //启用地图惯性拖拽
        this.m.enableScrollWheelZoom();   //启用滚轮放大缩小
        this.m.centerAndZoom(this.p, 12);  //设置地图显示中间点、地图显示级别

        this.addMaker(this.p);

        this.search();               //搜索
        this.getLocation();
    };

    //获取坐标点位置
    AddMap.prototype.getLocation=function(){
        var _this=this;
        var confirm=this.elById("confirm_location");
        confirm.addEventListener("click",function(){
            var makerPoint=_this.makerPoint();
            console.log(makerPoint)
        });
    };

    AddMap.prototype.elById=function(id) {
        return document.getElementById(id);
    };

    //添加坐标显示
    AddMap.prototype.addMaker=function(location){
        var mk = new BMap.Marker(location);
        mk.enableDragging();        //marker可拖拽
        mk.enableMassClear();
        this.m.addOverlay(mk); //在地图中添加marker

        this.makerPoint=function(){
            return mk.getPosition(); //返回当前坐标
        };

    };

    //搜索
    AddMap.prototype.search=function(){
        var _this=this;
        var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
            {
                "input" : "suggestId",
                "location" : _this.m
            }
        );
        ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            _this.elById("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
            _this.setPlace(_this.m);
        });
    };

    //定位到具体位置
    AddMap.prototype.setPlace=function(m){
        var _this=this;
        m.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            m.centerAndZoom(pp, 15);  //设置地图显示中间点、地图显示级别
            _this.addMaker(pp);
        }
        var local = new BMap.LocalSearch(m, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    };

    var mapInclude=new AddMap();

    //初始化地图
    //需传入容器DOM（id），可传坐标点定位
    mapInclude.init("map_show",{lng:113.333046,lat:23.132423});

    // lat: 23.132423
    // lng: 113.333046


</script>

</html>