百度地图离线开发の基于javascriptAPI | Monster

百度地图离线开发の基于javascriptAPI

前言
  • 因工作需求开发一个地图的离线版本,暂未涉及到复杂的业务,只需在页面上提供标注的监控即可,整合出了一个可行的版本,基于 百度地图开放平台,使用JavaScript API完成
  • 在线版本,基于最新版本 JavaScript API GL
  • 离线版本,摘自 小郭软件百度离线地图,基于版本 JavaScript API 3.0,语法基本一致

  • 地图标注marker的水波纹动画,摘自 水波纹动画

  • 离线地图的素材,使用 太乐地图破解版,试过几乎最近的所有版本,只有5.05版本可以被注册机破解,缺点是这个版本还不支持下载个性化的地图瓦片
在线版本开发
  • 参照文档,需要先申请开发者密钥,使用即可

  • 代码

    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
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
    html{height:100%}
    body{height:100%;margin:0px;padding:0px}
    #container{height:100%}
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=密钥"></script>
    </head>

    <body>
    <div id="container"></div>
    <script type="text/javascript">
    var map = new BMapGL.Map("container");
    // 创建地图实例
    var point = new BMapGL.Point(116.404, 39.915);

    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    // 创建点坐标
    map.centerAndZoom(point, 5);
    // 初始化地图,设置中心点坐标和地图级别

    // map.setHeading(64.5); //设置地图旋转角度
    // map.setTilt(73); //设置地图的倾斜角度
    // map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式

    // var opts = {offset: new BMapGL.Size(150, 25)} // 比例尺控件偏移
    map.addControl(new BMapGL.ScaleControl());
    var zoomCtrl = new BMapGL.ZoomControl(); // 添加比例尺控件
    map.addControl(zoomCtrl);

    //调用自定义样式
    map.setMapStyleV2({
    styleId:'样式Id' // 百度地图开发者平台中的自定义地图可以配置生成
    })



    // 创建小车图标
    var myIcon = new BMapGL.Icon("markers.png", new BMapGL.Size(52, 26));
    var marker = new BMapGL.Marker(point, {
    icon: myIcon
    }); // 创建标注

    // var marker = new BMapGL.Marker(point);
    map.addOverlay(marker);


    // 文本标注
    var content = "Beijing";
    var label = new BMapGL.Label(content, { // 创建文本标注
    position: point, // 设置标注的地理位置
    offset: new BMapGL.Size(-35, 10) // 设置标注的偏移量
    })
    map.addOverlay(label); // 将标注添加到地图中
    label.setStyle({ // 设置label的样式
    color: '#000',
    fontSize: '15px',
    border: '1px solid #1E90FF'
    })

    // 信息窗口
    var opts = {
    width: 100, // 信息窗口宽度
    height: 50, // 信息窗口高度
    title: "站点信息" // 信息窗口标题
    }
    var infoWindow = new BMapGL.InfoWindow("站点A", opts); // 创建信息窗口对象
    // map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口 默认不打开
    marker.addEventListener("click", function(){
    map.openInfoWindow(infoWindow, point); //开启信息窗口
    });




    // 第二个坐标

    // http://api.map.baidu.com/geoconv/v1/?coords=114.025973657,22.5460535462&from=1&to=5&ak=oaDm6OjeKFmSHWG5yfHaN3bIvKEETNgo
    var point2 = new BMapGL.Point(114.03752510736142,22.549245336042984)
    var marker2 = new BMapGL.Marker(point2, {
    icon: myIcon
    }); // 创建标注

    // var marker = new BMapGL.Marker(point);
    map.addOverlay(marker2);

    // 文本标注
    var content2 = "ShenZhen";
    var label2 = new BMapGL.Label(content2, { // 创建文本标注
    position: point2, // 设置标注的地理位置
    offset: new BMapGL.Size(-35, 10) // 设置标注的偏移量
    })
    map.addOverlay(label2); // 将标注添加到地图中
    label2.setStyle({ // 设置label的样式
    color: '#000',
    fontSize: '15px',
    border: '1px solid #1E90FF'
    })

    // 信息窗口
    var opts2 = {
    width: 100, // 信息窗口宽度
    height: 50, // 信息窗口高度
    title: "站点信息" // 信息窗口标题
    }
    var infoWindow2 = new BMapGL.InfoWindow("站点B", opts2); // 创建信息窗口对象
    // map.openInfoWindow(infoWindow2, map.getCenter()); // 打开信息窗口
    marker2.addEventListener("click", function(){
    map.openInfoWindow(infoWindow2, point2); //开启信息窗口
    });



    </script>
    </body>
    </html>
