H5 百度地图API 将当前位置信息显示出来

最新推荐文章于 2024-08-08 23:45:45 发布
最新推荐文章于 2024-08-08 23:45:45 发布
阅读量1.8k 收藏 3
点赞数
分类专栏： h5 百度PAI 文章标签： 百度地图JavaScript API addControl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdx1170776994/article/details/76650922
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度地图显示地图信息</title>

  //引用百度API 你要有百度账号获得JavaScript API

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= 你的百度密钥"></script>

  

<style type="text/css">
*{
margin: 0;padding: 0;
}
html,body,#map{
width: 100%;height: 100%;
}
</style>
</head>
<body>

<div id="map"></div>
</body>
<script type="text/javascript" src="js/new_file-a.js"></script>

</html>


js代码

(function(){
//地图界面的显示
var opt = {mapType:BMAP_HYBRID_MAP,minZoom:2}
var map = new BMap.Map("map",opt);
var center = new BMap.Point(116.519072,39.931867);
map.centerAndZoom(center,13);
//====以上是把地图显示在页面的上的方法=============


//========相关事件操作=======================
//鼠标滑轮滑动  放大缩小地图
map.enableScrollWheelZoom();
//禁止拖拽地图
map.disableDragging();



function Wuhan(){
                                                                                                        //把这个控件放在左上角
        this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
                                                                                                                         //距离左上角的位置
        this.defaultOffset = new BMap.Size(50,50);
};
                                                                                                                //把这个控件定义为基类控件的子类
    Wuhan.prototype = new BMap.Control();

Wuhan.prototype.initialize=function(map){
                                                                                                        //创建一个div  设置样式
var wh = document.createElement("div");
wh.style.height="120px";
wh.style.width="100px";
wh.style.color="red";
wh.style.backgroundColor="greenyellow";
                                                                                                       //把创建的div放在地图上面
map.getContainer().appendChild(wh);

                                                                                                        //设置定时器
var time=setInterval(function(){
                                                                                                  //找到定位 信息
location.location();
var city = location.getAddressComponent();
                                                                                                    //判断  获取到位置信息时  定时器停止
if(city!=null){
clearInterval(time)
}
console.log(city)
                                                                                                   //  利用for in  遍历    因为得到的数据是键值对的数组   取出属性值   放到下面的p标签中
for(key in city){
var cc = document.createElement("p");
cc.innerHTML=city[key];
wh.appendChild(cc)
};
},1000)
                                                                                                           //  记得打印
return wh;
};


var qq = new Wuhan()
map.addControl(qq);
})()

