H5使用百度地图SDK获取用户当前位置并且标记显示在地图

代码实现功能：

H5使用百度地图SDK获取用户当前位置并且标记显示在地图，点击该标记弹出一层自定义的HTML。

效果图：

代码：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><!-- <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=GYg8CHIBgITKkneDe7K5ceepLNeMy5BG"></script> --><link rel="import" href="../tskedt/tskedt.html" id="tskedt" /><style type="text/css">body,html,#allmap {width: 100%;height: 100%;overflow: hidden;margin: 0;font-family: "微软雅黑";}</style><title>设置点的新图标</title></head><body><div id="allmap"></div></body>
</html>
<script type="text/javascript">var x,y;function LoadBaiduMapScript() {//console.log("初始化百度地图脚本...");const AK = "GYg8CHIBgITKkneDe7K5ceepLNeMy5BG";const BMap_URL = "https://api.map.baidu.com/api?v=2.0&ak=" + AK + "&s=1&callback=onBMapCallback";return new Promise((resolve, reject) => {let scriptNode = document.createElement("script");scriptNode.setAttribute("type", "text/javascript");scriptNode.setAttribute("src", BMap_URL);document.body.appendChild(scriptNode);// 百度地图异步加载回调处理window.onBMapCallback = function() {console.log("百度地图脚本初始化成功...");resolve(BMap);};});}LoadBaiduMapScript().then((BMapGL) => {// 百度地图API功能var map = new BMapGL.Map("allmap");var geolocation = new BMapGL.Geolocation();geolocation.getCurrentPosition(function(r) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {var mk = new BMapGL.Marker(r.point);map.addOverlay(mk);map.panTo(r.point);// alert('您的位置：' + r.point.lng + ',' + r.point.lat);x=r.point.lng;y=r.point.lat;var point = new BMapGL.Point(x, y);map.centerAndZoom(point, 15);// 创建小车图标var pt = new BMapGL.Point(x, y);var myIcon = new BMapGL.Icon("./img/1.png", new BMapGL.Size(52, 52));var myIcon2 = new BMapGL.Icon("./img/1.png", new BMapGL.Size(52, 52));var marker = new BMapGL.Marker(pt, {icon: myIcon}); // 创建标注var pt2 = new BMapGL.Point(point.x, point.y);// var pt2 = new BMapGL.Point(116.404, 39.935);console.log(point.x)var marker2 = new BMapGL.Marker(pt2, {icon: myIcon2}); // 创建标注// var marker = new BMapGL.Marker(point);  // 创建标注map.addOverlay(marker); // 将标注添加到地图中// map.addOverlay(marker2); // 将标注添加到地图中var opts = {width: 300, // 信息窗口宽度height: 340, // 信息窗口高度title: "任务信息", // 信息窗口标题}var my_html = tskedt.import.body.innerHTML;var infoWindow = new BMapGL.InfoWindow(my_html, opts); // 创建信息窗口对象 marker.addEventListener("click", function() {map.openInfoWindow(infoWindow, point); //开启信息窗口});} else {alert('failed' + this.getStatus());}});})
</script>

完成

H5使用百度地图SDK获取用户当前位置并且标记显示在地图相关推荐

微信小程序之腾讯地图SDK获取当前城市位置信息
例如:小程序首页要显示用户地区需求:用户打开页面自动获取当前位置的定位,小程序wx.openLocation只能获取到经纬度,所以需要用腾讯地图SDK.. 1.引入当前页面js文件中. //qqma ...
手机端或PC端利用高德地图和腾讯地图获取用户当前位置信息
目录一.简介二.高德地图三.腾讯地图四.总结一.简介最近在项目中,有需要使用到获取用户当前地理位置信息的功能,获取当前用户位置保存到数据库中的场景,并且需要支持多种地图定位方式,我这里采用 ...
vue h5微信公众号授权获取用户信息
vue h5微信公众号授权获取用户信息 1.申请测试账号 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 2.修改网页授权 ...
html自动获取用户位置,html5获取用户当前位置
支持地理定位的浏览器有IE9+.Firefox 3.5+ .Opera 10.6+ .Safari 5+ .Chrome.iOS 版Safari.Android版WebKit. navigator.g ...
微信小程序 - 获取用户当前位置信息（用于定位地址及获取地址等需求）
前言有两种获取位置的方式,一种是直接返回经纬度等信息(必须代码处理后才能显示到界面上),另一种是 "界面选择式" 由用户打开地图选择位置. 最近有添加用户收货地址需求(外卖项目 ...
uni-app开发微信小程使用腾讯位置服务获取用户的位置信息
uni-app开发微信小程使用腾讯位置服务获取用户的位置信息一.开通腾讯位置服务二.编码实现 (一)获取定位坐标 (二).在项目中使用一.开通腾讯位置服务在这里我们先要登录腾讯我i之服务的官网 ...
根据经纬度获取用户当前位置信息
根据上篇文章获取的经纬度获取用户当前的位置信息 //获取用户所在位置信息ADDRESS func getUserAddress() { let latitude : CLLocationDegrees ...
如何获取用户当前位置并生成国际拨号前缀+验证不同国家的手机号格式
文章目录前言一.引入并启用API 二.js和html页面代码 1.js代码 2.html代码三.将原生js写在vue项目中前言该demo使用了HTML5的Geolocation API和Go ...
Android中获取用户附近位置
最近项目中要获取用户附近位置,供用户选择,该功能分两步实现,第一,获取用户经纬度,第二利,用经纬度通过现有的地理位置接口获取附近位置,实现截图如下: 一.获取用户的经纬度获取用户的经纬度,之前已经介 ...

H5使用百度地图SDK获取用户当前位置并且标记显示在地图

H5使用百度地图SDK获取用户当前位置并且标记显示在地图相关推荐

最新文章

热门文章