百度地图api的浏览器端密钥和服务器端密钥啥区别

Posted 2023-04-18

首先打开百度地图，右上方找到“地图API”栏目　　点开之后是百度开放平台，往下拉一点点，看到“申请密匙”点击进去。这个时候需要登录各位的百度账号才能进去哦~　　　　进入之后会看到百度地图LBS开放平台。　　1.选择“创建应用”　　2.“应用名称”可以自己随意编辑，既然是百度地图，建议大家就写“地图”　　3.“IP白名单”处建议大家就填0.0.0.0/0，方便在不同的电脑上操作　　4.点击“提交” 参考技术A 皖6Mr13、寂寞是一种享受，会享受寂寞的人一定是有智慧的人，他知道什么时候该沉寂下来休憩自己的灵魂，一个寂寞的人他并一定能成功，但是一个成功的人他一定是耐得住寂寞的人。

web端百度地图api

百度地图js加载

页面引入：

修改申请的密钥：<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

下面的js跟css用于点击创建的地图标注弹窗信息框
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />

 

// 百度地图   经度 纬度 地址信息
        function showMap(Longitude, Latitude,address) {
            setTimeout(function () {//添加延时加载。解决问题地图缩放
                var map = new BMap.Map("maps");
                var myCity = new BMap.LocalCity();
                myCity.get(function (res) {
                    map.centerAndZoom(res.center, res.level);
                });
                //根据经纬度添加地图标签
                if(Longitude!=""&&Longitude!=null&&Latitude!=null&&Latitude!=""){
                      var new_point = new BMap.Point(Longitude,Latitude);
                      var marker = new BMap.Marker(new_point);  // 创建标注
                      map.addOverlay(marker);    
                      map.centerAndZoom(new_point, 15);
                  //添加点击标注弹窗
                      var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, address, {
                          title: "地址信息", //标题
                          width: 290, //宽度
                          height: 40, //高度
                          panel : "panel", //检索结果面板
                          enableAutoPan : true, //自动平移
                          searchTypes :[
                          ]
                      });
                      marker.addEventListener("click", function(){          
                          searchInfoWindow3.open(marker);
                      });
                }
                map.enableScrollWheelZoom(true);
            }, 300);
        }