前言

目前我们做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定位的更多相关文章

  1. 手机版的百度map封装,使用gps定位

    代码如下,包自己引 包参考 一个百度MAP导航的基础封装 使用的是浏览器调用gps定位 修改了标注的大小 效果如图: 代码...... <!DOCTYPE html> <html&g ...

  2. 如何利用【百度地图API】进行定位?非GPS定位

    原文:如何利用[百度地图API]进行定位?非GPS定位 如果你可以上网,如果你有火狐浏览器,那么恭喜你.你能很容易使用以下代码进行定位! ------------------------------- ...

  3. GPS定位为什么要转换处理?高德地图和百度地图坐标处理有什么不一样?

    GPS定位为什么要转换处理?高德地图和百度地图坐标处理有什么不一样? 先了解一下 高德地图 采用: GCJ-02 (不可逆) 百度百科: http://baike.baidu.com/link?url ...

  4. 使用百度地图结合GPS进行定位

    本文在上文基础上加入GPS定位功能,实现实时定位,代码如下: Activity: package com.home; import android.app.Activity; import andro ...

  5. ionic基于GPS定位并通过百度地图获取定位详细信息

    相信所有的前端攻城狮都会碰到移动端App.里面获取用户定位信息. 那么问题来了,怎么获取用户的定位信息(经纬度)呢. 当然方法有很多,通过百度地图API 以及 高德地图 API都是可以的.但是两个获取 ...

  6. android 基于百度地图api开发定位以及获取详细地址

    一:百度地图开发必须要到百度开发平台android开发api下载相应的库,已经申请百度地图开发key. 二:新建项目baidumaplocation.设计main.xml文件这里注意的是MapView ...

  7. Android开发之位置定位详解与实例解析(GPS定位、Google网络定位,BaiduLBS(SDK)定位)

    在android开发中地图和定位是很多软件不可或缺的内容,这些特色功能也给人们带来了很多方便.定位一般分为三种发方案:即GPS定位.Google网络定位以及基站定位 最简单的手机定位方式当然是通过GP ...

  8. Android学习-- 基于位置的服务 LBS(基于百度地图Android SDK)--定位SDK

    原文:Android学习-- 基于位置的服务 LBS(基于百度地图Android SDK)--定位SDK 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.ne ...

  9. 在iOS APP中使用H5显示百度地图时如何支持HTTPS?

    现象: 公司正在开发一个iOSAPP,使用h5显示百度地图,但是发现同样的H5页面,在安卓可以显示出来,在iOS中就显示不出来. 原因分析: 但是现在iOS开发中,苹果已经要求在APP中的所有对外连接 ...

随机推荐

  1. 【repost】H5的新特性及部分API详解

    h5新特性总览 移除的元素 纯表现的元素: basefont.big.center.font等 对可用性产生负面影响的元素: frame.frameset.noframes 新增的API 语义: 能够 ...

  2. ReSharper 10.0.0.1 Ultimate 完美破解补丁使用方法

    转自:http://www.leavescn.com/Page/Content.aspx?id=94 ReSharper 10.0.0.1 Ultimate 完美破解补丁使用方法,本资源来自互联网,感 ...

  3. Centos7.0进入单用户模式修改root密码

    启动Centos7 ,按空格让其停留在如下界面. 按e进行编辑 在UTF-8后面输入init=/bin/sh 根据提示按ctrl+x 得如下图 输入mount -o remount,rw /  然后输 ...

  4. Latex 自定义命令:用于一些特殊单词的显示

    \usepackage{xspace} \newcommand{\ie}{{\emph{i.e.}},\xspace} \newcommand{\viz}{{\emph{viz.}},\xspace} ...

  5. Android一些日常的错误

    一.加载.so出现的一些问题 1. so文件 放进了优先级低的ABI目录 问题:如果你的项目中,有其他优先级更好的ABI目录,但是你把ABI文件方法放到了优先级低的目录,最后导致你的ABI文件无法被加 ...

  6. Redis 学习笔记(十二)Redis 复制功能详解 ----- (error) READONLY You can't write against a read only slave

    Redis 复制(Replication)1. 复制介绍分布式数据库为了获取更大的存储容量和更高的并发访问量,会将原来集中式数据库中的数据分散存储到多个通过网络连接的数据存储节点上.Redis为了解决 ...

  7. MySql数据保障

    1, 安装文档 配置文件,目录,参数,用户,权限,程序,安装方式 2, 数据备份 强大的备份策略,

  8. 通过shell快速配置J2EE运行环境

    虽然可以通过已经配置好的docker镜像来快速运行相关环境, 但是 现实往往就是这么残酷+有钱很任性的时候 就是给出了一个装好系统的电脑让配置环境,每次的配置环境变量真的很烦 纯体力活 就简单的写个脚 ...

  9. 昕有灵犀-xyFS私有文件云存储OSS服务

    本工程为本人开发的开源项目,地址: https://gitee.com/475660/xyFS 介绍: 一站式企业私有文件服务.针对软件开发时提供的文件存储系统,对文件上传.下载.分类.分组.审计.统 ...

  10. [视频]K8飞刀 Google黑客功能教程

    [视频]K8飞刀 Google黑客功能教程 链接:https://pan.baidu.com/s/1kbK5jNH8ZaddUEeQ9IwTaw 提取码:lwl6