离线地图
  • 需要先下载离线加载的地图瓦片,然后将上文中偷来的包中的bmap-offine文件偷过来即可

  • 因为他是基于3.0开发,语法要做出相应改变,在自己的页面中先后引入map3.0_init.js、map3.0.js即可,其中tiles目录存放的是普通地图瓦片数据,tiles_satellite目录存放卫星地图瓦片,tiles_hybird存放混合地图,也可以自定义修改

  • 这里还引用了从另一位大佬博客偷来的js,对maker标注封装追加了波纹动画效果ani.js

    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
    function ComplexCustomOverlay(point , marker){

    this._point = point;
    this._marker = marker;
    }

    ComplexCustomOverlay.prototype = new BMap.Overlay();
    ComplexCustomOverlay.prototype.initialize = function(map){
    this._map = map;
    var div = this._div = document.createElement("div");
    div.style.position = "absolute";
    var arrow = this._arrow = document.createElement("div");

    arrow.style.position = "absolute";
    arrow.style.overflow = "hidden";
    div.appendChild(arrow);
    arrow.className="css_animation";

    if(this._marker ){
    map.addOverlay(this._marker );
    }

    map.getPanes().labelPane.appendChild(div);

    return div;
    }
    ComplexCustomOverlay.prototype.draw = function(){
    var map = this._map;
    var pixel = map.pointToOverlayPixel(this._point);
    this._div.style.left = pixel.x - 40 + "px";
    this._div.style.top = pixel.y - 40 + "px";


    }

    ComplexCustomOverlay.prototype.setPosition = function(point) {
    this._point = point ;
    this.draw();
    if(this._marker)
    this._marker.setPosition(this._point);

    }

    ComplexCustomOverlay.prototype.getPosition = function() {
    return this._point ;

    }
  • 代码

    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
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
    html{height:100%}
    body{height:100%;margin:0px;padding:0px}
    #container{
    width: 100%;
    height: 100%;
    }
    .css_animation{
    height:80px;
    width:80px;
    border-radius: 40px;
    background: rgba(250, 0, 0, 0.9);
    transform: scale(0);
    animation: myfirst 4s;
    animation-iteration-count: infinite;
    }
    @keyframes myfirst{
    to{
    transform: scale(0.6);
    background: rgba(0, 0, 0, 0);
    }
    }


    </style>
    <script type="text/javascript" src="/bmap-offline/map3.0_init.js"></script>
    <script type="text/javascript" src="/bmap-offline/map3.0.js"></script>
    <!-- echarts -->
    <script type="text/javascript" src="/js/ani.js"></script>
    </head>

    <body>
    <div id="c_test" class="css_animation" style="display:none;"> </div>

    <div id="container" ></div>

    <script type="text/javascript">


    function addMarker(_lon, _lat,_color,windows) {
    var point = new BMap.Point(_lon, _lat);

    var size = new BMap.Size(48, 48);

    var marker = new BMap.Marker(point, {
    icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
    scale: 1,
    rotation: 0,
    fillColor: _color,
    fillOpacity: 1,
    strokeColor: _color,
    strokeOpacity: 0.1,
    strokeWeight: 15
    })
    });
    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //弹跳效果(一直跳动)
    marker.addEventListener("click", function(){ //标注点的监听点击事件
    map.openInfoWindow(infoWindow, point); //开启信息窗口
    // TODO

    });

    var plex = new ComplexCustomOverlay(point, marker); // 创建标
    return plex;
    }



    // map
    var map = new BMap.Map("container",{mapType:BMAP_SATELLITE_MAP,minZoom:12,maxZoom:16}) // 显示滚轮缩放级别 12 - 16级 设置默认的使用卫星地图
    var point = new BMap.Point(116.404, 39.915);
    // 创建点坐标
    map.centerAndZoom(point, 13);
    // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    // 显示滚轮的缩放级别


    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());
    map.addControl(new BMap.OverviewMapControl());
    map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP]})); // 限制 只显示街道地图和卫星地图切换
    map.setCurrentCity("北京"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用


    //设置marker图标为水滴
    // var vectorMarker = new BMap.Marker(point, {
    // // 指定Marker的icon属性为Symbol
    // icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
    // scale: 1,//图标缩放大小
    // fillColor: "green",//填充颜色
    // fillOpacity: 0.8//填充透明度
    // })
    // });
    var vectorMarker = addMarker(116.404,39.915,'green',infoWindow)
    map.addOverlay(vectorMarker); // 将标注添加到地图中
    // vectorMarker.setAnimation(BMAP_ANIMATION_BOUNCE); //弹跳效果(一直跳动)
    // vectorMarker.setAnimation(BMAP_ANIMATION_DROP); //坠落效果(从顶部落下)

    // 文本标注
    var content = "站点A";
    var label = new BMap.Label(content, { // 创建文本标注
    position: point, // 设置标注的地理位置
    offset: new BMap.Size(-20, 10) // 设置标注的偏移量
    })
    map.addOverlay(label); // 将标注添加到地图中
    label.setStyle({ // 设置label的样式
    color: '#000',
    fontSize: '12px',
    border: '1px solid #1E90FF'
    })

    // 信息窗口
    var opts = {
    width: 100, // 信息窗口宽度
    height: 50, // 信息窗口高度
    title: "站点信息" // 信息窗口标题
    }
    var infoWindow = new BMap.InfoWindow("站点A", opts); // 创建信息窗口对象






    var point_other = new BMap.Point(116.32291700474868,40.00004783896013)
    //设置marker图标为水滴
    // var vectorMarker_other = new BMap.Marker(point_other, {
    // // 指定Marker的icon属性为Symbol
    // icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
    // scale: 1,//图标缩放大小
    // fillColor: "red",//填充颜色
    // fillOpacity: 0.8//填充透明度
    // })
    // });
    var vectorMarker_other = addMarker(116.32291700474868,40.00004783896013,'red',infoWindow2)
    map.addOverlay(vectorMarker_other); // 将标注添加到地图中
    var content2 = "站点B";
    var label2 = new BMap.Label(content2, { // 创建文本标注
    position: point_other, // 设置标注的地理位置
    offset: new BMap.Size(-20, 10) // 设置标注的偏移量
    })
    map.addOverlay(label2); // 将标注添加到地图中

    // 信息窗口
    var opts2 = {
    width: 100, // 信息窗口宽度
    height: 50, // 信息窗口高度
    title: "站点信息" // 信息窗口标题
    }
    var infoWindow2 = new BMap.InfoWindow("站点B", opts2); // 创建信息窗口对象


    </script>
    </body>
    </html>
-------------本文结束感谢您的阅读-------------
既然来了就打个赏吧= =
0%