开发者百度地图的使用，做一个小demo，ak秘钥，

最新推荐文章于 2024-06-02 15:12:08 发布

有两把刷子

最新推荐文章于 2024-06-02 15:12:08 发布

阅读量3.8k

点赞数 1

分类专栏：小案例、小demo 文章标签：百度

本文链接：https://blog.csdn.net/qq_54753561/article/details/121146685

版权

小案例、小demo 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、先注册百度账号网址：百度地图开放平台 | 百度地图API SDK | 地图开发

2、进入要认证的准备身份证正反面的照片，认证的时候随便填一下

3、要创建ak 也就是访问百度地图的秘钥，域名不要瞎写，就是你常常访问的域名。

ak就是访问网址的秘钥

注册ak

4、在vscode中打开

5、我写的小demo，如果网址的key不能用了，自己弄一下

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html,
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=GG3wB6XEFH2flrH1eQVmGeE1soxjRGdl"></script>
<!-- 秘钥不能用自己ak 上面有教怎么弄-->
    <title>地图展示</title>
</head>
<style>
    .box {
        width: 500px;
        height: 500px;
    }

    #allmap {
        width: 1000px;
        height: 500px;
        margin: auto;
        border: 1px solid rgb(124, 124, 124);
        margin-top: 30px;
        border-radius: 10px;
    }

    header {
        width: 1000px;
        margin: auto;

    }

    input {
        width: 300px;
        height: 20px;
        border-radius: 5px;
        margin-top: 2px;
    }
</style>

<body>
    <header>
        <input placeholder="请输入地址" class="input" type="text" name="" id="">
        <div>
            省：<select class="sheng">
                <option>
                    -请选择-
                </option>
            </select>
            市：<select class="shi">
                <option>
                    -请选择-
                </option>
            </select>
            区：<select class="qu">
                <option>
                    -请选择-
                </option>
            </select>
        </div>
    </header>


    <b class="box">
        <div id="allmap"></div>
    </b>
</body>

