百度地图API调用实现获取经纬度以及标注
2024-04-03 09:23:08
一、申请AK
百度搜索百度地图API，进入官网文档，按照官网文档提示注册百度账号并申请AK。申请AK
填写相关信息，应用名称随意、应用类型根据协议来选择.
二、编写代码
根据官网的代码（入门引用和获取经纬度信息），实现代码如下，具体作用见注释
<!DOCTYPE html>
<html lang="en">
<head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Baidu Map </title><style type="text/css">html{height:100%}body{height:100%;margin:0px;padding:0px}#container{height:60%;}</style>
<!-- 引用API,ak处填写为你的密钥 --><script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=" "></script>
<!--引用JQuery--><script crossorigin="anonymous" integrity="sha384-LVoNJ6yst/aLxKvxwp6s2GAabqPczfWh6xzm38S/YtjUyZ+3aTKOnD/OJVGYLZDl" src="https://lib.baomitu.com/jquery/3.5.0/jquery.min.js"></script></head>
<body>
<p style="text-align: center">Map display</p>
<div id="container"></div><!--这是地址详情框-->
<input type="text" id="site">
<!--这是 经度-->
<input type="text" id="longitude">
<!--这是 维度-->
<input type="text" id="latitude"></body>
<script>// 展示地图var map = new BMap.Map("container"); // 创建地图实例var point = new BMap.Point(116.404, 39.915); // 创建点坐标map.centerAndZoom(point, 17); // 初始化地图，设置中心点坐标和地图级别map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放//添加控件map.addControl(new BMap.NavigationControl()); // 平移缩放控件mapmap.addControl(new BMap.ScaleControl()); // 比例尺控件map.addControl(new BMap.MapTypeControl()); // map类型（平面、卫星、三维）// 增添标注var point1 = new BMap.Point(116.403, 39.915);var point2 = new BMap.Point(116.401, 39.915);var point3 = new BMap.Point(116.400, 39.915);var point4 = new BMap.Point(116.399, 39.915);// 标注点var marker = new BMap.Marker(point1);var marker2 = new BMap.Marker(point2);map.addOverlay(marker);map.addOverlay(marker2);// 添加事件marker.addEventListener("click",function (){alert("您点击了标注");});// 标注图标（暂时加载不出来，还未解决）var myIcon = new BMap.Icon('https://i.loli.net/2020/10/24/2kZOAuvlQISrwBP.png', new BMap.Size(50, 50), {// 指定定位位置。// 当标注显示在地图上时，其所指向的地理位置距离图标左上// 角各偏移10像素和25像素。您可以看到在本例中该位置即是// 图标中央下端的尖角位置。anchor: new BMap.Size(30, 30),// 设置图片偏移。// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您// 需要指定大图的偏移位置，此做法与css sprites技术类似。imageOffset: new BMap.Size(0, 0 - 5) // 设置图片偏移});var marker4 = new BMap.Marker(point4,{icon:myIcon});map.addOverlay(marker4);// 自定义标注// 定义自定义覆盖物的构造函数function SquareOverlay(center, length){this._center = center;this._length = length;// this._color = color;}// 继承API的BMap.OverlaySquareOverlay.prototype = new BMap.Overlay();// 实现初始化方法SquareOverlay.prototype.initialize = function(map){// 保存map对象实例this._map = map;// 创建div元素，作为自定义覆盖物的容器var img = document.createElement("img");img.style.position = "absolute";// 可以根据参数设置元素外观img.style.width = this._length + "px";img.style.height = this._length + "px";img.src = "https://i.loli.net/2020/10/24/JMmU5nBSjusrfa3.png";// 服务器url// 将div添加到覆盖物容器中map.getPanes().markerPane.appendChild(img);// 保存div实例this._img = img;// 需要将div元素作为方法的返回值，当调用该覆盖物的show、// hide方法，或者对覆盖物进行移除时，API都将操作此元素。return img;}// 实现绘制方法SquareOverlay.prototype.draw = function(){// 根据地理坐标转换为像素坐标，并设置给容器var position = this._map.pointToOverlayPixel(this._center);this._img.style.left = position.x - this._length / 2 + "px";this._img.style.top = position.y - this._length / 2 + "px";}var infoWindow = new BMap.InfoWindow("数量：3",opts);// 实现显示方法SquareOverlay.prototype.show = function(){if (this._img){this._img.style.display = "";}this.click = function (){console.log("hello");var infoWindow = new BMap.InfoWindow("数量：3",opts);map.openInfoWindow(infoWindow,point2);}}// 实现隐藏方法SquareOverlay.prototype.hide = function(){if (this._img){this._img.style.display = "none";}}SquareOverlay.prototype.click= function(){map.openInfoWindow(infoWindow,point2);}// 添加自定义方法SquareOverlay.prototype.toggle = function(){if (this._div){if (this._img.style.display == ""){this.hide();}else {this.show();}}}var mySquare = new SquareOverlay(map.getCenter(), 100);map.addOverlay(mySquare);mySquare.addEventListener("click",function () {console.log("进入测试。。");SquareOverlay.hide();});// 设置信息框的属性var opts = {width :100,height:40,title:"Detail Info"}//添加点击事件，点击出现信息框marker.addEventListener("click",function () {map.openInfoWindow(infoWindow,point2);});// var traffic = new BMap.TrafficLayer(); // 创建交通流量图层实例// map.addTileLayer(traffic); // 将图层添加到地图上//自定义叠加层var tilelayer = new BMap.TileLayer(); // 创建地图层实例tilelayer.getTilesUrl=function(){ // 设置图块路径return "https://i.loli.net/2020/10/24/2kZOAuvlQISrwBP.png";};map.addTileLayer(tilelayer);// 获取经纬度var geoc = new BMap.Geocoder();map.addEventListener("click", function(e){//通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度var pt = e.point;geoc.getLocation(pt, function(rs){//addressComponents对象可以获取到详细的地址信息var addComp = rs.addressComponents;var site = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;//将对应的HTML元素设置值$("#site").val(site);$("#longitude").val(pt.lng);$("#latitude").val(pt.lat);});});
</script>
</html>百度地图API调用实现获取经纬度以及标注相关推荐
- springboot8==调用百度地图API从浏览器获取经纬度，后端使用geodesy依赖计算配送距离
见百度地图API调用文档 jspopularGL | 百度地图API SDK ================ <!--引入百度地图API用于从浏览器获取当前经纬度--> <scri ...
- java调用百度地图API根据地理位置获取经纬度
前言: 自己申请一个百度地图得账号,然后创建自己需要服务拿到Ak 下载地址:登录百度帐号 https://lbsyun.baidu.com/apiconsole/key 1.第一步:申请账号,这一步大 ...
- 【百度地图API】自行获取区域经纬度的工具
原文:[百度地图API]自行获取区域经纬度的工具 摘要:上一章教大家如何建立自己的行政区域地图.这次为大家提供一个,可视化选择区域,并且能自动生成经纬度代码的工具.工具的源代码完全公开,并且做了详尽的 ...
- 百度地图api调用 实现车载导航功能
百度地图api调用 实现车载导航功能 1.进入百度地图开放平台登录账号 2.百度地图api密钥获取 要想使用百度地图的api就需要申请创建对应的应用功能并获取AK密钥,从而才可以成功调用api的功能模 ...
- 【百度地图API】如何获取行政区域的边界？
[百度地图API]如何获取行政区域的边界? 摘要:以前教过大家如何自行获取行政区域,或者自定义获取一个区域的边界值.今天来教大家直接调用百度地图API1.3(目前最新版本)来获取行政区域的边界值. - ...
- Java web与web gis学习笔记（二）——百度地图API调用
系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...
- java调用百度地图api简单示例--获取国内任意两地之间距离
老师让我们从百度地图的api上获取数据源最为两地运输距离,结果百度地图api的开发文档居然连个示例都没有...于是上网找了半天,都是一百多行的源码,我就想用个api,你给我这玩意???终于最后还是找到 ...
- 百度地图API调用实例之地址标注与位置显示
之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...
- java web调用百度地图_Java web与web gis学习笔记（二）——百度地图API调用
一.申请百度地图开发者 百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口,包括JavaScript API.Web服务API.Android SDK.iOS SDK.定位SDK.车联网 ...
最新文章
- 根据IP查找在交换机上的端口
- matlab 数组元素连乘积prod
- 【集合论】二元关系 ( A 上二元关系 | A 上二元关系示例 )
- 简单使用URLConnection、HttpURLConnection和HttpClient访问网络资源
- 在线浏览器摄像头软件！妈妈再也不用担心我的windows摄像头驱动没更新啦！
- rman report 命令
- Thread.CurrentPrincipal HttpContext.Current.User
- ASP脚本语言之vbscript用法
- opendir是安全重入函数吗_redis实现分布式锁，与jdk可重入锁ReentrantLock的原理对比剖析...
- 入门python之前，应该先了解这些
- Delphi7 如何调整背景色为黑色容易护眼
- Chrome插件-百度网盘视频调速器
- Gnuradio安装及ADALM-PLUTO设备的配置
- w ndows7错误恢复,Win7 0xc000000e启动错误恢复方法
- keil调试中黄色三角形代表什么意思
- k8s（kubernetes）部署nacos（3各节点....N各节点均可以）集群
- 三、jQuery 中的 DOM 操作（超详细）
- springboot基于java的基金分析系统的设计与实现
- 与上司同事的谈话技巧
- 看电视剧《天道》一点感想 + 法兰克福美景Opencv聚类分析