zoukankan      html  css  js  c++  java
  • html5获取经纬度 结合百度地图获取省市区

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    
    <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <title>demo</title>
    </head>
    
    <body>
    </body>
    
    </html>
    <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
    <script type="text/javascript">
      function getLocation() {
        var options = {
          enableHighAccuracy: true,
          maximumAge: 1000
        }
        alert('this is getLocation()');
        if (navigator.geolocation) {
          //浏览器支持geolocation
          navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
        } else {
          //浏览器不支持geolocation
          alert('您的浏览器不支持地理位置定位');
        }
      }
    
      //成功时
      function onSuccess(position) {
        console.log(position);
        //返回用户位置
        //经度
        var longitude = position.coords.longitude;
        //纬度
        var latitude = position.coords.latitude;
        alert('当前地址的经纬度:经度' + longitude + ',纬度' + latitude);
        //根据经纬度获取地理位置,不太准确,获取城市区域还是可以的
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(longitude, latitude);
        var gc = new BMap.Geocoder();
        gc.getLocation(point, function (rs) {
          var addComp = rs.addressComponents;
          alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " +
            addComp.streetNumber);
        });
        // 这里后面可以写你的后续操作了
        console.log(longitude, latitude);
      }
      //失败时
      function onError(error) {
        switch (error.code) {
          case 1:
            alert("位置服务被拒绝");
            break;
          case 2:
            alert("暂时获取不到位置信息");
            break;
          case 3:
            alert("获取信息超时");
            break;
          case 4:
            alert("未知错误");
            break;
        }
        // 这里后面可以写你的后续操作了
        // //经度
        // var longitude = 23.1823780000;
        // //纬度
        // var latitude = 113.4233310000;
        console.log(longitude, latitude);
      }
    
      // 页面载入时请求获取当前地理位置
      window.onload = function () {
        // html5获取地理位置
        getLocation();
      };
    </script>
    
    
    <!-- 参考 -->
    <!-- https://www.ucloud.cn/yun/21235.html -->

    在谷歌浏览器好像失败,在苹果电脑浏览器是可以的,手机自带gps,是没问题的

  • 相关阅读:
    flutter常用内置动画组件
    flutter中的生命周期函数
    Flutter打开第三方应用
    在windows系统搭建并运行一个Flutter项目
    在windows系统搭建Flutter开发环境
    axios的get请求无法设置Content-Type
    解决vue中使用laydate.js选择日期后再修改其他model时日期会被清空问题
    Git commit时提示错误时    解决办法
    CSS3 @font-face属性
    解决webstorm本地IP访问页面出错的问题
  • 原文地址:https://www.cnblogs.com/-roc/p/14633518.html
Copyright © 2011-2022 走看看