百度BMap开发（基础知识）

最新推荐文章于 2024-08-04 11:38:24 发布

南猿北蛰

最新推荐文章于 2024-08-04 11:38:24 发布

阅读量9.1k

点赞数

分类专栏： bmap 文章标签：百度 function html div

本文链接：https://blog.csdn.net/w4bobo/article/details/8101388

版权

bmap 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<html xmlns=" http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>地图</title>
    <script src=" http://api.map.baidu.com/api?v=1.3" type="text/javascript"></script>
<script type="text/javascript">
  function initialize() {
   //1. 创建地图实例
   var map = new BMap.Map("map");// 创建地图实例
   var point = new BMap.Point(114.047453,22.547161); // 创建点坐标
   map.centerAndZoom(point, 15);
   //2.控件
   //NavigationControl：地图平移缩放控件，默认位于地图左上方，它包含控制地图的平移和缩放的功能。
   map.addControl(new BMap.NavigationControl());
   //ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系
   map.addControl(new BMap.ScaleControl());
            //OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
   map.addControl(new BMap.OverviewMapControl());
   //MapTypeControl：地图类型控件，默认位于地图右上方
   map.addControl(new BMap.MapTypeControl());
   map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
   map.enableScrollWheelZoom(); //启用滚轮缩放大小
   //3.创建标注
   var marker = new BMap.Marker(point);// 创建标注
   map.addOverlay(marker);
   marker.enableDragging(); //开启标注拖拽功能
   marker.addEventListener("dragend", function(e){
    alert("当前位置：" + e.point.lng + ", " + e.point.lat);
   })
   map.addOverlay(marker);
   marker.addEventListener("click", function(){
    alert("您点击了标注");
   });

   //反向地理编码
   // 创建地理编码实例
   var myGeo = new BMap.Geocoder();
   // 根据坐标得到地址描述
    myGeo.getLocation(point, function(result){
    if (result){
     alert(result.address);
    }
    });

  }
</script>
</head>
<body οnlοad="initialize()" style="margin:0;background:#e3e9f7; background-attachment:fixed;">
    <div id="map" style="width:100%; height:100%;"></div>
</body>
</html>