美文网首页
js地图定位记录

js地图定位记录

作者: Allen_han | 来源:发表于2017-03-24 15:14 被阅读34次

html,

body {

height: 100%;

}

#map {

width: 100%;

height: 100%;

}

确定

位置定位

var map;

var gpsPoint;

var baiduPoint;

var gpsAddress;

var baiduAddress;

var longitude;

var latitude;

var address;

function getLocation() {//根据IP获取城市  var myCity = new BMap.LocalCity();myCity.get(getCityByIP);//获取GPS坐标  //获取GPS坐标  //获取GPS坐标  if(navigator.geolocation) {navigator.geolocation.getCurrentPosition(showMap, handleError, {enableHighAccuracy: true,maximumAge: 1000});} else {alert("您的浏览器不支持使用HTML 5来获取地理位置服务");}}function showMap(value) {longitude = value.coords.longitude;latitude = value.coords.latitude;map = new BMap.Map("map");alert("坐标经度为:" + latitude + ", 纬度为:" + longitude);gpsPoint = new BMap.Point(longitude, latitude); // 创建点坐标  map.centerAndZoom(gpsPoint, 15);//          //根据坐标逆解析地址  var geoc = new BMap.Geocoder();geoc.getLocation(gpsPoint, getCityByCoordinate);BMap.Convertor.translate(gpsPoint, 0, translateCallback);}translateCallback = function(point) {baiduPoint = point;var geoc = new BMap.Geocoder();geoc.getLocation(baiduPoint, getCityByBaiduCoordinate);}function getCityByCoordinate(rs) {//          gpsAddress = rs.addressComponents;  //          var address = "GPS标注:" + gpsAddress.province + "," + gpsAddress.city + "," + gpsAddress.district + "," + gpsAddress.street + "," + gpsAddress.streetNumber;  //          var marker = new BMap.Marker(gpsPoint);  // 创建标注  //          map.addOverlay(marker);              // 将标注添加到地图中  //          var labelgps = new BMap.Label(address, { offset: new BMap.Size(20, -10) });  //          marker.setLabel(labelgps); //添加GPS标注      }function getCityByBaiduCoordinate(rs) {baiduAddress = rs.addressComponents;address = "您:" + baiduAddress.province + "," + baiduAddress.city + "," + baiduAddress.district + "," + baiduAddress.street + "," + baiduAddress.streetNumber;var marker = new BMap.Marker(baiduPoint); // 创建标注  map.addOverlay(marker); // 将标注添加到地图中  var labelbaidu = new BMap.Label(address, {offset: new BMap.Size(20, -10)});marker.setLabel(labelbaidu); //添加百度标注    }//根据IP获取城市  function getCityByIP(rs) {var cityName = rs.name;//alert("根据IP定位您所在的城市为:" + cityName);  }function handleError(value) {switch(value.code) {case 1:alert("位置服务被拒绝");break;case 2:alert("暂时获取不到位置信息");break;case 3:alert("获取信息超时");break;case 4:alert("未知错误");break;}}function init() {getLocation();}window.onload = init;mui.init();//mui.plusReady(function() {//document.getElementById('fasong').addEventListener('click', function() {//alert("坐标经度为:" + latitude + ", 纬度为:" + longitude);//mui.openWindow({//url: 'tufa.html',//id: 'tufa',//extras: {//latitude: latitude,//longitude: longitude//}//});//});//});var btn1 = document.getElementById("fasong");btn1.addEventListener("click", function() {alert("坐标经度为:" + latitude + ", 纬度为:" + longitude);mui.openWindow({url: 'tufa.html',id: 'tufa',extras: {latitude: latitude,longitude: longitude,address:address}});});

相关文章

  • js地图定位记录

    html, body { height: 100%; } #map { width: 100%; height: ...

  • 8.25兄弟会

    js调用百度地图api实现定位 百度地图的API,接口很丰富,实现定位功能 // 百度地图API功能 varmap...

  • iOS 百度地图方便Mac下打开

    本篇文章记录了: 引入百度地图API 如何显示地图并定位 如何定位获取经纬度 如何通过定位得到城市,国家,街道等信...

  • Android 百度地图

    记录一下百度地图sdk定位功能 LocationUtils Alias.kt

  • 基于fabric的地图定位,SVG热力地图

    基于fabric的地图定位,SVG热力地图 基于fabric的地图定位,SVG热力地图 基于 fabricjs v...

  • 地图定位的不显示

    苹果自带地图定位功能 地图定位 今天要做苹果自带地图定位功能,基于mapkit框架的。怎么也没有找到定位自己的位置...

  • Ionic学习日记10: 百度地图的使用

    前言 练手的使用,边学习边做记录,方便以后的人学习和使用,记录方式按照列表的来1、百度地图的展示2、百度地图的定位...

  • iOS地图和定位

    iOS地图定位 本文发布在http://he8090.cn/2016/07/18/地图与定位/ 导入地图框架 1、...

  • iOS拖动地图选择地点

    项目中写了一个关于拖动地图选择位置的功能,日常记录一下 使用的是高德地图,这里只使用到了定位、地图和搜索的SDK,...

  • iOS 高德地图运动轨迹

    关于运动轨迹,之前研究了一下,发现其实就是对地图定位的记录以及画线,以高德地图为例,高德地图封装了各种各样的方法且...

网友评论

      本文标题:js地图定位记录

      本文链接:https://www.haomeiwen.com/subject/wbrfottx.html