百度地图api使用

785 阅读1分钟
  1. 添加缩放控件
  2. 标记点+信息展示
  3. 输出当前点击的坐标,并且转换为地址输出
  4. 目前存在的问题:点击某一个新地点之后,地图转移标记点不转移
<!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 {
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
      }
      #allmap {
        width: 100%;
        height: 90%;
        overflow: hidden;
      }
      p {
        margin-left: 5px;
        font-size: 14px;
      }
    </style>
    <script
      type="text/javascript"
      src="http://api.map.baidu.com/api?v=2.0&ak=密钥"
    ></script>
    <title></title>
  </head>
  <body>
    <div id="allmap"></div>
  </body>
</html>
<script type="text/javascript">
  // 百度地图API功能
  var map = new BMap.Map("allmap");
  var point = new BMap.Point(116.417854, 39.921988);
  var marker = new BMap.Marker(point); // 创建标注
  map.addOverlay(marker); // 将标注添加到地图中
  map.centerAndZoom(point, 15);
  map.addControl(new BMap.NavigationControl());
  var opts = {
    width: 200, // 信息窗口宽度
    height: 100, // 信息窗口高度
    title: "海底捞王府井店", // 信息窗口标题
    enableMessage: true, //设置允许信息窗发送短息
  };
  var infoWindow = new BMap.InfoWindow(
    "地址:北京市东城区王府井大街88号乐天银泰百货八层",
    opts
  ); // 创建信息窗口对象
  marker.addEventListener("click", function () {
    map.openInfoWindow(infoWindow, point); //开启信息窗口
  });

  map.addEventListener("click", function (e) {
    console.log(e.point.lng + "," + e.point.lat); // 单击地图获取坐标点;
    // map.panTo(new BMap.Point(e.point.lng,e.point.lat));// map.panTo方法,把点击的点设置为地图中心点
     var geoc = new BMap.Geocoder(); 
      geoc.getLocation(point,function(rs){ 
          var addComp = rs.addressComponents; 
          // alert(addComp.province + ", " + addComp.city + "," + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber); 
          console.log(addComp);
      });
      var marker = new BMap.Marker(point);
      map.addOverlay(marker);
      document.getElementById("allmap").value = e.point.lng+ "," + e.point.lat;
  });

  // 创建城市选择控件
  // var cityControl = new BMap.CityListControl({
  //   // 控件的停靠位置(可选,默认左上角)
  //   anchor: BMAP_ANCHOR_TOP_RIGHT,
  //   // 控件基于停靠位置的偏移量(可选)
  //   offset: new BMap.Size(10, 5),
  // });
  // // 将控件添加到地图上
  // map.addControl(cityControl);
  map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  var scaleCtrl = new BMap.ScaleControl(); // 添加比例尺控件
  map.addControl(scaleCtrl);
  var zoomCtrl = new BMap.ZoomControl(); // 添加比例尺控件
  map.addControl(zoomCtrl);

</script>

Snipaste_2021-11-10_15-03-10.png