javascript:使用百度地图所有地点获得坐标_js调用百度地图如何遍历所有的mark点-优快云博客

本文链接：https://blog.youkuaiyun.com/zyxwvutsrqponmlkjihg/article/details/9127275

这个博客展示了如何使用JavaScript和百度地图API来获取地图上任意地点的坐标。用户可以输入地址进行搜索，点击地图上的点或者拖动标记来获取经度和纬度。坐标值会显示在输入框中，方便复制和使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta charset="utf-8" />
    <title></title>
    <style>
      #preview{
      border: 1px solid #bfd2e1;
      width: 280px;
      height: 350px;
      font-family: Arial, Helvetica, sans-serif,"宋体";
      margin-left:10px;
      margin-bottom:10px;
      }
      #map_container{
      height: 300px;
      }
    </style>
    <script src="jquery.js"></script>
  </head>

  <body>
    <div id="preview">
      <div id="float_search_bar">
        <input type="text" id="keyword" />
        <button id="search_button">查找</button>
      </div>
      <div><span style="color:#00A3CE;">查询后点击地图,获得您的准确位置</span></div>
      <div id="map_container"></div>
    </div>
   <div>
	Lon:<input type="text" id="lon" /><br/>
        Lat:<input type="text" id="lat" />
</div>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
    <script type="text/javascript">
      function getUrlParas(){
      var hash = location.hash,
      para = {},
      tParas = hash.substr(1).split("&");
      for(var p in tParas){
      if(tParas.hasOwnProperty(p)){
      var obj = tParas[p].split("=");
      para[obj[0]] = obj[1];
      }
      }
      return para;
      }
      var para = getUrlParas(),
      center = para.address?decodeURIComponent(para.address) : "天津市",
      city = para.city?decodeURIComponent(para.city) : "天津市";

      document.getElementById("keyword").value = center;

      var marker_trick = false;
      var map = new BMap.Map("map_container");
      map.enableScrollWheelZoom();
      map.addControl(new BMap.NavigationControl());

      var marker = new BMap.Marker(new BMap.Point(117.241077, 39.082066), {
      enableMassClear: false,
      raiseOnDrag: true
      });
      marker.enableDragging(); // 标记可拖拽
      map.addOverlay(marker);

      map.addEventListener("click", function(e){
      if(!(e.overlay)){
      map.clearOverlays();
      marker.show();
      marker.setPosition(e.point);
      setResult(e.point.lng, e.point.lat);
      }
      });
      marker.addEventListener("dragend", function(e){
      setResult(e.point.lng, e.point.lat);
      });

      var local = new BMap.LocalSearch(map, {
      renderOptions:{map: map},
      pageCapacity: 1
      });
      local.setSearchCompleteCallback(function(results){	
      if(local.getStatus() !== BMAP_STATUS_SUCCESS){
      //alert("无结果");
      } else { //通过查询结果得到该地址的坐标值
	var pos = results.getPoi(0);
	var point = pos.point;
	setResult(point.lng, point.lat);
      marker.hide();
      }
      });
      local.setMarkersSetCallback(function(pois){
      for(var i=pois.length; i--; ){
      var marker = pois[i].marker;
      marker.addEventListener("click", function(e){
      marker_trick = true;
      var pos = this.getPosition();
      setResult(pos.lng, pos.lat);
      });
      }
      });

      window.onload = function(){
      local.search(center);
      document.getElementById("search_button").onclick = function(){
      local.search(document.getElementById("keyword").value);
	alert(local);
      };
      document.getElementById("keyword").onkeyup = function(e){
      var me = this;
      e = e || window.event;
      var keycode = e.keyCode;
      if(keycode === 13){
      local.search(document.getElementById("keyword").value);
      }
      };
      };
      function a(){
      document.getElementById("float_search_bar").style.display = "none";
      }

      /*
      * setResult : 定义得到标注经纬度后的操作
      * 请修改此函数以满足您的需求
      * lng: 标注的经度
      * lat: 标注的纬度
      */
      function setResult(lng, lat){
      $("#lon").val(lng);
      $("#lat").val(lat);
      }
    </script>
  </body>
</html>