</html>
<script type="text/javascript">
    var city = [
        {
            "id": 10001,
            "name": "河南省",
            "child": [
                {
                    "id": 100011,
                    "name": "鹤壁市",
                    "child": [
                        {
                            "id": 100011,
                            "name": "浚县"
                        },
                        {
                            "id": 100011,
                            "name": "未央区"
                        }
                    ]
                },
                {
                    "id": 100012,
                    "name": "宝鸡市",
                    "child": [
                        {
                            "id": 100011,
                            "name": "高新区"
                        },
                        {
                            "id": 100011,
                            "name": "成仓区"
                        }
                    ]
                }
            ]
        },
        {
            "id": 10002,
            "name": "甘肃省",
            "child": [
                {
                    "id": 100021,
                    "name": "兰州市",
                    "child": [
                        {
                            "id": 100021,
                            "name": "兰州区1"
                        },
                        {
                            "id": 100021,
                            "name": "兰州区2"
                        }
                    ]
                },
                {
                    "id": 100022,
                    "name": "酒泉市",
                    "child": [
                        {
                            "id": 100021,
                            "name": "酒泉区1"
                        },
                        {
                            "id": 100021,
                            "name": "酒泉区2"
                        }
                    ]
                }
            ]
        }
    ]
    var sheng = document.getElementsByClassName("sheng")[0];
    var shi = document.getElementsByClassName("shi")[0];
    var qu = document.getElementsByClassName("qu")[0];
    var input = document.querySelector('.input')
    var obj = ''
    var nowShengIndex = 0;
    for (var i = 0; i < city.length; i++) {
        var optEle = new Option(city[i].name, i);
        console.log(optEle.innerHTML);
        sheng.appendChild(optEle)
    }
    sheng.onchange = function (e) {
        shi.options.length = 1;
        qu.options.length = 1;
        //this.value可取到当前所选值对应的索引
        for (var i = 0; i < city[this.value].child.length; i++) {
            var optEle = new Option(city[this.value].child[i].name, i);
            shi.appendChild(optEle)
        }
        nowShengIndex = this.value;
        console.log(city[this.value].name);
        obj += city[this.value].name
        fn(obj)
    };
    shi.onchange = function () {
        qu.options.length = 1;
        console.log(qu);
        for (var i = 0; i < city[nowShengIndex].child[this.value].child.length; i++) {
            var optEle = new Option(city[nowShengIndex].child[this.value].child[i].name, i);
            qu.appendChild(optEle)
        }
        console.log(city[nowShengIndex].child[this.value].name);
        obj += city[nowShengIndex].child[this.value].name
        fn(obj)
    }
    qu.onchange = function (e) {
        obj += city[nowShengIndex].child[this.value].child[this.value].name
        console.log(obj);
        fn(obj)
    }
    //创建地图实例
    var map = new BMap.Map('allmap')
    // 设置坐标
    var point = new BMap.Point(113.404, 40.915)
    // 地图初始化
    map.centerAndZoom(point, 15)
    // 设置地图显示的城市 此项是必须设置的

    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    //  添加控件
    map.addControl(new BMap.NavigationControl())
    // 缩略地图
    map.addControl(new BMap.OverviewMapControl())
    // 比例尺
    map.addControl(new BMap.ScaleControl())
    // 地图类型
    map.addControl(new BMap.MapTypeControl())


    var marker = new BMap.Marker(point);        // 创建标注    
    map.addOverlay(marker);
    // 换图标
    // var myIcon = new BMap.Icon("https://ts1.cn.mm.bing.net/th/id/R-C.f7056aecd681a336d5f39cf5abfd4d3c?rik=PLwb%2b1g7%2f00Klw&riu=http%3a%2f%2fimg2.3png.com%2ff7056aecd681a336d5f39cf5abfd4d3cc18b.png&ehk=ncflJ%2btK2iIKlkaz%2beKqKVq4e9Nf0%2f8AOVc7gbAqXl4%3d&risl=&pid=ImgRaw&r=0", new BMap.Size(23, 25)),   //Size是尺寸                // 将标注添加到地图中 
    //  marker = new BMap.Marker(point, { icon: myIcon });
    // map.addOverlay(marker);
    // 监听事件
    marker.addEventListener("click", function () {
        var opts = {
            width: 250,     // 信息窗口宽度    
            height: 100,     // 信息窗口高度    
            title: "Hello"  // 信息窗口标题   
        }
        let li = '<li>dawdadwa</li><li>dawdadwa</li>'
        // li 可以放入结构可以设置样式
        var infoWindow = new BMap.InfoWindow(li, opts);  // 创建信息窗口对象    
        // map.getCenter() 地图的正中心打开弹框
        // map.openInfoWindow(infoWindow, map.getCenter());  
        // 第2个是弹框位置 第一个是 窗口信息  
        map.openInfoWindow(infoWindow, point);  // 打开信息窗口
        // 将地址解析结果显示在地图上，并调整地图视野

    });

    input.oninput = function (e) {
        fn(e.target.value)
    }


    function fn(es) {
        input.value = es
        console.log(es);
        var myGeo = new BMap.Geocoder();
        myGeo.getPoint(es, function (point) {
            if (point) {
                map.centerAndZoom(point, 16);
                map.addOverlay(new BMap.Marker(point))
            }
        }, es)
    }

</script>

有两把刷子

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
开发者百度地图的使用，做一个小demo，ak秘钥，

1、先注册百度账号网址：百度地图开放平台 | 百度地图API SDK | 地图开发2、进入要认证的准备身份证正反面的照片，认证的时候随便填一下3、要创建ak 也就是访问百度地图的秘钥，域名不要瞎写，就是你常常访问的域名。ak就是访问网址的秘钥注册ak4、在vscode中打开5、我写的小demo，如果网址的key不能用了，自己弄一下<!DOCTYPE html><html><head> <...
复制链接

扫一扫