openlayers结合谷歌api进行地图定位

整个是应用在vue 中 ,在uniapp的webview中镶嵌,
webview的src必须是https,否则谷歌api无法获取gps信息

navigator.geolocation.getCurrentPosition()方法
第一个参数是获取成功的callback函数,
第二个参数是获取失败时调用的函数
第三个是options,可选参数有

1、enableHighAcuracy — 布尔值：表示是否启用高精确度模式，如果启用这种模式，浏览器在获取位置信息时可能需要耗费更多的时间。
2、timeout — 整数：表示浏览需要在指定的时间内获取位置信息，否则触发errorCallback。
3、maximumAge — 整数/常量：表示浏览器重新获取位置信息的时间间隔。

监听的方法navigator.geolocation.watchPosition同上,他会返回一个id

销毁监听
navigator.geolocation.clearWatch()传参监听的id,

 navigator.geolocation.clearWatch(this.watchPositionId);

 getGDM() {let that = this;//初始获取navigator.geolocation.getCurrentPosition((position) => {// 获取Coordinates对象，该对象里包含了详细的地理位置信息var coords = position.coords;// 输出地理位置信息that.setMarker(coords.longitude, coords.latitude);that.center = [coords.longitude, coords.latitude];},(error) => {// 为不同错误代码定义错误提示var errMsg = {1: "用户拒绝了位置服务",2: "无法获取地址位置信息",3: "获取地理位置信息超时",};// 弹出错误提示alert(errMsg[error.code]);},{enableHighAccuracy: true, //开启高精度maximumAge: 1000, //浏览器重新计算位置的时间间隔});//持续监听gps位置变化this.watchPositionId = navigator.geolocation.watchPosition((position) => {// 获取Coordinates对象，该对象里包含了详细的地理位置信息var coords = position.coords;// 输出地理位置信息that.setMarker(coords.longitude, coords.latitude);},(error) => {// 为不同错误代码定义错误提示var errMsg = {1: "用户拒绝了位置服务",2: "无法获取地址位置信息",3: "获取地理位置信息超时",};// 弹出错误提示alert(errMsg[error.code]);},{enableHighAccuracy: true, //开启高精度maximumAge: 500, //浏览器重新计算位置的时间间隔})},setMarker(x, y) {if (x && y && this.positionMarker==null) {//创建一个覆盖物let positionMarker = new Overlay({element: document.getElementById("marker"),positioning: "center-center",id:1});positionMarker.setPosition([x, y]); //设置overlay的位置this.map.addOverlay(positionMarker);//设置地图中心点this.map.getView().animate({center: [x, y],duration: 10,});this.positionMarker = positionMarker;}else{//若不是第一获取,则仅改变覆盖物overlay的位置,不在重新创建this.map.getOverlayById("1").setPosition([x, y])}},

如果是在前端页面上直接使用,则可以使用

<script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false'></script>

进行调用navigator.geolocation的api,也不需要进行https的访问,http就可以了

参考:
https://openlayers.org/
https://blog.csdn.net/iteye_5722/article/details/82681308

openlayers结合谷歌api进行地图定位相关推荐

记录一次vue项目引入GoogleMap API进行地图定位
背景公司项目进行国际化处理,需要将定位信息地图替换成谷歌地图. 一.Google 账号准备用谷歌账户登录谷歌云平台 https://cloud.google.com/maps-platform/? ...
OpenLayers开发离线地图源代码（OpenLayers开发谷歌高德百度地图）
(OpenLayers DEMO)点击下载本案例介绍如何在离线(单机.或局域网无Internet)状态下发布离线地图,且结合OpenLayers做基于地图的二次开发. 一. 离线地图数据下载离 ...
百度、高德、腾讯、天地图、谷歌、必应地图切片切图工具 MapCutter（旧名MapTiler），支持超大图、高清切片、webgl、leaflet、maptalk、openlayers、cesium等
# MapCutter 地图覆盖图瓦片地图(金字塔图)切图工具,支持百度.腾讯.高德.天地图.谷歌.必应地图等,是市面上最易使用的同类软件.. 百度.高德.腾讯.天地图.谷歌.必应等自定义地图/图片叠 ...
关于百度地图js api的getCurrentPosition定位不准确的解决方法
关于百度地图js api的getCurrentPosition定位不准确的解决方法参考文章: (1)关于百度地图js api的getCurrentPosition定位不准确的解决方法 (2)http ...
Android使用高德地图api实现基础定位
Android使用高德地图api实现基础定位(一) 关于会获取SHA1的可自行跳过这一步第二步引用高德sdk 第三步修改MainActivity.java 关于这篇主要讲如何使用高德sdk(不是 ...
vue后台系统管理项目-openlayers地图定位、港口数据标记功能
openlayers地图功能使用openlayers开发实现查找的货源在地图的显示标注,点击货源图标进行当前港口信息显示: 通过查询的港口列表数据,点击当前港口在地图定位显示,添加港口选中标记功能: ...
HTML5+百度地图API实现地理定位
背景如果知道用户在哪里,往往会提高很多Web应用的体验,比如为用户指明方向,对它们要去的地方给出建议,让用户知道它们所在的区域内有哪些人可能会对某个活动感兴趣等等.现在,利用HTML5(以及基于Ja ...
php调用百度地图定位,php用百度地图API进行IP定位和GPS定位
/** * 根据地理坐标获取国家.省份.城市,及周边数据类(利用百度Geocoding API实现) * 百度密钥获取方法:http://lbsyun.baidu.com/apiconsole/key ...
百度地图api，第一次定位成功，后面505错误
百度地图api,第一次定位成功,后面505错误 1.查看key对不对 2.查看AndroidManifest中放的位置对不对,是放在 <application里面与 <activity a ...

openlayers结合谷歌api进行地图定位

openlayers结合谷歌api进行地图定位相关推荐

最新文章

热门文章