HTML引用百度地图API

最新推荐文章于 2024-06-07 15:59:46 发布

csdn_weizhuang

最新推荐文章于 2024-06-07 15:59:46 发布

阅读量1.5k

点赞数

分类专栏：百度地图文章标签： javascript html 百度 css java

本文链接：https://blog.csdn.net/weixin_45711444/article/details/106624437

版权

百度地图专栏收录该内容

4 篇文章 0 订阅

订阅专栏

百度地图之HTML

参考API网址

-- Web开发 JavaScript API
http://lbsyun.baidu.com/index.php?title=jspopularGL

/*
* 	使用本页面,请先申请AK,完善基础src信息
*	主JAVA后台开发,前端语法问题请自行优化^_^,留言提示
*	个人建议,新手先看开发指南,配好环境,然后去示例demo直接找相似功能拿代码,调试过程去看参考类
*/

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度地图之HTML引用</title>
    <script src="../js/jquery.min.js"></script>
    <!--基础-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=&s=1"></script>
    <!-- 聚合js -->
    <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>
</head>
<body>
<div id="bMap" class="mapClass">
</div>
<!-- 地图 -->
<script>
    $(function () {
        // 读取地图主题json文件
        readMapStyle();
    });
    function readMapStyle(){
        $.ajax({
            url: 'js/bdInitStyle.json',// styleJson路径
            dataType: 'JSON',
            //async: false,//请求是否异步，默认为异步
            type: 'GET',
            success: function (list) {
                var styleJson = list;
                // 请求地图打点数据
                initBMap(styleJson);
            },
            error: function () {
                console.log("读取地图样式json文件失败!");
                initBMap();
            }
        });
    }
    function initBMap(styleJson){
        createMap(styleJson) ; //创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        // 请求自己业务数据函数
        // ...
    }
    function createMap(styleJson){
        // 百度地图API功能
        var map = new BMap.Map("bMap",
            {
                minZoom:5,// 最小显示级别
                enableMapClick:false// 构造底图时，关闭底图可点功能
            });//在百度地图容器中创建一个地图
        var point = new BMap.Point(105.994848, 36.354387);//定义一个中心点坐标
        map.centerAndZoom(point,5);//设定地图的中心点和坐标并将地图显示在地图容器中
        if(styleJson){
            map.setMapStyleV2({styleJson:styleJson});// 主题替换
        }
        window.map = map;//将map变量存储在全局
        // 监听停止拖拽地图时可视区域四角
        map.addEventListener('dragend', function(e) {

        });
        // 监听地图加载完毕
        map.addEventListener("tilesloaded",function(){
            console.log("地图加载完毕");
        });

        // 监听层级
        map.addEventListener('zoomend', function(e) {
        });
    }
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
        map.enableInertialDragging();
        map.enableContinuousZoom();
    }
    function addMapControl(){
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(ctrl_nav); // 添加控件
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
        map.addControl(ctrl_sca);
        // 城市列表控件
        var size = new BMap.Size(10, 20);
        var ctrl_cti =  new BMap.CityListControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            offset: size,
            // 切换城市之前事件
            // onChangeBefore: function(){
            //    alert('before');
            // },
            // 切换城市之后事件
            // onChangeAfter:function(){
            //   alert('after');
            // }
        });
        map.addControl(ctrl_cti);
    }
</script>
<style>
    .mapClass{
        height:750px;
        width:77%;
        float:left;
    }
</style>
</body>
</html>

csdn_weizhuang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML引用百度地图API

百度地图之HTML参考API网址-- Web开发 JavaScript APIhttp://lbsyun.baidu.com/index.php?title=jspopularGL/** 主JAVA后台开发,前端语法问题请自行优化^_^,留言提示* 个人建议,新手先看开发指南,配好环境,然后去示例demo直接找相似功能拿代码,调试过程去看参考类*/HTML<!DOCTYPE html><html lang="en"><head> <
复制链接

扫一扫

专栏目录