百度地图，通过地址获取坐标和通过坐标获取地址

最新推荐文章于 2023-06-07 14:46:05 发布
最新推荐文章于 2023-06-07 14:46:05 发布
阅读量1.8w 收藏
点赞数 1
分类专栏： JQuery HTML+CSS+DIV 文章标签： 百度地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/make1828/article/details/50387556
版权

<html>

<head>

    <style>

        body, html {

            width: 100%;

            height: 100%;

            margin: 0;

            font-family: "微软雅黑";

        }


        #allmap {

            height: 500px;

            width: 100%;

        }


        #r-result {

            width: 100%;

            font-size: 14px;

        }


        tr {

            height: 40px;

        }

    </style>

    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=B3f7707c25da5b29a6ff69618788a296"></script>


    <script>

        $(document).ready(function () {

            // 初始化百度地图

            initBaiduMap(116.322987, 39.983424);


            $(".selectLan").click(function () {

                doOptions();

                initBaiduMap($("#addhouseLongitude").val(), $("#addhouseLatitude").val());

            });

        });

        /**

         *

         * 初始化百度地图

         */

        function initBaiduMap(x, y) {

            // 百度地图API功能

            map = new BMap.Map("allmap");

            var point = new BMap.Point(x, y);

            map.centerAndZoom(point, 15);

            //map.centerAndZoom("北京", 13);

            map.enableScrollWheelZoom(true);

            // 设置地图显示的城市 此项是必须设置的

            map.setCurrentCity("北京");

            // 添加地图类型控件

            map.addControl(new BMap.MapTypeControl());

            // 左上角，添加比例尺

            var top_left_control = new BMap.ScaleControl({

                anchor: BMAP_ANCHOR_TOP_LEFT

            });

            // 左上角，添加默认缩放平移控件

            var top_left_navigation = new BMap.NavigationControl();

            // 右上角，仅包含平移和缩放按钮

            var top_right_navigation = new BMap.NavigationControl({

                anchor: BMAP_ANCHOR_TOP_RIGHT,

                type: BMAP_NAVIGATION_CONTROL_SMALL

            });

            /*

             * 缩放控件type有四种类型: BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；

             * BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮； BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮

             */

            map.addControl(top_left_control);

            map.addControl(top_left_navigation);


            map.clearOverlays();

            // 创建标注

            var marker = new BMap.Marker(point);

            // 将标注添加到地图中

            map.addOverlay(marker);

            map.panTo(point);


            // 鼠标点击获取坐标,并设置标注

            //map.addEventListener("click", function (e) {

            //    //通过坐标获取详细地址

            //    $("#addhouseLongitude").val(e.point.lng);

            //    $("#addhouseLatitude").val(e.point.lat);

            //    map.clearOverlays();

            //    var new_point = new BMap.Point(

            //        document.getElementById("addhouseLongitude").value,

            //        document.getElementById("addhouseLatitude").value);

            //    // 创建标注

            //    var marker = new BMap.Marker(new_point);

            //    // 将标注添加到地图中

            //    map.addOverlay(marker);

            //    map.panTo(new_point);

            //});

        }


        //通过地址推出坐标

        var advancedOptions = "";

        var address = "";

        var cityname = "";

        var SAMPLE_ADVANCED_POST = "http://api.map.baidu.com/geocoder/v2/?ak=B3f7707c25da5b29a6ff69618788a296&callback=renderOption&output=json";

        //通过坐标反推地址的

        var addressOptions = "";

        var lat = "";

        var lng = "";

        var SAMPLE_ADDRESS_POST = "http://api.map.baidu.com/geocoder/v2/?ak=B3f7707c25da5b29a6ff69618788a296&callback=renderReverse&output=json&pois=1";


        function doOptions() {

            var script = document.createElement('script');

            script.type = 'text/javascript';

            showOptionsURL();

            script.src = advancedOptions;

            document.body.appendChild(script);

        };

        function doAddress() {

            var script = document.createElement('script');

            script.type = 'text/javascript';

            showAddressURL();

            script.src = addressOptions;

            document.body.appendChild(script);

        };


        function showOptionsURL() {

            advancedOptions = SAMPLE_ADVANCED_POST;

            address = document.getElementById("location").value;

            cityname = document.getElementById("cityname").value;

            advancedOptions += "&address=" + encodeURIComponent(address);

            advancedOptions += "&city=" + encodeURIComponent(cityname);

            var safe = advancedOptions;

            GetCode(safe);

        };


        function showAddressURL() {

            addressOptions = SAMPLE_ADDRESS_POST;

            lat = document.getElementById("addhouseLatitude").value;

            lng = document.getElementById("addhouseLongitude").value;

            addressOptions += "&location=" + lat + "," + lng;

            var safe = addressOptions;

            GetAddress(safe);

        };


        function GetCode(url) {

            $.ajax({

                type: "get",

                url: url,

                dataType: "JSONP",

                success: function (data) {

                    renderOption(data);

                },

                error: function (data) {

                    renderOption(data);

                }


            });

        }


        function GetAddress(url) {

            $.ajax({

                type: "get",

                url: url,

                dataType: "JSONP",

                success: function (data) {

                    renderReverse(data);

                },

                error: function (data) {

                    renderReverse(data);

                }


            });

        }


        function renderOption(response) {

            var html = '';

            if (response.status) {

                var text = "无正确的返回结果:\n";

                document.getElementById('optionsNarrative').innerHTML = text;

                return;

            } else {

                var location = response.result.location;

                $("#addhouseLongitude").val(location.lng);

                $("#addhouseLatitude").val(location.lat);

                document.getElementById('optionsNarrative').innerHTML = '<p>坐标：纬度: ' + location.lat + "  经度: " + location.lng + '<br/>';

                return;

            }

        }

        function renderReverse(response) {

            var html = '';

            if (response.status) {

                var text = "无正确的返回结果:\n";

                document.getElementById('optionsNarrative').innerHTML = text;

                return;

            } else {

                var location = response.result;


                html += '<p>详细地址: ' + location.formatted_address + '<br/>';

                html += '<p>城市: ' + location.addressComponent.country + location.addressComponent.province + '<br/>';

                html += '<p>市区: ' + location.addressComponent.city + location.addressComponent.district + '<br/>';

                html += '<p>地址: ' + location.addressComponent.street + location.addressComponent.street_number + '<br/>';

                document.getElementById('optionsNarrative').innerHTML = html;

                return;

            }

        }

    </script>

