百度地图_根据地图上标记位置获取街道信息，以及经纬度信息

最新推荐文章于 2024-03-02 10:31:45 发布
最新推荐文章于 2024-03-02 10:31:45 发布
阅读量1.8w 收藏 5
点赞数 1
分类专栏： 百度地图 文章标签： 百度 function callback class null 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>百度地图Demo</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
</body>
</html>

<script type="text/javascript">
var map = new BMap.Map("container");//初始化地图                    
map.addControl(new BMap.NavigationControl());  //初始化地图控件              
map.addControl(new BMap.ScaleControl());                   
map.addControl(new BMap.OverviewMapControl());              
var point=new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);//初始化地图中心点
var marker = new BMap.Marker(point); //初始化地图标记
marker.enableDragging(); //标记开启拖拽

var gc = new BMap.Geocoder();//地址解析类
//添加标记拖拽监听
marker.addEventListener("dragend", function(e){
    //获取地址信息
    gc.getLocation(e.point, function(rs){
        showLocationInfo(e.point, rs);
    });
});

//添加标记点击监听
marker.addEventListener("click", function(e){
   gc.getLocation(e.point, function(rs){
        showLocationInfo(e.point, rs);
    });
});

map.centerAndZoom(point, 15); //设置中心点坐标和地图级别
map.addOverlay(marker); //将标记添加到地图中

//显示地址信息窗口
function showLocationInfo(pt, rs){
    var opts = {
      width : 250,     //信息窗口宽度
      height: 100,     //信息窗口高度
      title : ""  //信息窗口标题
    }
    
    var addComp = rs.addressComponents;
    var addr = "当前位置：" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>";
    addr += "纬度: " + pt.lat + ", " + "经度：" + pt.lng;
    //alert(addr);
    
    var infoWindow = new BMap.InfoWindow(addr, opts);  //创建信息窗口对象
    marker.openInfoWindow(infoWindow);
}
</script>




附：

Class:服务类/Geocoder

Geocoder()

创建一个地址解析器的实例

getLocation(point:Point, callback:function[, options: LocationOptions])

对指定的坐标点进行反向地址解析。如果解析成功，则回调函数的参数为GeocoderResult对象，否则回调函数的参数为null。(自 1.1 新增)

Class:服务类/GeocoderResult

此类表示Geocoder的地址解析结果。它在地址解析的回调函数的参数中返回，不可实例化。

point  坐标点。(自 1.1 新增)

address  地址描述。(自 1.1 新增)

addressComponents  结构化的地址描述。(自 1.1 新增)



