百度地图根据地址调出地图，获取标记点的经纬度

最新推荐文章于 2023-02-14 03:00:00 发布

原创最新推荐文章于 2023-02-14 03:00:00 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

10 篇文章

订阅专栏

这篇博客介绍了如何利用百度地图API，通过调用地图并标记位置，来获取详细的地理位置经纬度信息。内容包括对现有示例的调整以满足特定需求。

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

百度地图根据地址调出地图，可标记详细位置，并获取标记点的经纬度

<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=nXGqtIcvGfaq3jhvZQ6lKf4kmuDAKFHn&services=&t=20190123111209"></script>
<style type="text/css">
body{font-size:13px;margin:0px}
#container{width:100%px;height:200px}
.label{margin-left:20px;font-weight:bold;font-size:14px}
.lng-lat{
    margin: 0 0 30px 0px;
}
.lng-lat .item{
    margin: 10px;
}
</style>


<div style="margin:10px ;display:none;">请输入:<input type="text" id="suggestId" size="30" value="百度" style="width:300px;" /></div>
<div class="lng-lat">
        <div class="item">
          当前经度:
          <input type="text" id="jing" name="jing" readonly/>
        </div>
        <div class="item">
         当前纬度:
          <input type="text" id="wei"  name="wei" readonly/>
        </div>

      </div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:300px;height:600px;position:absolute;left: 650px;top:20px;"></div>

<div id="container"></div>


<script type="text/javascript">

function G(id) {
    return document.getElementById(id);
}
var lng = document.getElementById('jing');
var lat = document.getElementById('wei');
var map = new BMap.Map("container");
//var point = new BMap.Point(116.3964,39.9093);
var point = new BMap.Point(116.3000,39.0093);
map.centerAndZoom(point,13);
map.enableScrollWheelZoom();

var ac = new BMap.Autocomplete(
//建立一个自动完成的对象
    {"input" : "suggestId"
    ,"location" : map
});

ac.addEventListener("onhighlight", function(e) {
//鼠标放在下拉列表上的事件

    var str = "";
    var _value = e.fromitem.value;
    var value = "";
    if (e.fromitem.index > -1) {
        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    }
    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
    console.log(str);
    value = "";
    if (e.toitem.index > -1) {
        _value = e.toitem.value;
        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    }
    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
    console.log(str);
    G("searchResultPanel").innerHTML = str;
});

var myValue;
ac.addEventListener("onconfirm", function(e) {
//鼠标点击下拉列表后的事件
    lng.value = '';
    lat.value = '';
    var _value = e.item.value;
    myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    console.log(myValue);
    console.log(e.item.index);
    G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

    setPlace();
});

function setPlace(){
    // 创建地址解析器实例
    var myGeo = new BMap.Geocoder();// 将地址解析结果显示在地图上,并调整地图视野
    myGeo.getPoint(myValue, function(point){
          if (point) {
            map.centerAndZoom(point, 16);
            map.addOverlay(new BMap.Marker(point));
          }
    }, "北京");
}


map.addEventListener('click', function (e) {

    var mk = new BMap.Marker(e.point);
    map.clearOverlays();
        map.addOverlay(mk);
        map.panTo(e.point);
    lng.value = e.point.lng;
    lat.value = e.point.lat;
})


$(function() {

    $("#address").change(function(){

         myValue = ($("#addressLabelId").text());
         G("searchResultPanel").innerHTML ="onconfirm<br />index = 0 <br />myValue = " + myValue;
        setPlace();
    });



});
/*//定位到当前位置
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);
        alert('您的位置：'+r.point.lng+','+r.point.lat);
    }
    else {
        alert('failed'+this.getStatus());
    }
});*/
</script>

网上搜的例子，根据需求，略有调整，仅供参考！