地图导航系统免费下载我的位置在线

在线地图经度纬度查询 — 经纬度查询地名|地名查询经纬度 —GPSspg
【如果喜欢请收藏本网址】问题加QQ群 【请勿相信任何手机号定位】
在地图中点击显示经纬度。或输入纬度,经度或地名后查询位置。 &
正在初始化...
我输入的是什么经纬度?
硬件/谷歌地球卫星
腾讯地图/高德地图
支持下列输入格式:纬度在前,若南纬西经值前加-
23.03,113.75 或 -23.03,113.75 或 -23.03,-113.75
23°01′13.93″,113°45′6.35″ 或 23 01 13.93,113 45 6.35
北京市西城区金融大街35号 或 北京市西城区 明苑酒店
&& 交流QQ群:
地图数据由相关地图提供。所有解析结果均只能作为参考,不保证正确性及不承担任何责任。运行效果:
实现代码:
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&HTML5定位&/title&
&meta name=&viewport& content=&width=device-width, initial-scale=1& /&
&script type=&text/javascript& src=&/js/jquery/1.7.2/jquery.min.js&&&/script&
&script type=&text/javascript& src=&http://api./api?v=2.0&ak=wqBXfIN3HkpM1AHKWujjCdsi&&&/script&
&script type=&text/javascript& src=&/map/jsdemo/demo/convertor.js&&&/script&
&style type=&text/css&&
* { margin: 0 padding: 0 }
body { font: normal 100% Helvetica, Arial, sans- text-align: height: 100%; overflow: }
#allmap { width: 100%; height: 100%; position: }
&script type=&text/javascript&&
$(function () {
// 单次位置请求执行的函数
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, locationError);
alert(&你的浏览器不支持 GeoLocation.&);
// 页面加载时执行getLocation函数
//window.onload = getL
$(&#btn&).click(function () {
getLocation();
getLocation();
//定位成功时,执行的函数
function showPosition(position) {
var lon = position.coords.
var lat = position.coords.
// alert(&您位置的经度是:&+lon+& 纬度是:&+lat);
var map = new BMap.Map(&allmap&);
var point = new BMap.Point(&& + lon + &&, && + lat + &&);
map.centerAndZoom(point, 19);
var gc = new BMap.Geocoder();
translateCallback = function (point) {
var marker = new BMap.Marker(point);
map.addOverlay(marker);
map.setCenter(point);
gc.getLocation(point, function (rs) {
var addComp = rs.addressC
if (addComp.province !== addComp.city) {
var sContent =
&&div&&h4 style='margin:0 0 5px 0;padding:0.2em 0'&你当前的位置是:&/h4&& +
&&p style='margin:0;line-height:1.5;font-size:13text-indent:2em'&& + addComp.province + &, & + addComp.city + &, & + addComp.district + &, & + addComp.street + &, & + addComp.streetNumber + &&/p&& +
var sContent =
&&div&&h4 style='margin:0 0 5px 0;padding:0.2em 0'&你当前的位置是:&/h4&& +
&&p style='margin:0;line-height:1.5;font-size:13text-indent:2em'&& + addComp.city + &, & + addComp.district + &, & + addComp.street + &, & + addComp.streetNumber + &&/p&& +
var infoWindow = Window(sContent);
map.openInfoWindow(infoWindow, point);
BMap.Convertor.translate(point, 0, translateCallback);
// 定位失败时,执行的函数
function locationError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert(&User denied the request for Geolocation.&);
case error.POSITION_UNAVAILABLE:
alert(&Location information is unavailable.&);
case error.TIMEOUT:
alert(&The request to get user location timed out.&);
case error.UNKNOWN_ERROR:
alert(&An unknown error occurred.&);
&input type=&button& value=&网页定位-获取我的位置& id=&btn& style=&padding: 10px 20 font-size: 120%;
margin: 20& /&
&div id=&allmap&&
本文已收录于以下专栏:
相关文章推荐
这两天在看在移动端通过浏览器获取地理位置的相关方法,顺便深入了解一下百度地图API的相关功能。
测试实例包含了以下功能:
(1)通过IP地址获取城市地址(并不完全准确,存在代理IP或IP中转时定位与实...
利用HTML5定位功能获取经纬度,在根据经纬度利用百度地图获取位置信息
人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..
用html5的地理定位功能通过手机定位获取当前位置并在地图上居中显示出来,下面是百度地图API的使用过程,有需要的朋友可以参考下
查找了相应的文档,感觉上很多地方要嘛源码不全,要嘛不是考勤签到应用的功能。所以小小总结一下,为了分享过程,总结心得,源代码经测试,不足之处在于首次载入会慢一些,就算阿里的钉钉也存在慢和偏差,技术上我们...
html5获取地理位置 利用百度地图JavaScript API标注。HTML5 Geolocation API 用于获得用户的地理位置。使用时需要用户同意,否则用户位置信息是不可用的。Interne...
地理信息位置的知识整理以及百度地图的应用,知识本身可能枯燥,但以为运用巧妙展现各种精彩!
这里我使用的百度地图JavaScript1.4ban
本文转载自:http://blog.csdn.net/cyzero/article/details/
这两天在看在移动端通过浏览器获取地理位置的相关方法,顺便深入了解一下百度地图AP...
本文介绍使用HTML5 Geolocation API获取当前地理位置,并在百度地图上展示的实例
微信也可用,
HTML5页面调用百度地图API,获取当前位置并导航到目的地
body, html,#allmap {w...
他的最新文章
讲师:董西成
您举报文章:
举报原因:
原文地址:
原因补充:
(最多只允许输入30个字)十年专注于品牌网站建设,低调、高逼格、有情怀的网络应用服务商!
全国服务热线:400-680--
如何在网页中插入百度地图呢?南昌网络公司小虫分享自己的经验:
1.进入:& (创建地图-百度地图API所见即所得工具,百度官方地址,大家放心使用)
2.切换城市,搜索需标注位置。(如下图:)
2.设置地图:大家可以对网站显示地图的宽高进行设置,其余选项不动。
3.添加标注:点击第一个图标后,在右侧找到自己的位置,单击鼠标左键可定位。标记图标处可更换图标形状,名称和备注填入位置相关信息。(如下图:)
4.完成以上3步后,点获取代码。
获取代码如下:(注意:通常我们在网页中只要插入以下代码,小虫标注出来,其余的可不用。)
1.在&head&&/head&间插入下面代码:这是样式和JS脚本。
&!--引用百度地图API--&
&style type=&text/css&&
&&& html,body{margin:0;padding:0;}
&&& .iw_poi_title {color:#CC5522;font-size:14font-weight:overflow:padding-right:13white-space:nowrap}
&&& .iw_poi_content {font:12px arial,sans-overflow:padding-top:4white-space:-moz-pre-word-wrap:break-word}
&script type=&text/javascript& src=&&
2.在&body&&/body&间需要显示地图的位置放入以下代码:(该代码调用地图)
& &!--百度地图容器--&
& &div style=&width:697height:550border:#ccc solid 1& id=&dituContent&&&/div&
3.以下代码放在页面最底端(其实可放在页面任意位置。)
&script type=&text/javascript&&
&&& //创建和初始化地图函数:
&&& function initMap(){
&&&&&&& createMap();//创建地图
&&&&&&& setMapEvent();//设置地图事件
&&&&&&& addMapControl();//向地图添加控件
&&&&&&& addMarker();//向地图中添加marker
&&& //创建地图函数:
&&& function createMap(){
&&&&&&& var map = new BMap.Map(&dituContent&);//在百度地图容器中创建一个地图
&&&&&&& var point = new BMap.Point(115..693851);//定义一个中心点坐标
&&&&&&& map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中
&&&&&&& window.map =//将map变量存储在全局
&&& //地图事件设置函数:
&&& function setMapEvent(){
&&&&&&& map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
&&&&&&& map.enableScrollWheelZoom();//启用地图滚轮放大缩小
&&&&&&& map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
&&&&&&& map.enableKeyboard();//启用键盘上下左右键移动地图
&&& //地图控件添加函数:
&&& function addMapControl(){
&&&&&&& //向地图中添加缩放控件
&var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
&map.addControl(ctrl_nav);
&&&&&&& //向地图中添加缩略图控件
&var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
&map.addControl(ctrl_ove);
&&&&&&& //向地图中添加比例尺控件
&var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
&map.addControl(ctrl_sca);
&&& //标注点数组
&&& var markerArr = [{title:&百恒网络&,content:&电话:3&br/&手机:&,point:&115..693447&,isOpen:1,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
&&& //创建marker
&&& function addMarker(){
&&&&&&& for(var i=0;i&markerArr.i++){
&&&&&&&&&&& var json = markerArr[i];
&&&&&&&&&&& var p0 = json.point.split(&|&)[0];
&&&&&&&&&&& var p1 = json.point.split(&|&)[1];
&&&&&&&&&&& var point = new BMap.Point(p0,p1);
&&&var iconImg = createIcon(json.icon);
&&&&&&&&&&& var marker = new BMap.Marker(point,{icon:iconImg});
&&&var iw = createInfoWindow(i);
&&&var label = new BMap.Label(json.title,{&offset&:new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
&&&marker.setLabel(label);
&&&&&&&&&&& map.addOverlay(marker);
&&&&&&&&&&& label.setStyle({
&&&&&&&&&&&&&&&&&&&&&&& borderColor:&#808080&,
&&&&&&&&&&&&&&&&&&&&&&& color:&#333&,
&&&&&&&&&&&&&&&&&&&&&&& cursor:&pointer&
&&&&&&&&&&& });
&&&(function(){
&&&&var index =
&&&&var _iw = createInfoWindow(i);
&&&&var _marker =
&&&&_marker.addEventListener(&click&,function(){
&&&&&&& this.openInfoWindow(_iw);
&&&&&& });
&&&&&& _iw.addEventListener(&open&,function(){
&&&&&&& _marker.getLabel().hide();
&&&&&& _iw.addEventListener(&close&,function(){
&&&&&&& _marker.getLabel().show();
&&&&label.addEventListener(&click&,function(){
&&&&&&& _marker.openInfoWindow(_iw);
&&&&if(!!json.isOpen){
&&&&&label.hide();
&&&&&_marker.openInfoWindow(_iw);
&&& //创建InfoWindow
&&& function createInfoWindow(i){
&&&&&&& var json = markerArr[i];
&&&&&&& var iw = Window(&&b class='iw_poi_title' title='& + json.title + &'&& + json.title + &&/b&&div class='iw_poi_content'&&+json.content+&&/div&&);
&&& //创建一个Icon
&&& function createIcon(json){
&&&&&&& var icon = new BMap.Icon(&&, new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
&&& initMap();//创建和初始化地图
&&& 当然,如果你想偷懒,将以上对应代码全放在&body&&/body&间也是没问题的,呵呵。
&&& 另外大家也可以通过网站后台添加内容时在编辑器中插入,插入时记得点&源代码&见下图:
&&& 记得在早几年,给大家使用,并能在百度地图搜索时显示标注的位置,后来百度把标注这一功能定位于商业使用。现在都统一用这种API方式来标注,唯一不同的是不能在网络上搜索到所标注的位置了。但小虫认为也挺好用。赞一个。示例成品如下图:
&&& 最近小虫发现百度另一种地图标注方式也挺不错,请查看:
&&& 如果你有多个点,希望标注在同一张地图上。那请看下面这篇文章,有惊喜哦。
欢迎您的光顾,我们将竭诚为您服务&}

我要回帖

更多关于 高德地图在线导航查询 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信