记录一下百度地图API使用和记录点击地图获取经纬度方便存库1.百度地图API的使用2.点击获取经纬度

1.百度地图API的使用

<script
  type="text/javascript"
  src="https://api.map.baidu.com/api?v=2.0&ak=Zf25qY5U7o5Th4O4bCH4NzXtzO7CnjP7"
></script>
<script type="text/javascript">
  //百度地图API功能
  var map = new BMap.Map('allmap')
  map.centerAndZoom(new BMap.Point(121.487232, 31.249695), 17) //根据坐标初始化地图
  // map.centerAndZoom('上海', 17) //根据坐标初始化地图
  map.enableScrollWheelZoom(true)
  map.addControl(new BMap.NavigationControl()) //平移缩放控件
  map.addControl(new BMap.ScaleControl()) //比例尺
  map.addControl(new BMap.OverviewMapControl()) //缩略地图
  map.addControl(new BMap.MapTypeControl()) //地图类型
  map.setCurrentCity('上海') // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
  //添加标注
  var marker = new BMap.Marker(new BMap.Point(121.487232, 31.249695)) // 创建标注
  // var marker = new BMap.Marker('上海') // 创建标注
  map.addOverlay(marker) // 将标注添加到地图中
  map.addTileLayer(new BMap.PanoramaCoverageLayer())

  var stCtrl = new BMap.PanoramaControl() //构造全景控件
  stCtrl.setOffset(new BMap.Size(20, 20))
  map.addControl(stCtrl) //添加全景控件
</script>

需要注意的是需要去百度地图API网站上面去申请属于自己使用的ak

2.点击获取经纬度

<body>
    <div id="allmap"></div>
    <input type="text" id="province-map" />
    <input type="text" id="city-map" />
    <input type="text" id="district-map" />
    <input type="text" id="room-address-map" />
    <input type="text" id="map-address" />
    <input type="text" id="longitude" />
    <input type="text" id="latitude" />
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=2.0&ak=Zf25qY5U7o5Th4O4bCH4NzXtzO7CnjP7"
    ></script>
<script>
  function initMap() {
    $('#allmap').empty()
    var map = new BMap.Map('allmap')
    //   map.centerAndZoom(new BMap.Point(120.378386, 30.309756), 15) //根据坐标初始化地图
    map.centerAndZoom('上海', 17) //根据坐标初始化地图
    map.enableScrollWheelZoom(true)
    map.addControl(new BMap.NavigationControl()) //平移缩放控件
    map.addControl(new BMap.ScaleControl()) //比例尺
    map.addControl(new BMap.OverviewMapControl()) //缩略地图
    map.addControl(new BMap.MapTypeControl()) //地图类型
    map.setCurrentCity('上海') // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
    //添加标注
    //   var marker = new BMap.Marker(new BMap.Point(120.378386, 30.309756)) // 创建标注
    var marker = new BMap.Marker('上海') // 创建标注
    map.addOverlay(marker) // 将标注添加到地图中
    map.addTileLayer(new BMap.PanoramaCoverageLayer())

    var stCtrl = new BMap.PanoramaControl() //构造全景控件
    stCtrl.setOffset(new BMap.Size(20, 20))
    map.addControl(stCtrl) //添加全景控件

    var geolocation = new BMap.Geolocation()
    geolocation.getCurrentPosition(
      function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          var mk = new BMap.Marker(r.point)
          map.addOverlay(mk)
          map.panTo(r.point)
        } else {
          alert('failed' + this.getStatus())
        }
      },
      { enableHighAccuracy: true }
    )
    map.addEventListener('click', function (e) {
      //获取当前点击 位置的经纬度，并显示在文本框中
      document.getElementById('latitude').value = e.point.lat
      document.getElementById('longitude').value = e.point.lng
      map.clearOverlays()
      var new_point = new BMap.Point(e.point.lng, e.point.lat)
      var new_mk = new BMap.Marker(new_point)
      map.addOverlay(new_mk)
      map.panTo(new_point)

      var gc = new BMap.Geocoder()
      gc.getLocation(new_point, function (rs) {
        //获取当前点击 位置的 省市县，街道号 和街道名称。并显示在 文本框中
        //街道号 和街道名称 不一定能获取到，有时候为空。
        var addComp = rs.addressComponents
        $('#province-map').val(addComp.province)
        $('#city-map').val(addComp.city)
        $('#district-map').val(addComp.district)
        $('#room-address-map').val(addComp.streetNumber)
        $('#map-address').val(addComp.street)
      })
    })
  }
  initMap()
</script>
</body>

点击地图上的点标记并且在文本框中显示出详细的地址还有对应的经纬度，方便后续存库或者其余的操作