百度地图-使用坐标

最新推荐文章于 2023-05-15 13:52:12 发布

恐龍

最新推荐文章于 2023-05-15 13:52:12 发布

阅读量926

点赞数

分类专栏： html

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
</head>
<body>
<div id="allmap"></div>
<div id="point_x"></div>
<div id="point_y"></div>
<div id="point"></div>
</body>
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=2.0&ak=rAQA7oYioeeEyOs0tNjYd7uX"></script>
<script type="text/javascript">
var map = new BMap.Map("allmap");
var px=113.759419;
var py=23.011265;
var myGeo = new BMap.Geocoder();
map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
map.centerAndZoom(new BMap.Point(px, py), 15);
map.enableScrollWheelZoom();   //启用滚轮放大缩小
var marker1 = new BMap.Marker(new BMap.Point(px, py));  // 创建标注
marker1.enableDragging();      //可拖拽
// 将标注添加到地图中
marker1.addEventListener("click", showInfo);
marker1.addEventListener("dragend",showInfo);
function showInfo(e){
 //alert(e.point.lng + ", " + e.point.lat);
 $("#point_x").val(e.point.lng);
 $("#point_y").val(e.point.lat);
 var s=""+e.point.lng+","+e.point.lat+"";
 $("#point").val(s);
}

</script>
</html>

//有坐标的

<!DOCTYPE html>
<html lang="en">
<head>
<title>地图api</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=18E7F3FA5b3d576acdfafbee1f491217"></script>
</head>
<body>

<!--main-container-part-->
<div id="content">

  <div class="container-fluid">
  <hr>
  <div class="row-fluid">
    <div class="span8">
      <div class="widget-box">

        <div class="widget-content nopadding">

             <div class="control-group">
              <label class="control-label">地图标识 :</label>
              <div class="controls">
               <input type="text" class="span4" placeholder="输入地址查询 " name="mapsearch" id="mapsearch" value="东莞虎门高铁站"/><button type="button" class="btn btn-info" οnclick="GetAdd();">查询</button></br></br>
                <div id="allmap" style="width:600px;height:500px;"></div>
              </div>
             </div>
              <div class="control-group">
              <label class="control-label">坐标 :</label>
              <div class="controls">
                <input type="text" class="span6" placeholder="坐标 " name="point" id="point" readonly="true" value=""/>
              
              </div>
            </div>
        </div>
      </div>
      
      
    </div>
    
  </div>
  
</div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
  // This function is called from the pop-up menus to transfer to
  // a different page. Ignore if the value returned is a null string:
  function goPage (newURL) {

      // if url is empty, skip the menu dividers and reset the menu selection to default
      if (newURL != "") {
      
          // if url is "-", it is this page -- reset the menu:
          if (newURL == "-" ) {
              resetMenu();            
          } 
          // else, send page to designated URL            
          else {  
            document.location.href = newURL;
          }
      }
  }

// resets the menu selection upon entry to this page:
function resetMenu() {
   document.gomenu.selector.selectedIndex = 2;
}

function shownotice(t,obj){
	$('#notice-title').text(t);
	$('#notice-info').html($(obj).parent().next().html());
	$('#noticebox').modal({backdrop:false,show:true});
}
  
</script>

<script>
var map = new BMap.Map("allmap");
var px=116.403909;
var py=39.915156;
var myGeo = new BMap.Geocoder();
map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
map.centerAndZoom(new BMap.Point(px, py), 15);
var marker1 = new BMap.Marker(new BMap.Point(px, py));  // 创建标注
marker1.enableDragging();    //可拖拽
// 将标注添加到地图中
marker1.addEventListener("click", showInfo);
marker1.addEventListener("dragend",showInfo);
function showInfo(e){
 //alert(e.point.lng + ", " + e.point.lat);
 $("#point_x").val(e.point.lng);
 $("#point_y").val(e.point.lat);
 var s=""+e.point.lng+","+e.point.lat+"";
 $("#point").val(s);
}
map.addOverlay(marker1);   
map.addEventListener("click", function(e){
	  	marker1.setPosition(e.point);
	    $("#point_x").val(e.point.lng);
	    $("#point_y").val(e.point.lat);
	    var s=""+e.point.lng+","+e.point.lat+"";
	    $("#point").val(s);
});
function GetAdd(){
	add=$('#mapsearch').val();
	myGeo.getPoint(add, function(point){
		  if (point) {
		    map.centerAndZoom(point, 16);
		    marker1.setPosition(point);
		    $("#point_x").val(point.lng);
		    $("#point_y").val(point.lat);
		    var s=""+point.lng+","+point.lat+"";
		    $("#point").val(s);
		  }else{
			  alert('没有找到匹配的坐标信息,请检查搜索的地址是否存在');
		  }
	}, "全国");
}

$(document).ready(function(){
	
	$('#web3g').trigger('click');
	GetAdd();
});
</script>
</body>
</html>

恐龍

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图-使用坐标

Insert title herebody, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=rAQA7oYioeeEyOs0tNjYd7uX"
复制链接

扫一扫

专栏目录