cari
Rumahhujung hadapan webTutorial H5h5页面如何调用百度地图获取当前位置(代码)

本篇文章给大家带来的内容是关于h5页面如何调用百度地图获取当前位置(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

在项目中越来越多的用到了手机的GRS定位功能,使用百度地图API获取当前位置并在地图上标注出来首先应该在官网上注册key
这里写图片描述

这里写图片描述

点击获取密钥,注册获取key。
完整代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src=" 
</script>
<title>百度地图的定位</title>
</head>
<body>
    <p id="allmap" style="width: 100%;height: 500px;"></p>
    <script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");    var point = new BMap.Point(108.95,34.27);
    map.centerAndZoom(point,12);    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){console.log(r.point)        
    if(this.getStatus() == BMAP_STATUS_SUCCESS){            
    var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);//标出所在地
            map.panTo(r.point);//地图中心移动
            //alert(&#39;您的位置:&#39;+r.point.lng+&#39;,&#39;+r.point.lat);
            var point = new BMap.Point(r.point.lng,r.point.lat);//用所定位的经纬度查找所在地省市街道等信息
            var gc = new BMap.Geocoder();
            gc.getLocation(point, function(rs){
               var addComp = rs.addressComponents; console.log(rs.address);//地址信息
               alert(rs.address);//弹出所在地址

            });
        }else {
            alert(&#39;failed&#39;+this.getStatus());
        }        
    },{enableHighAccuracy: true})</script></body></html>

运行结果是:
这里写图片描述

(注:用浏览器定位是不准确的,建议用手机进行测试!)

相关推荐:

HTML5调用百度地图API获取当前位置并直接导航目的地的方法

Atas ialah kandungan terperinci h5页面如何调用百度地图获取当前位置(代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
h5是指什么h5是指什么Aug 02, 2023 pm 01:52 PM

H5是指HTML5,是HTML的最新版本,H5是一个功能强大的标记语言,为开发者提供了更多的选择和创造空间,它的出现推动了Web技术的发展,使得网页的交互和效果更加出色,随着H5技术的逐渐成熟和普及,相信它将会在互联网的世界中发挥越来越重要的作用。

如何区分H5,WEB前端,大前端,WEB全栈?如何区分H5,WEB前端,大前端,WEB全栈?Aug 03, 2022 pm 04:00 PM

本文带你快速区分H5、WEB前端、大前端、WEB全栈,希望对需要的朋友有所帮助!

h5如何使用positionh5如何使用positionDec 26, 2023 pm 01:39 PM

在H5中使用position属性可以通过CSS来控制元素的定位方式:1、相对定位relative,语法为“style="position: relative;”;2、绝对定位absolute,语法为“style="position: absolute;”;3、固定定位fixed,语法为“style="position: fixed;”等等。

h5怎么实现web端向上滑动加载下一页h5怎么实现web端向上滑动加载下一页Mar 11, 2024 am 10:26 AM

实现步骤:1、监听页面的滚动事件;2、判断滚动到页面底部;3、加载下一页数据;4、更新页面滚动位置即可。

vue3怎么实现H5表单验证组件vue3怎么实现H5表单验证组件Jun 03, 2023 pm 02:09 PM

效果图描述基于vue.js,不依赖其他插件或库实现;基础功能使用保持和element-ui一致,内部实现做了一些移动端差异的调整。当前构建平台使用uni-app官方脚手架构建,因为当下移动端大多情况就h6和微信小程序两种,所以一套代码跑多端十分适合技术选型。实现思路核心api:使用provide和inject,对应和。在组件中,内部用一个变量(数组)去将所有实例储存起来,同时把要传递的数据通过provide暴露出去;组件则在内部用inject去接收父组件提供过来的数据,最后把自身的属性和方法提交

总结介绍H5新晋级标签(附示例)总结介绍H5新晋级标签(附示例)Aug 03, 2022 pm 05:10 PM

​本文给大家整理介绍H5新晋级标签有哪些,希望对需要的朋友有所帮助!

页面h5和php是什么意思?(相关知识探讨)页面h5和php是什么意思?(相关知识探讨)Mar 20, 2023 pm 02:23 PM

HTML5和PHP是Web开发中常用的两种技术,前者用于构建页面布局、样式和交互,后者用于处理服务器端的业务逻辑和数据存储。下面我们来深入探讨HTML5和PHP的相关知识。

h5有哪些缓存机制h5有哪些缓存机制Nov 16, 2023 pm 01:27 PM

H5没有直接的缓存机制,但是通过结合使用Web Storage API、IndexedDB、Service Workers、Cache API和Application Cache等技术,可以实现强大的缓存功能,提高应用程序的性能、可用性和可扩展性,这些缓存机制可以根据不同的需求和应用场景进行选择和使用。详细介绍:1、Web Storage API是H5提供的一种简单等等。

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

SublimeText3 versi Inggeris

SublimeText3 versi Inggeris

Disyorkan: Versi Win, menyokong gesaan kod!

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini