基于HTML5的Geolocation获取地理位置,配合Google Map API反向地址解析(获取用户真实地址)
博客专区 > markYun 的博客 > 博客详情
基于HTML5的Geolocation获取地理位置,配合Google Map API反向地址解析(获取用户真实地址)
markYun 发表于3个月前
基于HTML5的Geolocation获取地理位置,配合Google Map API反向地址解析(获取用户真实地址)
  • 发表于 3个月前
  • 阅读 11
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 获取当前的经纬度位置并显示物理位置在google地图上

  var geocoder;
  var display = "";
  var map;

  function initMap() {
    geocoder = new google.maps.Geocoder();

    if (navigator.geolocation) {
      //获取当前地理位置
      navigator.geolocation.getCurrentPosition(function(position) {
          var coords = position.coords;
          //指定一个google地图上的坐标点,同时指定该坐标点的横坐标和纵坐标
          var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
          var myOptions = {
            zoom: 12, //设定放大倍数
            center: latlng, //将地图中心点设定为指定的坐标点
            mapTypeId: google.maps.MapTypeId.ROADMAP //指定地图类型 
          };
          //创建地图,并在页面map中显示
          map = new google.maps.Map(document.getElementById("map"), myOptions);
          var marker = new google.maps.Marker({
            position: latlng, //将前面设定的坐标标注出来
            map: map //将该标注设置在刚才创建的map中
          });
          //地址名字解析
          geocoder.geocode({
            'location': latlng //纬度/经度坐标
            // 'address': '南京'  string  或者填需要解析的地名.
          }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
             
              display = "地址: " + results[0].formatted_address; //格式化后的最佳匹配地址(地名可小到街道)

            
              var infowindow = new google.maps.InfoWindow({
                content: "<span style='font-size:13px'><b>经纬度: </b>" +
                  "latlng" + latlng + "<br>" + display + "</span>",
                //坐标的偏移量
                pixelOffset: 0,
                position: results[0].geometry.location //GeocoderGeometry 对象

              });
              //默认打开信息窗口,点击也弹出信息窗口
              infowindow.open(map, marker);
              google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, marker);
              });
            } else {
              alert("Geocode was not successful for the following reason: " + status);
            }
          });

        },
        function(error) {
          //处理错误
          switch (error.code) {
            case 1:
              alert("位置服务被拒绝。");
              break;
            case 2:
              alert("暂时获取不到位置信息。");
              break;
            case 3:
              alert("获取信息超时。");
              break;
            default:
              alert("未知错误。");
              break;
          }
        });
    } else {
      alert("你的浏览器不支持HTML5来获取地理位置信息。");
    }
  }

 

共有 人打赏支持
粉丝 84
博文 41
码字总数 50235
×
markYun
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: