zoukankan      html  css  js  c++  java
  • HTML5获取地理经纬度并通过百度接口得到实时位置

    注:用的时候将获取北京位置那放到获取经度纬度后面即可

    -----------实际用的时候的代码如下:start  --------

    var myCity;
    getLocation()
    function getLocation(){
    //根据IP获取城市
    myCity = new BMap.LocalCity();
    var options={
    enableHighAccuracy:true,
    maximumAge:1000
    }
    if(navigator.geolocation){
    //浏览器支持geolocation
    navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
    }else{
    //浏览器不支持geolocation
    console.log("浏览器不支持");
    }
    }
    function onSuccess(position){
    //position.coords.longitude;//经度
    // position.coords.latitude;//纬度
    console.log(position.coords.longitude)
    setTimeout(function(){
    myCity.get(getCityByIP);
    },500)
    }
    //根据IP获取城市
    function getCityByIP(rs) {
    var cityName = rs.name;
    console.log(rs)
    alert("根据IP定位您所在的城市为:" + cityName);
    }

    //失败时
    function onError(error){
    switch(error.code){
    case 1:
    alert("位置服务被拒绝");
    break;

    case 2:
    alert("暂时获取不到位置信息");
    break;

    case 3:
    alert("获取信息超时");
    break;

    case 4:
    alert("未知错误");
    break;
    }

    }

    ------------------------ end ---------------------

    https://blog.csdn.net/dreamboycx/article/details/52130772

    <!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>获取当前位置</title>
    <style type="text/css">
    html{height:100%}
    body{height:100%;margin:0px;padding:0px}
    #container{height:500px; 500px; margin: 0 auto;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">
    //v2.0版本的引用方式:src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
    //v1.4版本及以前版本的引用方式:src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
    </script>
    </head>

    <body>
    <div style="text-align: center; margin: 20px auto;">
    <p id="demo">点击这个按钮,获得您的经纬度:</p>
    <p id="position"></p>
    <button onclick="getLocation()">获取位置</button>
    </div>
    <div id="container"></div>
    <script type="text/javascript">
    var map;
    var ggPoint;
    var marker;
    function getLocation(){
    //根据IP获取城市
    var myCity = new BMap.LocalCity();
    myCity.get(getCityByIP);
    var options={
    enableHighAccuracy:true,
    maximumAge:1000
    }
    if(navigator.geolocation){
    //浏览器支持geolocation
    navigator.geolocation.getCurrentPosition(onSuccess,onError,options);

    }else{
    //浏览器不支持geolocation
    console.log("浏览器不支持");
    }
    }

    function onSuccess(position){

    var longitude =position.coords.longitude;//经度
    var latitude = position.coords.latitude;//纬度
    document.getElementById("demo").innerHTML = "程序已获取你所在的位置为:<br>经度"+longitude+",纬度"+latitude;

    //--------------设置地图显示----------------
    map = new BMap.Map("container"); // 创建地图实例
    ggPoint = new BMap.Point(longitude, latitude); // 创建点坐标
    map.centerAndZoom(ggPoint, 15); // 初始化地图,设置中心点坐标和地图级别
    //--------------设置地图显示----------------


    var convertor = new BMap.Convertor();
    var pointArr = [];
    pointArr.push(ggPoint);
    convertor.translate(pointArr, 1, 5, translateCallback);





    //--------------设置标注相关-------------------
    /*var marker = new BMap.Marker(point); // 创建点
    map.addOverlay(marker);
    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    marker.enableDragging();//设置点可拖动
    //--------------设置标注相关---------------------


    //--------------获取地理位置---------------------
    var geoc = new BMap.Geocoder();
    geoc.getLocation(point, function(rs){
    var addComp = rs.addressComponents;
    alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
    });*/
    //--------------获取地理位置----------------------







    }



    //坐标转换完之后的回调函数
    function translateCallback(data){
    if(data.status === 0) {
    marker = new BMap.Marker(data.points[0]);
    map.addOverlay(marker);
    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    marker.enableDragging();//设置点可拖动
    marker.addEventListener("dragend",getAttr);
    //alert(marker.getPosition());
    map.setCenter(data.points[0]);
    getPosit(data.points[0]);
    }
    }

    function getAttr(){
    var p = marker.getPosition(); //获取marker的位置
    //alert("marker的位置是" + p.lng + "," + p.lat);
    getPosit(new BMap.Point(p.lng, p.lat));
    }


    function getPosit(obj){
    var geoc = new BMap.Geocoder();
    geoc.getLocation(obj, function(rs){
    var addComp = rs.addressComponents;
    //alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
    var address = "您的地址:" + addComp.province + "," + addComp.city + "," + addComp.district + "," + addComp.street + "," + addComp.streetNumber;
    document.getElementById("position").innerHTML = address;
    //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 onError(error){
    switch(error.code){
    case 1:
    alert("位置服务被拒绝");
    break;

    case 2:
    alert("暂时获取不到位置信息");
    break;

    case 3:
    alert("获取信息超时");
    break;

    case 4:
    alert("未知错误");
    break;
    }

    }


    </script>
    </body>
    </html>

  • 相关阅读:
    some tips
    ORA00847: MEMORY_TARGET/MEMORY_MAX_TARGET and LOCK_SGA cannot be set together
    Chapter 01Overview of Oracle 9i Database Perfomrmance Tuning
    Chapter 02Diagnostic and Tuning Tools
    变量与常用符号
    Chapter 18Tuning the Operating System
    标准输入输出
    Trace files
    DBADeveloped Tools
    Chapter 03Database Configuration and IO Issues
  • 原文地址:https://www.cnblogs.com/chaoyuehedy/p/9291293.html
Copyright © 2011-2022 走看看