H5结合百度map实现GPS定位
前言
目前我们做m端时都会用到定位,当用户第一次打开h5页面时会启动gps定位,并结合百度map来查找城市。按照我们的逻辑思路就是gps定位获取经纬度,传到后台调用百度的一个接口查找城市名称。
1、查询得到城市名称,我们根据城市名称在我们自己的数据库里再查询对应的城市id(查询会很频繁,可以基于xml 缓存查询,也可以放到redis里)
2、为了保险起见,我们也会在自己的库里根据经纬度维护一套城市信息,防止接口不可用时不影响定位。
H5 GPS定位
(function () {
var
isGeolocation = false,
lat = 0,
lng = 0,
coords = null;
if (navigator.geolocation) { isGeolocation = true; };
if (isGeolocation) {
function getPosSuccess(position) {
coords = position.coords;
lat = coords.latitude, lng = coords.longitude;
$.ajax({
type: 'GET',
dataType: 'json',
url: '/Home/GetPositionArea',
data: { 'lat': lat, 'lng': lng },
success: function (data) {
}
});
};
function getPosError(err) {
switch (err) {
case err.PERMISSION_DENIED:
console.log("您拒绝了共享位置,可手动选择城市。");
break;
case err.POSITION_UNAVAILABLE:
console.log("无法获取当前位置");
break;
case err.TIMEOUT:
console.log("获取位置超时");
break;
default:
console.log("未知错误");
break;
}
};
navigator.geolocation.getCurrentPosition(getPosSuccess, getPosError, null);
} else {
};
})();
结合百度接口查询具体城市
public JsonResult GetPositionArea(decimal lng, decimal lat)
{
string api =
string.Format(
"http://api.map.baidu.com/geocoder/v2/?output=json&ak=XXXXX&location={0},{1}",
lat, lng); //传入自己的业务参数ak string result = HttpRequestHelper.Get(api); return Json(result, JsonRequestBehavior.AllowGet);
}
H5结合百度map实现GPS定位的更多相关文章
- 手机版的百度map封装,使用gps定位
代码如下,包自己引 包参考 一个百度MAP导航的基础封装 使用的是浏览器调用gps定位 修改了标注的大小 效果如图: 代码...... <!DOCTYPE html> <html&g ...
- 如何利用【百度地图API】进行定位?非GPS定位
原文:如何利用[百度地图API]进行定位?非GPS定位 如果你可以上网,如果你有火狐浏览器,那么恭喜你.你能很容易使用以下代码进行定位! ------------------------------- ...
- GPS定位为什么要转换处理?高德地图和百度地图坐标处理有什么不一样?
GPS定位为什么要转换处理?高德地图和百度地图坐标处理有什么不一样? 先了解一下 高德地图 采用: GCJ-02 (不可逆) 百度百科: http://baike.baidu.com/link?url ...
- 使用百度地图结合GPS进行定位
本文在上文基础上加入GPS定位功能,实现实时定位,代码如下: Activity: package com.home; import android.app.Activity; import andro ...
- ionic基于GPS定位并通过百度地图获取定位详细信息
相信所有的前端攻城狮都会碰到移动端App.里面获取用户定位信息. 那么问题来了,怎么获取用户的定位信息(经纬度)呢. 当然方法有很多,通过百度地图API 以及 高德地图 API都是可以的.但是两个获取 ...
- android 基于百度地图api开发定位以及获取详细地址
一:百度地图开发必须要到百度开发平台android开发api下载相应的库,已经申请百度地图开发key. 二:新建项目baidumaplocation.设计main.xml文件这里注意的是MapView ...
- Android开发之位置定位详解与实例解析(GPS定位、Google网络定位,BaiduLBS(SDK)定位)
在android开发中地图和定位是很多软件不可或缺的内容,这些特色功能也给人们带来了很多方便.定位一般分为三种发方案:即GPS定位.Google网络定位以及基站定位 最简单的手机定位方式当然是通过GP ...
- Android学习-- 基于位置的服务 LBS(基于百度地图Android SDK)--定位SDK
原文:Android学习-- 基于位置的服务 LBS(基于百度地图Android SDK)--定位SDK 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.ne ...
- 在iOS APP中使用H5显示百度地图时如何支持HTTPS?
现象: 公司正在开发一个iOSAPP,使用h5显示百度地图,但是发现同样的H5页面,在安卓可以显示出来,在iOS中就显示不出来. 原因分析: 但是现在iOS开发中,苹果已经要求在APP中的所有对外连接 ...
随机推荐
- qsort例子
#include<stdio.h> #include<stdlib.h> #include<string.h> #include<time.h> typ ...
- [Machine Learning] some concept about the CV
Cross-validation VS SSE CV is not designed to improve the fit on the training data, but it won't nec ...
- 【机器学习】Octave 实现逻辑回归 Logistic Regression
ex2data1.txt ex2data2.txt 本次算法的背景是,假如你是一个大学的管理者,你需要根据学生之前的成绩(两门科目)来预测该学生是否能进入该大学. 根据题意,我们不难分辨出这是一种二分 ...
- 2019.02.26 bzoj4311: 向量(线段树分治+凸包)
传送门 题意: 支持插入一个向量,删去某一个现有的向量,查询现有的所有向量与给出的一个向量的点积的最大值. 思路: 考虑线段树分治. 先对于每个向量处理出其有效时间放到线段树上面,然后考虑查询:对于两 ...
- CPU寻址
CPU组成和寄存器 1)CPU由运算器.控制器.寄存器等器件组成,这些器件靠内部总线相连 2)寄存器是CPU的组成部分,用来暂存指令.数据和地址,CPU对其读写速度是最快的,不需要IO传输 存储单元 ...
- Oracle通过序列+触发器实现主键自增
接触oracle没多久,在建表的时候发现还不会如何设置主键自动增长.和mysql的设置为AUTO_INCREMENT属性相比,要复杂很多,所以现在记录起来. 我使用的是序列+触发器的方式. 现在已经创 ...
- POJ3422费用流
Description: 一个N * N的奖赏地图,你可以走k次这个地图,但是每一次你走过一个有分的节点,你获得得分,但这个节点的得分都要清零,问你走k次地图的最大得分 Solution: 把得分变成 ...
- UniGUI的布局使用说明
(unigui的页面布局还是很强大的,基本什么的排版都能搞好.前面部分为原文章翻译,翻译不一定很准确,就能看吧,后面有使用说明,有什么不明白的欢迎加我QQ(910300653)一起交流学习) 一.布局 ...
- Flask实例化的参数 及 对app的配置
首先展示一下: from flask import Flask app = Flask(__name__) # type:Flask app.config["DEBUG"] = T ...
- [CocoaPods]pod安装与pod更新
简介 许多以CocoaPods开头的人似乎认为pod install只在第一次使用CocoaPods设置项目时使用,pod update之后才会使用.但事实并非如此. 本指南的目的是解释何时使用pod ...