Sup_Heaven
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
根据地理坐标查询地标 城市名称 街道名称 地标建筑
Learning
12-02 1297
根据地理坐标查询地标 根据地理坐标查询城市名称 根据地理坐标查询街道名称 根据地理坐标查询地标建筑 根据坐标查周围地标POI 根据坐标查周围美食 逆地理编码
百度地图API乡镇级别行政区划
yuhuamei的博客
08-18 2336
百度api有提供了“添加行政区划”的示例：http://lbsyun.baidu.com/jsdemo.htm#c1_10 研究了百度行政区划实现原理，它也是存储了行政区边界点集合，显示时通过点集合绘制多边形polygon， 那我们自己也可以按照这个逻辑来实现乡镇行政区划的展示。 找到所需乡镇的边界点集合，存储起来。 添加行政区划 var polygons = []; function getBoundary(){ var areas = []; var ehu = “1
百度地图根据通过查询地址获取经纬度,点击地图获取经纬度
qq_41678070的博客
05-18 766
&lt;%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&
百度地图,根据地址获取经纬度，点击地图获取经纬度
橙-极纪元-cplvfx-JJY.Cheng
12-08 1190
html <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=v3Cg0hRvbX7cuUSKG2sEklyeP8iw5eye"></script> <style> #container { width: 100%; height: 500px; overflow: hidden;
百度地图js 定位并获得精确的地址信息
qq_41756580的博客
03-28 4861
使用百度地图js api定位并获得精确地址： var map = new BMap.Map("map"); var geolocation = new BMap.Geolocation(); //开启SDK辅助定位，仅当使用环境为移动web混合开发，且开启了定位sdk辅助定位功能后生效 geolocation.enableSDKLocation(); //调用getCurrentPositio...
微信地图地址解析服务器地址,微信小程序 腾讯地图SDK 获取当前地址实现解析...
weixin_34862449的博客
08-11 452
微信小程序 腾讯地图SDK 获取当前地址实现解析,微信,小,程序,腾讯,地图,SDK,获取,当前,地址微信小程序 腾讯地图SDK 获取当前地址实现解析易采站长站，站长之家为您整理了微信小程序 腾讯地图SDK 获取当前地址实现解析的相关内容。如何获取用户当前地址，这个就要先用到小程序的定位功能:定位官方文档第一步获取当前定位在js当中写运行项目之后会有个这样的弹窗：这是因为开发者需要说明获取用户地理...
利用百度地图，根据经纬度找到对应的具体街道
qq_44716382的博客
11-16 4868
利用百度地图，根据经纬度找到对应的具体街道 最近在做一个数据处理的工作，偶然碰到了要根据经纬度匹配对应的地点。因为百度地图和真实的地理信息比较有一点的差距，于是可以先对数据进行一些处理。 下面上代码 import json import urllib.request import math def z_turn(x,y): #gcj02坐标转百度坐标 z = math....
百度地图 根据经纬度 定位
热门推荐
Orbita_wangtao
07-31 1万+
 百度地图  根据经纬度 定位   &lt;html&gt; &lt;head&gt;     &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;     &lt;meta name="viewport" content="initial-scale=1.0, user-sc
