在html中应用百度地图流程及使用过程中的问题整理https域名无法访问-经纬度不准确

本文链接：https://blog.csdn.net/weixin_44369955/article/details/114586766

1.普通使用(http访问，不需要秘钥)

2.百度地图js api使用

问题

1.普通使用(http访问，不需要秘钥)

地址：http://api.map.baidu.com/lbsapi/creatmap/index.html

在上述地址中设置好后，可以获取地图代码

在自己的页面中写下(地址自行修改)：

就可以实现在html页面中展示百度地图。但是我使用过程中，发现https域名不能访问

http://api.map.baidu.com/api,于是在http://lbsyun.baidu.com/上注册了，百度账号登陆即可。

2.百度地图js api使用

登陆后，到控制台，创建应用，就可得到ak，或者到开发文档中查看帮助。

有时间，需要可以仔细看看。速成的话直接到demo中查看。

直接整个html代码(包括中心坐标，添加一个定位标记)，jquery地址自行修改：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>地图展示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style>
body, html, #container {
   overflow: hidden;
   width: 100%;
   height: 100%;
   margin: 0;
   font-family: "微软雅黑";
}

.info {
   z-index: 999;
   width: auto;
   min-width: 22rem;
   padding: .75rem 1.25rem;
   margin-left: 1.25rem;
   position: fixed;
   top: 1rem;
   background-color: #fff;
   border-radius: .25rem;
   font-size: 14px;
   color: #666;
   box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
</style>
<script src="../js/vendor/jquery-1.12.4.min.js"></script>
<script
   src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的ak"></script>
</head>
<body>
   <div id="container"></div>
   <script>
       var map = new BMapGL.Map('container'); // 创建Map实例
       map.centerAndZoom(new BMapGL.Point(116.49428, 40.01472), 18); // 初始化地图,设置中心点坐标和地图级别
       map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

       //设置中心点
       var lng = 116.49428;
   var lat = 40.01472;
   var point = new BMapGL.Point(lng, lat);
   map.setCenter(point); // 设置地图中心点

       //向地图中添加marker
      // 创建点标记
       var marker1 = new BMapGL.Marker(new BMapGL.Point(116.493916,40.015336));
       // 在地图上添加点标记
       map.addOverlay(marker1);

//隐藏百度标识logo：
       $("#container").find(".anchorBL").hide();
       setTimeout(function() {
           $("#container").find(".BMap_cpyCtrl").hide();
           $("#container").find(".BMap_scaleCtrl.BMap_noprint.anchorBL")
                   .css("inset", "auto auto 9px 18px");
       }, 200);
       setTimeout(function() {
           $("#container").find(".BMap_cpyCtrl").hide();
           $("#container").find(".BMap_scaleCtrl.BMap_noprint.anchorBL")
                   .css("inset", "auto auto 9px 18px");
       }, 1000);

</script>
</body>
</html>