首页 > 图灵资讯 > 技术篇>正文
百度地图开发示例：位置标注，标注点弹框
2023-05-12 10:16:36
一、申请百度地图开发者AK
1.登录百度开放平台
地址：http://lbsyun.baidu.com/，使用百度账号登录成功后，点击控制台
2.点击查看应用程序并创建应用程序
3.填写信息，申请百度ak
4.申请成功后，在应用列表中查看ak码
二、使用ak码调用api
<!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="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script> <!-- 密钥： 在百度地图开发者中心获取 --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <title>地图展示</title></head><body> <p id="allmap"></p></body></html><script type="text/javascript"> var baidumap = function () { var map; function init() { // 百度地图API功能 map = new BMap.Map("allmap", { minZoom: 4, maxZoom: 15 }); // 创建Map实例，设置地图允许的最小/大级别(可选参数) map.centerAndZoom(new BMap.Point(116.404, 39.915), 6); // 初始化地图，设置中心点坐标和地图级别(数字越大，位置显示越准确) ///添加地图类型控制器 map.addControl(new BMap.MapTypeControl({ mapTypes: [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ] })); map.setCurrentCity(西安); // 设置地图显示的城市 必须设置这个项目 map.enableScrollWheelZoom(true); ///打开鼠标滚轮缩放 //标记地图位置 function addMarker(point) { var marker = new BMap.Marker(point); map.addOverlay(marker); } var mapData = GetMapData(); //获取位置数据 for (i = 0; i < mapData.length; i++) { var dataIndex = mapData[i]; var point = new BMap.Point(dataIndex.Point.longitude, dataIndex.Point.Latitude); var marker = new BMap.Marker(point); map.addOverlay(marker); addClickHandler(dataIndex, marker); } } function addClickHandler(dataIndex, marker) { marker.addEventListener("mouseover", function (e) { openInfo(dataIndex, e) }); marker.addEventListener("mousemove", function (e) { $('.BMap_pop>img').trigger('click'); // map.closeInfoWindow(infoWindow,point); ///打开信息窗口 } ); } function openInfo(dataIndex, e) { var p = e.target; var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); var infoWindow = new BMap.InfoWindow(dataIndex.message, { width: 200, // 信息窗口宽度 height: 100, // 信息窗口的高度 title: dataIndex.title, // 信息窗口标题 enableMessage: true,///设置允许信息窗发送短信息的设置 message: dataIndex.message }); // 创建信息窗口对象 map.openInfoWindow(infoWindow, point); ///打开信息窗口 } function GetMapData() { var mapData = [ { "key": "1", "name": “北京市中心”， "Point": { "longitude": 116.41667, "Latitude": 39.91667 }, "title": “北京市中心”， "message": “亲耐滴，欢迎来到北京市中心哦~” }, { "key": "2", "name": “上海市区”， "Point": { "longitude": 121.43333, "Latitude": 34.50000 }, "title": “上海市区”， "message": “亲耐滴，欢迎来到上海市区哦~” }, { "key": "3", "name": “天津市区”， "Point": { "longitude": 117.20000, "Latitude": 39.13333 }, "title": “天津市区”， "message": “亲耐滴，欢迎来到天津市区哦~” }, ] return mapData; } return { Init: init }; }(); $(function () { baidumap.Init(); });</script>