</head>

<body>

    <table style="width: 60%;" border="1">

        <tr>

            <td></td>

            <td>

                <input type="text" id="cityname" style="width: 200px;">

                <br />

                <input type="text" id="location" style="width: 200px;">

                <br />

                <input type="button" class="selectLan" value="查询坐标" />

                <br />

                <div id="optionsNarrative"></div>

            </td>

        </tr>

        <tr>

            <td>位置及周边</td>

            <td>

                <div id="r-result">

                    经度: <input id="addhouseLongitude" type="text" style="width: 180px; height: 30px; margin-right: 10px;" /><br />

                    纬度: <input id="addhouseLatitude" type="text" style="width: 180px; height: 30px; margin-right: 10px;" />

                </div>

                <div id="allmap"></div>

            </td>

        </tr>


    </table>

</body>

</html>

make1828
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
百度地图定位获取不到地址信息问题
CmdMac的专栏
01-23 3156
在接入百度地图时，按官网的文档来做，在AndroidStudio配置时会遇到这个问题： sourceSets{ main{ jnilibs.srcDir 'libs' jni.srcDirs = [] //disable automatic ndk-build } } 这个配置在Studi...
百度地图服务调起缓慢导致位置信息获取不到
qq_35090060的博客
02-17 1422
百度地图服务调起缓慢导致位置信息获取不到 注意，因为代码执行过程中，虽然调起百度服务这一行代码执行了，但是从这行代码执行到百度地图读取位置信息这项服务调起还是有延迟的，因此，如果接下来的代码需要用到百度地图获取的位置信息，就一定要设置延迟执行。（就是为了等待百度地图服务彻底调起） 举例： private void SendMesses(){ //获取百度地图定位 B...
解决引用百度地图点击详情无法定位到相应位置问题
weixin_30652897的博客
08-29 966
会出现这样的原因是因为获取地址内容不全被截断： 解决方法：加以下这段JS即可。 setInterval(function() { var text = $(".BMap_bubble_title p").attr("title"); var address = "https://map.baidu.com/mobile/webapp/search/search/qt=s&am...
使用百度Api所遇到的一些坑
猫叔的故事。
09-23 1927
1.对于事件的触发控件，尽量通过id来获取。 2.地图加载有 延时性，一定要注意判断。有些函数必须等地图加载完才能执行，所以常规的赋值返回并不会像我们想的那样实现。会先执行。 3.下面附带一个demo，仅供参考。 script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap");
java通过地址名称获取地址坐标算法
张志强的博客
06-07 548
在GIS中，地址名称通常是指人们熟知的地址，例如“北京市海淀区中关村南大街5号”。在本文中，我们将介绍如何使用Java编写一个算法，以便通过地址名称获取地址坐标。例如，我们可以使用Java的字符串处理类库来解析地址名称，使用Java的网络类库来发送查询请求，使用Java的JSON类库来解析查询结果等等。需要注意的是，这个算法仅仅是一个基本的框架，实际应用中还需要考虑很多细节问题，例如地址名称的格式、查询结果的准确性等等。总之，通过地址名称获取地址坐标是一个非常有用的功能，可以广泛应用于各种应用场景中。
根据经伟度坐标获取地址 百度地图API
10-27
在做GPS开发的时候,可以根据经伟度坐标获取地址,通过百度地图API
python通过百度地图API获取某地址的经纬度详解
09-20
主要给大家介绍了关于python通过百度地图API获取某地址的经纬度的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
自定义划分区域获取区域内坐标点-百度地图
12-04
调用百度地图API，实现自定义划分区域，圆型，长方形，不规则图形，并能够计算区域内的坐标点数，并使用了点聚合方式渲染大量的坐标点
JS百度地图API获取地址坐标特效代码
03-20
JS百度地图API获取地址坐标代码是一款点击地图拾取坐标效果演示代码。
百度地图地区边界坐标获取
12-28
输入需要获取边界坐标的城市，就可以看到该地图的边界坐标
HTML5 / JS实现百度地图基本常用功能
陈雪珊的博客
11-21 4131
很多网站都会使用到地图功能，提供地图接口的第三方也有不少，我这里来聊一下百度地图提供的API及百度地图基本功能的实现
地图（仅供查阅）
qq_44417271的博客
04-23 92
<template> <!-- 地图弹窗 含地图搜索 地图默认中心点为用户所属当地市政府 地图点击获取经纬度和 地址 --> <el-dialog title="选择地点" :before-close="cancelbtn" :visible="dialogHavePositon" :width="setDialogWidth" append-to-body > <div id="outer-box"&gt
百度地图根据坐标获取地址名称
碎调122的博客
10-13 7860
接到这个需求，查了下如何实现，基本都是说在js调百度地图api转换，代码贴上： //坐标转地址——暂时不用 function getAddress(pos) { var pos_list = pos.split(','); var lng = pos_list[0]; var lat = po...
百度地图api之点击地图获取坐标点
热门推荐
叶少翔
11-04 2万+
一.首先引入所申请的ak密钥 二.简单样式处理一下body, html,#map {width: 100%;height: 100%;overflow: hidden;margin:0;}三.html代码布局//下面的代码是用来显示地图的四.js代码如下//创建Map地图实例var map = new BMap.Map("allmap");//设置中心点坐标var point = new BMap
通过百度坐标获取地址
index_ling的博客
04-19 3034
map百度 // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(102.74073922,25.03548519); var gc = new BMap.Geocoder(); gc.getLocation(point, function(rs){ var addComp
百度地图接口中，根据坐标点point，返回该点的地址信息
qq_42547200的博客
05-26 1748
在做毕业设计的时候遇到这个问题，需要根据当前的点坐标返回这个点的位置信息，如根据 var point = new BMap.Point(103.823557, 36.058039); 这个点，需要返回该点的位置信息为甘肃省兰州市 代码如下 通过这一行代码引入百度地图API <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=你的密钥"> 根据点的坐标获取位置信息 var m
百度地图根据坐标转化地址
01-31 771
1.首先要 初始化搜索模块，注册事件监听   GeoCoder mSearch = GeoCoder.newInstance(); mSearch.setOnGetGeoCodeResultListener(geocoderlistener); LatLng latLng = new LatLng(40.904965, 116.327764);//随便写一个地理
百度坐标拾取html,百度地图实现地址检索获取结果列表和坐标
最新发布
06-12
您可以通过以下步骤来实现百度坐标拾取和地址检索： 1. 在百度地图开放平台申请开发者账号，并创建应用，获取API密钥。 2. 在需要使用地图的页面中引入百度地图JavaScript API库文件。 ```html <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> ``` 3. 在页面中创建一个地图容器。 ```html <div id="map"></div> ``` 4. 初始化地图对象，设置地图中心点和缩放级别。 ```javascript var map = new BMap.Map("map"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建中心点坐标 map.centerAndZoom(point, 15); // 初始化地图，设置中心点和缩放级别 ``` 5. 在地图上添加一个标注，并监听标注的拖拽事件，获取标注的坐标。 ```javascript var marker = new BMap.Marker(point); // 创建标注 marker.enableDragging(); // 设置标注可拖拽 map.addOverlay(marker); // 将标注添加到地图中 marker.addEventListener("dragend", function(e) { // 监听拖拽事件 var point = e.point; // 获取标注的坐标 console.log(point.lng, point.lat); }); ``` 6. 使用百度地图API的地址解析服务，将地址转换为坐标，并在地图上添加一个标注。 ```javascript var geocoder = new BMap.Geocoder(); // 创建地址解析器实例 geocoder.getPoint("北京市海淀区上地信息路9号", function(point) { // 将地址解析为坐标 if (point) { map.centerAndZoom(point, 15); // 将地图中心点设置为解析出的坐标 var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 } else { alert("您选择地址没有解析到结果!"); } }, "北京市"); // 指定地址所在的城市 ``` 以上就是百度地图实现地址检索获取结果列表和坐标的基本步骤。您可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值