<!DOCTYPE html>

<html lang="en">

<head>

    <title>地理定位</title>

    <meta charset="utf-8">

    <style>

        body, html,#map {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

    </style>

    <script type="text/javascript"

            src="http://api.map.baidu.com/api?v=2.0&ak=rdDa3ErxDVOjn9LPD4ocvp08sFG0u1BV">

    </script>

</head>

<body>

<script>

    function success(position ) {

       var la=position.coords.latitude;

         var lo=position.coords.longitude;

        var map = new BMap.Map("map");    // 创建Map实例

        map.centerAndZoom(new BMap.Point(lo, la), 15);  // 初始化地图,设置中心点坐标和地图级别

        map.addControl(new BMap.MapTypeControl());   //添加地图类型控件

        map.setCurrentCity("广州 ");          // 设置地图显示的城市 此项是必须设置的

        map.enableScrollWheelZoom(true);

    }

    function error() {

            alert("不能获取");

    }

    var options={};

    if(navigator.geolocation) {

        navigator.geolocation.getCurrentPosition(success,error,options);

    } else {

        alert("你的浏览器不支持");

    }

</script>

<div id="map"></div>

</body>

</html>

　　2017-09-12  20:14:22

HTML 地理定位 的实例的更多相关文章

  1. HTML5学习笔记 Geolocation（地理定位）

    HTML5 Geolocation(地理定位)用于定位用户的位置. 定位用户的位置 html5 Geolocation API用于获得用户的地理位置 鉴于该特性可能低侵犯用户的隐私,除非用户同意,否则 ...

  2. HTML5调用百度地图API进行地理定位实例

    自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发.虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情.今天为大家带来的是使用HTML5调用百度地图AP ...

  3. HTML5学习总结-03 地理定位

    一 地理定位 HTML5 Geolocation(地理定位)用于定位用户的位置. 1 地理定位 地理位置 经度  :   南北极的连接线 纬度  :   东西连接的线 位置信息从何而来: IP地址 G ...

  4. 用HTML5、地理定位API和Web服务来开发移动应用

    HTML 5 是一项让人振奋的技术,这有着充分的理由.这将会是一次技术突破,因为它可以将桌面应用程序功能带入浏览器中.除了传统浏览器外,对于移动浏览器,其潜力甚至更大.不仅如此,最流行的移动浏览器甚至 ...

  5. HTML5 总结-地理定位-6

    HTML5 地理定位 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Int ...

  6. 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  7. HTML5 — 地理定位

    Geolocation:地理定位,获取当前浏览器所在的地理坐标信息(包括经度.纬度.海拔高度.移动速度),实现LBS应用(Location Based Service)——基于定位的服务,如订   餐 ...

  8. HTML5 Geolocation API地理定位整理（二）

    Geolocation 实例demo 1.使用watchPosition()监听客户端位置 var watchOne=null; if (navigator.geolocation) { //watc ...

  9. HTML5 Geolocation API地理定位整理（一）

    HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Internet Explorer 9+, ...

随机推荐

  1. 阿里云弹性裸金属服务器-神龙架构（X-Dragon）揭秘

    在5月16日的飞天技术会新品直播中,特别邀请了业界知名大咖狒哥以及阿里云虚拟化资深专家旭卿作为现场直播的嘉宾.本次直播主要从产品背景到“X-Dragon架构”,从硬件设备到软件应用来深度的剖析“X-D ...

  2. visual studio 编译报错：未能向文件“....csproj.FileListAbsolute.txt”写入命令行,对路径的访问被拒绝

    在网上开始查找出错的解决方法,终于找到了,原来解决方法这么简单,当初以为是权限的问题,后来发现不是权限问题,在VSS中比以前多了两个目录“bin”和“obj”,可能是有人上传的时候将这两个文件夹一起上 ...

  3. 2018 ACM-ICPC 中国大学生程序设计竞赛线上赛 D Merchandise (斜率优化)

    Description: The elderly aunts always like to look for bargains and preferential merchandise. Now th ...

  4. springboot2.0 Mybatis 整合

    原文:https://blog.csdn.net/Winter_chen001/article/details/80010967 环境/版本一览: 开发工具:Intellij IDEA 2017.1. ...

  5. sqlalchemy.exc.NoForeignKeysError：Can't find any foreign key relationships between

    这句话的意思是,两张表之间的外键找不到,首先看看外键设置正确了没,如果外键没问题,看看是不是_tablename_设置了没,就是再model中,定义类的时候,表格名称要_tablename_设置一下, ...

  6. C# 高性能 TCP 服务的多种实现方式Cowboy.Sockets

      本篇文章的主旨是使用 .NET/C# 实现 TCP 高性能服务的不同方式,包括但不限于如下内容: APM 方式,即 Asynchronous Programming Model TAP 方式,即 ...

  7. Windows 10 Shell命令

    可以在[win+R] run 窗口 和 explorer窗口中使用 在command prompt中使用: C:\Users\a>explorer shell:sendto “ shell:Ac ...

  8. php中的构造函数与析构函数

    PHP面向对象——构造函数.析构函数 __construct.__destruct__construct 构造方法,当一个对象创建时调用此方法,使用此方法的好处是:可以使构造方法有一个独一无二的名称, ...

  9. mariadb（二）增删改

    一.表的结构的增删改 添加数据类型 alter table 表名 add 字段 数据类型: #如果字段存在则会报错 Duplicate column name '字段' #修改数据类型 alter t ...

  10. mysqldump - 备份 MySQL 数据库

    参考资料 备份 备份所有数据库中的所有数据(包括系统数据库) –all-databases 通过 --all-databases 选项备份所有的数据库: mysqldump -uroot -p --a ...