html5网页定位当前位置,HTML5网页定位，并将位置绘在百度地图上

素颜马尾好姑娘i 2022-10-06 09:47 203阅读 0赞

运行效果：

![2bdba3de0fa061786b99d09c649a8a76.png][]

实现代码：

HTML5定位

\* \{ margin: 0px; padding: 0px; \}

body \{ font: normal 100% Helvetica, Arial, sans-serif; text-align: center; height: 100%; overflow: hidden; \}

\#allmap \{ width: 100%; height: 100%; position: absolute; \}

$(function () \{

// 单次位置请求执行的函数

function getLocation() \{

if (navigator.geolocation) \{

navigator.geolocation.getCurrentPosition(showPosition, locationError);

\} else \{

alert("你的浏览器不支持 GeoLocation.");

\}

\}

// 页面加载时执行getLocation函数

//window.onload = getLocation;

$("\#btn").click(function () \{

getLocation();

\});

getLocation();

\});

//定位成功时，执行的函数

function showPosition(position) \{

var lon = position.coords.longitude;

var lat = position.coords.latitude;

// alert("您位置的经度是："+lon+" 纬度是："+lat);

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

var point = new BMap.Point("" + lon + "", "" + lat + "");

map.centerAndZoom(point, 19);

var gc = new BMap.Geocoder();

translateCallback = function (point) \{

var marker = new BMap.Marker(point);

map.addOverlay(marker);

map.setCenter(point);

gc.getLocation(point, function (rs) \{

var addComp = rs.addressComponents;

if (addComp.province !== addComp.city) \{

var sContent =

"

#### 你当前的位置是： ####

" +

"

" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "

" +

"

";

\}

else \{

var sContent =

"

#### 你当前的位置是： ####

" +

"

" + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "

" +

"

";

\}

var infoWindow = new BMap.InfoWindow(sContent);

map.openInfoWindow(infoWindow, point);

\});

\}

BMap.Convertor.translate(point, 0, translateCallback);

\}

// 定位失败时，执行的函数

function locationError(error) \{

switch (error.code) \{

case error.PERMISSION\_DENIED:

alert("User denied the request for Geolocation.");

break;

case error.POSITION\_UNAVAILABLE:

alert("Location information is unavailable.");

break;

case error.TIMEOUT:

alert("The request to get user location timed out.");

break;

case error.UNKNOWN\_ERROR:

alert("An unknown error occurred.");

break;

\}

\}

[2bdba3de0fa061786b99d09c649a8a76.png]: /images/20221005/46b12b8b9d6d43d59d272e72f35ae880.png

发表评论取消回复

表情：

评论列表（有 0 条评论，203人围观）

还没有评论，来说两句吧...

相关阅读

相关 h5页面调用百度地图获取当前位置并在地图上标注出来

项目中越来越多的用到了手机的GRS定位功能，使用百度地图API获取当前位置并在地图上标注出来首先应该在网站上注册key 在百度上搜索百度地图开放平台，出来下面的网站...

古城微笑少年丶/ 2024年04月18日 09:09/ 0 赞/ 84 阅读

相关 Vue Baidu Map百度地图定位当前位置

<template> <div> <baidu-map class="map" @ready="handler" style="height: 500px;" :c

小咪咪/ 2023年10月11日 14:29/ 0 赞/ 79 阅读

相关安卓开发——百度地图定位当前位置

1.获取百度地图的SDK，[点击下载][Link 1] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

àì夳堔傛蜴生んèń/ 2023年10月07日 14:06/ 0 赞/ 77 阅读

相关 HTML5 Geolocation（地理定位）用于定位用户的位置。

一、定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用

谁践踏了优雅/ 2023年02月08日 12:56/ 0 赞/ 84 阅读

相关 html5学习(地理位置定位)

> 我把代码部署到我本地的tomcat，然后用我笔记本电脑的火狐和IE测试了一下，都是报错，没办法测试！ > > html5地理位置定位，测试比较困难和麻烦，最好把代码部署到

心已赠人/ 2022年12月31日 07:21/ 0 赞/ 185 阅读

相关 HTML5获取地理位置定位信息

使用HTML5获取地理位置定位信息如何使用HTML5地理位置定位功能定位功能(Geolocation)是HTML5的新特性，因此只有在支持HTML5的现代浏览器上运行，

心已赠人/ 2022年11月12日 10:00/ 0 赞/ 286 阅读

相关 html5网页定位当前位置,HTML5网页定位，并将位置绘在百度地图上

运行效果： ![2bdba3de0fa061786b99d09c649a8a76.png][] 实现代码： HTML5定位 \ \{ margin: 0px; padd

素颜马尾好姑娘i/ 2022年10月06日 09:47/ 0 赞/ 204 阅读

相关 HTML5 地理位置定位（HTML5 Geolocation）

地理位置（Geolocation）是 [HTML5][HTML5] 的重要特性之一，提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家

秒速五厘米/ 2022年08月02日 09:34/ 0 赞/ 295 阅读

相关 HTML-定位网页元素

定位定位在网页中的应用 ![70][] ![70 1][] ![70 2][] position属性 1. static：默认值，没有定位 ![70 3

朴灿烈づ我的快乐病毒、/ 2022年05月12日 07:28/ 0 赞/ 306 阅读

相关 html5实现获取地理位置信息并定位

这里主要讲h5实现获取地理位置信息并定位功能，本文讲解了原生h5，百度地图，谷歌地图等三种获取地理信息并定位的方法，需要的朋友可以参考下： h5提供了地理位置功能（Geolo

r囧r小猫/ 2022年04月05日 16:20/ 0 赞/ 799 阅读