百度地图javaScript API

一.在html文件中引入

<script src="http://api.map.baidu.com/api?ak=Uk9tDddYkrQImXw8DaG51OHTUCDDIqP5&v=2.0&services=false"></script>
其中ak为百度地图秘钥,需去百度地图开放平台申请

二.js代码

function getLocation ( ){
navigator.geolocation.getCurrentPosition(function (position) { //H5 api
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var point = new BMap.Point(lon, lat); // 创建坐标点
// 根据坐标得到地址描述
var myGeo = new BMap.Geocoder();
myGeo.getLocation(point, function (result) {
that.location = result.addressComponents.city; //获取当前城市
});
});
}

百度地图API示例

1.地图展示
head中引入<script src="http://api.map.baidu.com/api?ak=Uk9tDddYkrQImXw8DaG51OHTUCDDIqP5&v=2.0></script>
body
<div id="allmap"></div>
js
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
2.根据城市名设置地图中心点
var map = new BMap.Map("allmap");  // 创建Map实例
map.centerAndZoom("上海",15); // 初始化地图,用城市名设置地图中心点
3.根据城市名定位
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445); //默认展示的位置
map.centerAndZoom(point,11); function theLocation(){
var city = document.getElementById("cityName").value; //输入的城市名
if(city != ""){
map.centerAndZoom(city,11); // 用城市名设置地图中心点
}
}
4.根据ip定位
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12); function myFun(result){
var cityName = result.name;
map.setCenter(cityName);
alert("当前定位城市:"+cityName);
}
var myCity = new BMap.LocalCity();
myCity.get(myFun);
5.根据浏览器定位
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12); var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
alert('您的位置:'+r.point.lng+','+r.point.lat);
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
//关于状态码
//BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。
//BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
//BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”。
//BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。
//BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”。
//BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”。
//BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)
//BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”。(自 1.1 新增)
//BMAP_STATUS_TIMEOUT 超时。对应数值“8”。(自 1.1 新增)

H5定位的更多相关文章

  1. h5定位geolaction无法调试解决方法

    昨天接到一个在h5获取经纬度的需求,看了文档后,代码其实很简单,但在浏览器上调试就比较蛋疼了... 代码: function successfulCallback(position) { consol ...

  2. h5 定位

    <!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮,获得您的坐标:</p> ...

  3. 利用H5构建地图和获取定位地点

    地图与地理定位 定位在大部分项目中都需要实现,如何实现主要有如下的几种方法 H5定位 在HTML5中navigator有很强大的功能,其中就有定位的方法 navigator.geolocation.g ...

  4. 混合元素app的H5元素定位

    问题思考 在混合开发的App中,经常会有内嵌的H5页面.那么这些H5页面元素该如何进行定位操作呢? 解决思路 针对这种场景直接使用前面所讲的方法来进行定位是行不通的,因为前面的都是基于Andriod原 ...

  5. Appium python自动化测试系列之元素的定位(六)

    ​6.1 常用定位方法讲解 对象定位是自动化测试中很关键的一步,也可以说是最关键的一步,毕竟你对象都没定位那么你想操作也不行.所以本章节的知识我希望大家多动手去操作,不要仅仅只是书本上的知识,毕竟这个 ...

  6. PC端浏览器定位

    第一: PC端浏览器定位(纯前端)浏览器定位 :这里用了两种 ,一种是Html5自带的方法 另一种是引用了百度api  ,百度api 的使用有三种:1 浏览器定位2 ip定位3 SDK辅助定位引用百度 ...

  7. Appium+python自动化(十一)- 元素定位秘籍助你打通任督二脉 - 下卷(超详解)

    简介 宏哥看你骨骼惊奇,印堂发亮,必是练武之奇才! 按照上一篇的节目预告,这一篇还是继续由宏哥给小伙伴们分享元素定位,是不是按照上一篇的秘籍修炼,是不是感觉到头顶盖好像被掀开,内气从头上冒出去,顿时觉 ...

  8. appium定位学习

    前面也介绍过appium的一些定位方法,今天看到一篇博客,里面的方法总结的,就转载过来. 本文转自:https://www.cnblogs.com/Mushishi_xu/p/7685966.html ...

  9. 工作需求——JQ小效果分享下

    一.文字索引效果展示: html布局代码 <ul class="n_areaList"> <li> <h5>当前选择区域</h5> ...

随机推荐

  1. JavaWeb(一)Servlet中的request与response

    一.HttpServletRequest概述 1.1.HttpServletRequest简介 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP ...

  2. zoj 2136 Longest Ordered Subsequence 最长上升子序列 新思路

    Longest Ordered Subsequence Time Limit: 2 Seconds      Memory Limit: 65536 KB A numeric sequence of ...

  3. Interface request structure used for socket ioctl's

    1. 结构体定义 /* * Interface request structure used for socket * ioctl's. All interface ioctl's must have ...

  4. 基于Redis位图实现系统用户登录统计

    项目需求,试着写了一个简单登录统计,基本功能都实现了,日志数据量小.具体性能没有进行测试~ 记录下开发过程与代码,留着以后改进! 1. 需求 1. 实现记录用户哪天进行了登录,每天只记录是否登录过,重 ...

  5. CSS之 z-index 属性

    层叠上下文: 三维概念,表示元素在Z轴的位置 层叠可嵌套,组合成一个分层次上下文  每个层叠上下文和兄弟元素独立,进行层叠变化或渲染时,只考虑后代元素  每个层叠上下是自成体系的 层叠顺序 1 bac ...

  6. 通过 PackageManager 获得你想要的 App 信息

    一.前言 开门见山,开篇明义.有些场景下,我们会需要获取一些其它 App 的各项信息,例如:App 名称,包名.Icon 等.这个时候就需要使用到 PackageManager 这个类了. 本篇就 P ...

  7. 数据库中有的字段为null时,反馈到页面上是什么也不显示?如何用一个【无】字来代替呢?

    <asp:ListView ID="listViewCustomer" DataSourceID="ods_Customer" runat="s ...

  8. event模拟数据库链接

    from threading import Thread,Event,currentThread import time e = Event() def conn_mysql(): count = 1 ...

  9. centos安装SWFtools服务(pdf2swf)

    第一步:下载swftools-0.9.2.tar.gz 第二步:swftools tar -xzvf swftools-0.9.2.tar.gz cd swftools-0.9.2 ./configu ...

  10. C#设计模式之九装饰模式(Decorator)【结构型】

    一.引言 今天我们要讲[结构型]设计模式的第三个模式,该模式是[装饰模式].我第一次看到这个名称想到的是另外一个词语“装修”,我就说说我对“装修”的理解吧,大家一定要看清楚,是“装修”,不是“装饰”. ...