js 调用百度地图,并且定位用户地址,显示省市区街,经纬度
网上的一些百度地图例子,基本上没有连套的 定位 例子。下面我分享一套我自己弄的,废话不多说,看代码,里面有注释!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html
{
height: %;
}
body
{
height: %;
margin: 0px;
padding: 0px;
}
#container
{
width:500px;
height: 500px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body onload="enter()">
<div id="container">
</div>
<input id="lng" type="hidden" runat="server" />
<input id="lat" type="hidden" runat="server" /> <script type="text/javascript"> var province=;
var city=;
var district=;
var street=; function enter() {
if (navigator.geolocation) { //调用导航器geolocation函数
navigator.geolocation.getCurrentPosition(loand); //进入总显示函数loand,函数名由自己定
} else {
alert("您的浏览器不支持地理定位");//不支持
}
}
function loand(position) { //主函数
var lat = position.coords.latitude;//y,纬度,通过上面的getCurrentPosition函数定位浏览器位置,从而获取地址
var lon = position.coords.longitude;//x,经度
//alert(lat);
var map = new BMap.Map("container"); //初始化地图类
var point = new BMap.Point(lon,lat); //这里设置刚开始的点所在处
var gc = new BMap.Geocoder(); //初始化,Geocoder类
gc.getLocation(point, function (rs) { //getLocation函数用来解析地址信息,分别返回省市区街等
var addComp = rs.addressComponents;
province = addComp.province;//获取省份
city = addComp.city;//获取城市
district = addComp.district;//区
street = addComp.street;//街 var marker = new BMap.Marker(point); //地图事件类
var opts = {
width: , // 信息窗口宽度
height: , // 信息窗口高度
title: "我所在的地点:<hr />" // 信息窗口标题 ,这里声明下,可以在自己输出的信息里面嵌入html标签的
}
var infoWindow = new BMap.InfoWindow("省份:" + province + ";" + "城市:"
+ city + ";<br /><br />" + "县/区:" + district + ";" + "街道:" + street + ".", opts);
// 创建信息窗口对象,把信息在初始化 地图信息窗口类的同时写进去 marker.enableDragging(); //启用拖拽事件
marker.addEventListener("dragend", function (e) {
gc.getLocation(point, function (rs) {
//由于在getLocation函数返回信息之前,首先执行它下面的代码的,所以要把重新拖动后的代码放到它里面
var addComp = rs.addressComponents;
province = addComp.province;//获取省份
city = addComp.city;//获取城市
district = addComp.district;//区
street = addComp.street;//街
opts = {
width: , // 信息窗口宽度
height: , // 信息窗口高度
title: "现在的位置:<hr />" // 信息窗口标题
}
point = new BMap.Point(e.point.lng, e.point.lat); //标记新坐标(拖拽以后的坐标)
marker = new BMap.Marker(point); //事件类 infoWindow = new BMap.InfoWindow("省份:" + province + ";" + "城市:"
+ city + ";<br /><br />" + "县/区:" + district + ";" + "街道:" + street + ".<br />" +
"经度:" + e.point.lng + "<br />纬度:" + e.point.lat, opts); map.openInfoWindow(infoWindow, point);
//这条函数openInfoWindow是输出信息函数,传入信息类和点坐标
})
}) map.addControl(new BMap.NavigationControl()); //左上角控件
map.enableScrollWheelZoom(); //滚动放大
map.enableKeyboard(); //键盘放大 map.centerAndZoom(point, ); //绘制地图
map.addOverlay(marker); //标记地图 map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
});
} </script>
</body>
</html>
js 调用百度地图,并且定位用户地址,显示省市区街,经纬度的更多相关文章
- js调用百度地图接口
原文:js调用百度地图接口 这是前几天公司做的新项目,上面需要用到地图的数据.第一次做这类型的东西没啥思路,咱们经理说,这东西简单,截个图存文件夹里调整好尺寸,数据库里存上图片的地址动态调用就行了.心 ...
- Node.js调用百度地图Web服务API的Geocoding接口进行点位反地理信息编码
(从我的新浪博客上搬来的,做了一些修改.) 最近迷上了node.js以及JavaScript.现在接到一个活,要解析一个出租车点位数据的地理信息.于是就想到使用Node.js调用百度地图API进行解析 ...
- js调用百度地图api
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- js调用百度地图API创建地图,搜索位置
实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...
- js调用百度地图接口绘制任意多边形并获取每个点的经纬度等
来自:https://blog.csdn.net/u013239236/article/details/52213977 侵删 <!DOCTYPE html> <html> & ...
- JS调用百度地图API标记地点
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- JS调用百度地图。
必要条件:先注册百度开发者账号,然后申请调用地图的密钥(AK). 测试demo: 说明:百度开发平台上有很多demo,如下图:
- js调用百度地图API创建地图
技术交流群:233513714 <html xmlns="http://www.w3.org/1999/xhtml"><head runat="serv ...
- 调用百度地图API的总结
因为项目要用到百度地图,所以先摸索了一下,各种功能官方都有文档,点击可查看,文章的话我就直接写我用到的功能例子了,要用可以直接复制粘贴~ 一.主要涉及到的几个接口(先申请密钥): 1.技术一:坐标转换 ...
随机推荐
- Web前端面试之HTML
1. 对WEB标准以及W3C的理解与认识 web标准规范要求,书写标签闭合.小写.不乱嵌套,可提高搜索机器人对网页内容的搜索几率.--- SEO 使用外链css和js脚本,结构与行为.结构与表现分离, ...
- 【Beta】Daily Scrum Meeting第四次
1.任务进度 学号 已完成 接下去要做 502 修复和完善任务列表界面:将几个数据库操作封装起来 登陆时将返回的个人信息更新到本地数据库 509 创建报课表的API 给所有api添加注释:发布任务到服 ...
- ubuntu环境下vmware取消自动启动服务
概述其实vmware这个服务取不取消,影响不大,主要是我有强迫症,在不用虚拟机的时候,看着vmware占着进程真心不爽,想要解决这个问题,在用虚拟机的时候启动服务,反之,则停.接下来,我说一下实现吧. ...
- ScrollView嵌套RecyclerView时滑动出现的卡顿
原文连接:http://zhanglu0574.blog.163.com/blog/static/113651073201641853532259/ 现象: 一个界面有多个RecyclerView ...
- jquery 购物车飞入效果
github https://github.com/amibug/fly demo https://github.com/amibug/fly
- Android课程---关于数据存储的学习之总结
- Java面试查漏补缺
一.基础 1.&和&&的区别. [概述] &&只能用作逻辑与(and)运算符(具有短路功能):但是&可以作为逻辑与运算符(是“无条件与”,即没有短路的功 ...
- Sequence Project Showplan Operator 序列映射运算符
Sequence Project Showplan Operator 序列映射运算符 序列映射运算符会从一个已经排序的集合里通过不停添加集合里的列执行计算. 运算符根据一个或多个列的值把输入集合分为多 ...
- LVS DR模式 RealServer 为 Windows 2008 R2配置
有3篇文档详细介绍 http://kb.linuxvirtualserver.org/wiki/Windows_Servers_in_LVS/DR_and_LVS/TUN_Clusters http: ...
- ASP.NET MVC 5 入门指南汇总
经过前一段时间的翻译和编辑,我们陆续发出12篇ASP.NET MVC 5的入门文章.其中大部分翻译自ASP.NET MVC 5 官方教程,由于本系列文章言简意赅,篇幅适中,从一个web网站示例开始讲解 ...