html5 geolocation

html5 geolocation与google map

function supports_geolocation() {
  return !!navigator.geolocation;
}

function get_location() {
  if ( supports_geolocation() ) {
    navigator.geolocation.getCurrentPosition(show_map, handle_error);
  } else {
    // no native support;
    $("#msg").text('您的浏览器不支持HTML5 geolocation功能!');
  }
}

function show_map(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    // let's show a map or do something interesting!

    $("#geo-wrapper").css({'width':'956px','height':'400px'});

    var latlng = new google.maps.LatLng(latitude, longitude);
    var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("geo-wrapper"), myOptions);

    var marker = new google.maps.Marker({
        position: latlng,
        title:"You are here (more or less)!"
    });

    // To add the marker to the map, call setMap();
    marker.setMap(map);

    $("#msg").text('确定您的经纬度：');
    $("#lat").text('经度：' + latitude);
    $("#long").text('维度：' + longitude);
}

function handle_error(err) {
  if (err.code == 1) {
    // user said no!
    $("#msg").text('只有选择共享您的个人位置信息才能使用本功能。');
  }
}

get_location();