百度地图开发简单案例(源代码)

关注

转载最新推荐文章于 2026-03-05 04:45:03 发布 1.7k 阅读 AI 写同款· GEO 优化 ›

百度地图开发入门（1）：案例将我之前的百度地图入门的一些博文分享一下，这里主要系统讲解地图可视化的开发方式具体可以参考这里：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey最后当你的应用创建好了，就会得到一个服务密钥然后这里是百度地图的API：https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html第一步是需要显示出地图，这里我们使用html原生方式来讲解以阅读详情

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<style type="text/css">
   html{height:100%}
 body{height:100%;margin:0px;padding:0px}
   #main{
  float:left;
    height:95%;
  width:100%;
   }
   #result{
    float:left;
    height: 95%;
    width: 0%;
   }
  </style>
<title>无标题文档</title>
</head>

<body>
   <div id="main"></div>
   <div id="result"></div>
    <script type="text/javascript">
     //创建地图实例
     var map=new BMap.Map("main");
     
     //创建点坐标
     var point=new BMap.Point(117.04847,36.66052);
     
     //初始化地图，设置中心点坐标和地图级别
     map.centerAndZoom(point, 15);
     
     //向地图添加控件
     map.addControl(new BMap.NavigationControl());  //地图平移缩放控件，默认左上角  
  map.addControl(new BMap.OverviewMapControl({isOpen: 1})); //缩略地图控件，默认右下角
     map.enableScrollWheelZoom(true);        //启用鼠标滚动缩放地图
     map.enableKeyboard();        //启用键盘上下左右键移动地图
     
     
  //创建标注 ,并将标注添加到地图中  
  var marker = new BMap.Marker(point);        
  map.addOverlay(marker);  
  
  //给标注添加事件
  marker.addEventListener("click", function(e){  
    map.openInfoWindow(infoWindow, e.point); //打开信息窗口
  }); 
  
  //启用标注拖拽功能,并及时获取标注最新位置
  marker.enableDragging();  
  marker.addEventListener("dragend", function(e){  
    alert("当前位置：" + e.point.lng + ", " + e.point.lat);  
  }) 
  
  //创建信息窗口对象  
  var opts = {  
   width : 100,     // 信息窗口宽度  
   height: 50,     // 信息窗口高度  
   title : "这里是山东师范大学北门"  //信息窗口标题  
  }  
  var infoWindow = new BMap.InfoWindow("", opts); 
    </script>
</body>
</html

收录于