js根据输入的地址获得经纬度（百度地图）

最新推荐文章于 2023-06-02 22:41:33 发布

我的大树

最新推荐文章于 2023-06-02 22:41:33 发布

阅读量1.5k

点赞数 2

分类专栏：百度地图文章标签：根据地点名查询经纬度 js

本文链接：https://blog.csdn.net/qq_43033730/article/details/89466829

版权

百度地图专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<html>
<head>
    <title>查询经纬度</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=你的密钥"></script>
    </head>
<body style="background:#f9f9f9; margin:0 auto">
<div style="width:100%;margin:30px auto;">

    地址：<input id="demo" type="text" value="北京" style="margin-right:50px;"/>
    经纬度：<input id="haha" type="text" />
    <div id="ditu" style=" margin-top:30px; width:100%; height:100%;overflow:hidden;">

    </div>

</div>
</body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("ditu");
    map.centerAndZoom("北京市", 12);
    var marker = new BMap.Marker(new BMap.Point(116.403847,39.915526));  // 创建标注，为要查询的地方对应的经纬度
    map.addOverlay(marker);

    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

    var localSearch = new BMap.LocalSearch(map);
    $("#demo").blur(function(){
        map.clearOverlays();//清空原来的标注
        var keyword = document.getElementById("demo").value;
        localSearch.setSearchCompleteCallback(function (searchResult) {
            var poi = searchResult.getPoi(0);
            document.getElementById("haha").value = poi.point.lng + "," + poi.point.lat;
            map.centerAndZoom(poi.point, 13);
            var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创建标注，为要查询的地方对应的经纬度
            map.addOverlay(marker);
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        });
        localSearch.search(keyword);
    })

</script>
</html>

默认页面，输入地址失去焦点时，进行定位，把“你的密钥”改为自己的百度地图API秘钥就好了

在这里插入图片描述

以下测试效果
有部分原生js没有改成jQuery，有需要可自行改

我的大树

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js根据输入的地址获得经纬度（百度地图）

<html><head> <title>查询经纬度</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="http://api.map.b...
复制链接

扫一扫