cdShow小太阳
关注
专栏目录
html5定位获取当前位置并在百度地图上显示
05-09
一旦获取到经纬度，我们可以结合百度地图API来显示用户的位置。百度地图API提供了丰富的功能，包括地图展示、标记、路径规划等。首先，需要在网页中引入百度地图的JavaScript库： ```html <script src="http://api....
【vue】移动端H5+腾讯地图，实现地图选取坐标点获取位置信息
糖葫芦哎的博客
12-06 3746
本篇主要内容是使用腾讯地图+逆地址解析的方式实现地图选取坐标点获取位置信息，未使用腾讯地图的前端选点组件，如需了解更多腾讯地图API，请关注官网文档。
在H5中使用腾讯地图,实现定位,距离计算,实时搜索,地址逆解析
weixin_48888726的博客
11-12 5861
在H5中使用腾讯地图,实现定位,距离计算,实时搜索,地址逆解析
HTML5 地理定位
最新发布
懒羊羊大王的博客
08-08 688
H5的地理定位通过调用 Web Geolocation API 实现，这是一个浏览器提供的、用于获取用户当前位置信息的API。Web Geolocation API允许网页在用户同意的情况下访问其地理位置，以便提供基于位置的服务，例如地图显示、位置搜索等。
h5页面调用百度地图获取当前位置并在地图上标注出来
热门推荐
zuo-yiran的博客
03-18 4万+
在项目中越来越多的用到了手机的GRS定位功能，使用百度地图API获取当前位置并在地图上标注出来首先应该在官网上注册key 点击获取密钥，注册获取key。 完整代码如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="http://api.map.baidu.com/a
H5结合百度map实现GPS定位
weixin_33856370的博客
06-05 351
前言      目前我们做m端时都会用到定位，当用户第一次打开h5页面时会启动gps定位，并结合百度map来查找城市。按照我们的逻辑思路就是gps定位获取经纬度，传到后台调用百度的一个接口查找城市名称。      1、查询得到城市名称，我们根据城市名称在我们自己的数据库里再查询对应的城市id（查询会很频繁，可以基于xml 缓存查询，也可以放到redis里）      2、为了保险起见，我们也...
【HTML】实现腾讯H5地图定位
weixin_44341102的博客
09-30 1659
简单实现腾讯H5地图定位
百度地图H5地图选址
12-23
在本项目中，用户输入关键词后，百度地图API会通过地理编码找到对应的地理位置，然后显示在地图上。 5. **搜索热点**：为了显示附近的热点位置，开发者需要调用百度地图的搜索服务，获取指定范围内的兴趣点（POI）...
使用h5百度地图定位
07-18
使用h5，js,百度api实现百度地图定位； 显示当前所在位置； 显示打卡范围； 计算与打卡地点距离。
房屋调查百度地图api h5项目示例代码
10-25
【标题】：“房屋调查百度地图api h5...通过这个项目，开发者可以学习到如何将H5、JavaScript、百度地图API等技术结合，实现一个实用的房屋调查工具。这不仅锻炼了开发者的技术能力，也为实际应用提供了可参考的案例。
vue H5移动端项目使用高德地图定位/标点并点击导航跳第三方app且实现导航路线——实例
wocwin的博客
11-24 6409
vue H5移动端项目使用高德地图定位/标点并点击导航跳第三方app且实现导航路线——实例
基于高德JSAPI的H5选址组件
cxytomo的博客
04-06 1277
h5地图选址组件，基于高德JSAPI
H5根据腾讯地图Api来获取地理位置经纬度
qq_51196135的博客
09-01 4394
H5根据腾讯地图Api来获取地理位置经纬度
高德地图H5定位，搜索列表-完整代码
boy火巨的博客
11-09 1671
 换了两家公司都提上需求要做这个定位的地图，今天整理了下把整页的源代码贴出来供大家参考下！其中的不足还请大家见谅，指出改正！ &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content=&q
h5使用navigator.geolocation获取定位经纬度。vue中引入百度地图api转换为具体地址
de_shy的博客
11-03 2367
navigator.geolocation对象提供了可以公开访问地理位置的方法，其中navigator为浏览器内置对象。检测浏览器是否支持定位API，只需要检测geolocation是否存在于navigator中即可。对于移动Web开发者，大多数情况只需要获取用户的当前位置，此时可以使用getCurrentPosition()方法来获取当前位置的坐标值。
微信内嵌H5（uniapp）获取用户位置信息及打开内置地图
qq_37967380的博客
03-23 3808
public class Wechat2HTTPConverter extends MappingJackson2HttpMessageConverter { public Wechat2HTTPConverter() { List<MediaType> mediaTypes = new ArrayList<>(); mediaTypes.add(MediaType.TEXT_PLAIN); setSupportedMediaTypes(mediaTypes)
利用HTML5定位功能，实现在百度地图上定位
q185030446的博客
09-08 973
"en">          "UTF-8">       HTML5定位       "text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">     "text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wqBXfIN3
百度、高德、谷歌、火星、wgs84（2000）地图坐标相互转换的JS实现
一碗老面的博客
10-01 3680
调用方法示例 //国测局坐标(火星坐标,比如高德地图在用),百度坐标,wgs84坐标(谷歌国外以及绝大部分国外在线地图使用的坐标) //百度经纬度坐标转国测局坐标 var bd09togcj02 = coordtransform.bd09togcj02(116.404, 39.915); //国测局坐标转百度经纬度坐标 var gcj02tobd09 = coordtransform.gcj02tobd09(116.404, 39.915); //wgs84转国测局坐标 var wgs84togcj02
HTML5定位功能，实现在百度地图上定位
weixin_30381317的博客
11-29 93
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5定位</title> <script type="text/javascript" src="http://lib.sinaapp.c...
h5 百度地图显示当前位置 并标识出来
09-22
在使用H5技术实现百度地图显示当前位置并标识出来的过程中，可以采取以下步骤： 首先，需要在H5页面的HTML文件中引入百度地图的API，即在<head>标签中添加如下代码： <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的百度地图API密钥"></script> 然后，在<body>标签内创建一个<div>元素作为地图容器，指定其宽度和高度，如： <div id="map" style="width: 100%; height: 300px;"></div> 接着，在JavaScript文件中编写以下代码来初始化地图并显示当前位置： // 创建地图实例 var map = new BMap.Map("map"); // 设置地图的中心点和缩放级别 var point = new BMap.Point(116.404, 39.915); // 创建中心点坐标 map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和缩放级别 // 添加定位控件 var geolocationControl = new BMap.GeolocationControl(); geolocationControl.addEventListener("locationSuccess", function(e){ // 定位成功事件 var marker = new BMap.Marker(e.point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 }); geolocationControl.addEventListener("locationError",function(e){ // 定位失败事件 alert(e.message); }); map.addControl(geolocationControl); // 将定位控件添加到地图中 最后，将JavaScript文件引入到HTML文件中，即可在浏览器中打开页面查看地图，并标识出当前位置。 以上是通过H5技术实现百度地图显示当前位置并标识的简要步骤，具体可根据实际需求进行适当调整和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值