百度API小例子

最新推荐文章于 2021-11-13 18:02:45 发布
m0_48845795
最新推荐文章于 2021-11-13 18:02:45 发布
阅读量143
点赞数 1
文章标签： javascript 定位
本文链接：https://blog.csdn.net/m0_48845795/article/details/117869495
版权
百度API小例子

代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度API-01</title>
    <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=GC8rtlfBdrPVrfkwRwYlpDSHUraVPqXK"></script> -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=GC8rtlfBdrPVrfkwRwYlpDSHUraVPqXK"></script>
    <style>
        *{
            margin: 0;padding: 0;
        }
        html,body{
            width: 100%;height: 100%;
        }
        article{
            height: 95%;
            width: 65%;
            color: rgba(214, 255, 152, );
            font-size: 3em;
            /* border: 1px solid black; */
            background-color: #efeeee;
            box-shadow: 2px 2px 2px rgba(2, 2, 2, .2),-2px -2px 20px rgba(255, 255, 255, 1);

        }
        body,article{
/* 让弹性盒的元素以相反的顺序显示，且在必要的时候进行拆行：
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
flex-direction 属性规定灵活项目的方向。
flex-wrap 属性规定灵活项目是否拆行或拆列。
注意：如果元素不是弹性盒对象的元素，则 flex-flow 属性不起作用。 */

            display: flex;

 /* flex-direction: row;
默认值。灵活的项目将水平显示，在一行
flex-direction: row-reverse;
与 row 相同，但是以相反的顺序显示。
flex-direction: column;
灵活的项目将垂直显示，在一列
flex-direction: column-reverse;
与column 相同，但是顺序相反。
flex-direction: inherit;
从父元素继承该属性。 */
            flex-direction: column;

/* 语法：justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
提示：使用 align-content 属性对齐交叉轴上的各项（垂直）。
flex-start	默认值。项目位于容器的开头。	
flex-end	项目位于容器的结尾。	
center	项目位于容器的中心。	
space-between	项目位于各行之间留有空白的容器内。	
space-around	项目位于各行之前、之间、之后都留有空白的容器内。 */
            justify-content: space-evenly;

            /* 居中对齐弹性盒的各项元素： */
            align-items: center;
        }
        .getInfo{
            width: 60%;height: 60%;
            border: 3px dashed;
        }
    </style>
</head>
<body>
    <!-- <article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。 -->
    <article>
        <h1>
            百度地图API
        </h1>
        <div class="getInfo" id="getInfo"></div>
    </article>
</body>
<script>
//     let  声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问
// 使用var关键字声明的全局作用域变量属于window对象。
// 使用let关键字声明的全局作用域变量不属于window对象。
// 使用var关键字声明的变量在任何地方都可以修改。
// 在相同的作用域或块级作用域中，不能使用let关键字来重置var关键字声明的变量。
// 在相同的作用域或块级作用域中，不能使用let关键字来重置let关键字声明的变量。
// let关键字在不同作用域，或不用块级作用域中是可以重新声明赋值的。
// 在相同的作用域或块级作用域中，不能使用const关键字来重置var和let关键字声明的变量。
// 在相同的作用域或块级作用域中，不能使用const关键字来重置const关键字声明的变量
// const 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的:
// var关键字定义的变量可以先使用后声明。
// let关键字定义的变量需要先声明再使用。
// const关键字定义的常量，声明时必须进行初始化，且初始化后不可再修改
// const 定义的变量并非不可改变，比如使用const声明对象，可以改变对象值。
// 那么什么情况能彻底“锁死”变量呢？
// 可以使用Object.freeze()方法来 冻结变量 ，如：
// const obj = {
//   name:"1024kb"
// }
// Object.freeze(obj)
// // 此时对象obj被冻结，返回被冻结的对象
// 需要注意的是，被冻结后的对象不仅仅是不能修改值，同时也
// 不能向这个对象添加新的属性
// 不能修改其已有属性的值
// 不能删除已有属性
// 不能修改该对象已有属性的可枚举性、可配置性、可写性
// 建议判断清除情况再进行使用
    let getInfo = document.getElementById('getInfo');
    var map;
    if(navigator.geolocation){
       //alert('您的浏览器支持定位!!!');
       navigator.geolocation.getCurrentPosition(myGPSFun);
    }
    else alert('您的浏览器不支持定位!!!');
    function myGPSFun(e){

// coords 属性规定区域的 x 和 y 坐标。
// coords 属性与 shape 属性配合使用，来规定区域的尺寸、形状和位置。
// shape 属性指定了区域的形状。
// 语法
// <area shape="default|rect|circle|poly">
// default	规定全部区域。
// rect	定义矩形区域。
// circle	定义圆形。
// poly	定义多边形区域。

// <area> 标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。
// <area> 元素始终嵌套在 <map> 标签内部。
// 属性：
// coords	coordinates	规定区域的坐标。
// shape	default rect circle poly	规定区域的形状。
// 详细属性见w3school
        let jd = e.coords.longitude;//经度
        let wd = e.coords.latitude;//纬度
        map = new BMap.Map("getInfo");//创建百度地图实例
        let point = new BMap.Point(113.376884,30.266715999999995);   //存储经度和纬度

        let convertor = new BMap.Convertor() //坐标转换对象
// convertor方法：translate(points: Array<BMap.Point>, from: number, to: number, callback: function)
// 描述：对指定的点数组进行坐标转换，转换规则为从from到to，转换完成后调用callback，callback的参数为Object 。一次最多10个点。
       
        let pointArr = [];
        pointArr.push(point)
        convertor.translate(pointArr,1,5,translateCalback);//把google地图坐标，转换为百度地图坐标
        }
        function translateCalback(e){
            if(e.status == 0){ //判断转换的坐标是否为空
                let marker =new BMap.Marker(e.points[0]);
                map.centerAndZoom(e.points[0],15); //初始化地图，设置中心坐标和地图级别
                map.addOverlay(marker); //添加地图
                map.enableScrollWheelZoom(); //开启鼠标滑轮缩放
            }
    }
</script>
</html>