AngularJs 利用百度地图API 定位当前位置 获取地址信息
11-30
在本文中，我们将深入探讨如何使用AngularJS结合百度地图API来获取并显示用户当前位置的详细地址信息。AngularJS是一款强大的前端开发框架，它允许我们构建动态的、数据驱动的Web应用。而百度地图API则提供了丰富的...
百度地图api实现运动轨迹、坐标拾取、多点标注并显示信息窗体
12-22
使用`Geocoder`类的`getLocation`方法，可以获取到地址对应的地理位置信息，然后创建`Marker`进行标注。如果需要显示多个地址，只需多次调用`getLocation`并创建相应的标记。 4. **鼠标点击抓取坐标**：为了获取...
百度地图获得详细地址,城市,省份,街道等
01-12
异步获得百度地图 详细地址 城市 省份 街道，已打包成jar包，直接调用即可，不过需要你到百度地图官网注册一个秘钥(ak)，这是调用百度地图必须的。使用方法： 1.manifest下声明service: 2.manifest下的application内提供ak: 3.实现onaddresscallback接口，用于获得位置后回调 4.new BDLBSMapHelper().getAddressDetail(context,onaddresscallback)获得地址信息 5.内有一个调用实例 6.注意API版本为3.2.2
百度地图显示短信的经纬度信息
11-19
这里我们关注的焦点是“百度地图显示短信的经纬度信息”，这意味着我们将会探讨如何通过短信接收经纬度数据，并在百度地图上进行展示。 首先，我们需要了解短信接收的机制。在Android或iOS系统中，可以编写应用程序...
利用百度地图Android sdk高仿微信发送位置功能
11-09
最后，我们需要将选定的位置信息格式化为文本，如街道、城市等，可以使用百度地图的逆地理编码服务来实现。在获得位置信息后，调用`GeoCodeSearch`类的`reverseGeoCode`方法，将经纬度转换为实际地址。 通过以上...
vue3 - 详细安装使用百度地图功能，提供百度地图搜索框查找检索省市区及关键字搜索、搜索后自动高亮显示位置信息，也提供了获取当前位置经纬度信息、获取当前城市名称省市区（详细示例代码，一键复制开箱即用
最新发布
高级前端工程师
03-02 2738
vue3，百度地图，在vue3中使用百度地图，vue-baidu-map，vue3+ts+setup百度地图，vue3百度地图怎么实现搜索框，在vue3中如何使用百度地图API，百度地图api文档，百度地图vue3中的详细使用教程，获取当前位置信息，获取当前经纬度，逆向解析，vue3百度地图根据关键字进行搜索位置并在地图上显示高亮出来，选择省市区进行筛选搜索，vue3调用百度地图获取定位坐标(PC端)，搜索定位，Vue3中使用百度地图(获取用户当前位置并)实现标注点以及详情，引入报错咋办，无法引入百度地图，
php百度地图获取当前位置信息,利用百度地图API获取当前位置信息的实例
weixin_34070493的博客
04-04 643
利用百度地图API可以做很多事情，个人感觉最核心也是最基础的就是定位功能了。这里分享一个制作的JS可以实现登录网页后定位：var map;var gpsPoint;var baiduPoint;var gpsAddress;var baiduAddress;var x;var y;function getLocation() {//根据IP获取城市var myCity = new BMap.Loc...
uniapp 中 通过经纬度获取地址详情(vue)
别人笑我太疯癫 我笑他人看不穿 流水落花春去也 游戏人间
04-11 4247
需要第三方地图的支持 本文以百度地图为例 第一步 安装百度地图插件 npm install vue-baidu-map --save 成功后在main.js 中引入百度地图 import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: "rQxHPQX1ua21rWnXzTbUh5KSSUbnefxR"//你自己的ak }) 第二部 在页面中添加百度地图组件 此步骤必须有，不用显示直接 v-show="false" <v...
Java 百度地图 根据经纬度(坐标) 获取乡镇
掐指一算乀缺钱
03-23 1921
申请百度开放平台KEY(ak)没申请,随便找了一个 参数说明: extensions_town:行政区划返回乡镇级数据（town），仅国内召回乡镇数据 coordtype:坐标的类型 bd09ll（百度经纬度坐标）、bd09mc（百度米制坐标）、gcj02ll（国测局经纬度坐标，仅限中国）、wgs84ll（ GPS经纬度） /** * @Description 根据经纬度获取乡镇 * @param lat * @param lng * @Throw.
vue百度地图根据经纬度获取位置
08-16
要根据经纬度获取位置，你可以使用百度地图的逆地址解析服务。以下是一个示例代码，可以在 Vue 中根据经纬度获取位置信息： 首先，在你的 Vue 组件中引入百度地图的 JavaScript API： ```html <script src="http://api.map.baidu.com/api?v=2.0&ak=YOUR_API_KEY"></script> ``` 请将 `YOUR_API_KEY` 替换为你自己的百度地图 API 密钥。 然后，在你的 Vue 组件中，可以使用 `mounted` 钩子函数和 `Geocoder` 对象来进行逆地址解析： ```javascript export default { mounted() { // 创建地图实例 const map = new BMap.Map("mapContainer"); // 创建点坐标 const point = new BMap.Point(经度, 纬度); // 初始化地图，设置中心点坐标和地图级别 map.centerAndZoom(point, 15); // 创建逆地址解析器 const geocoder = new BMap.Geocoder(); // 根据坐标获取位置信息 geocoder.getLocation(point, function(result) { if (result) { console.log(result.address); } }); }, }; ``` 请将 `经度` 和 `纬度` 替换为你要获取位置信息的具体经纬度值。 最后，在你的 Vue 模板中添加一个容器来显示地图： ```html <template> <div id="mapContainer" style="width: 100%; height: 400px;"></div> </template> ``` 这样，根据经纬度就可以在 Vue 中获取到对应的位置信息了。请确保你已经正确引入百度地图的 JavaScript API，并且替换了正确的 API 密钥和经纬度值。获取到的位置信息可以通过 `result.address` 获取，你可以根据需要进行处理或展示。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值