地理位置
if(navigator.geolocation){
alert("您的瀏覽器支持定位！");
}else{
alert("請更新你的瀏覽器檩淋！");
}
getCurrentPostion
if(navigator.geolocation){
alert("您的瀏覽器支持定位！"); navigator.geolocation.getCurrentPosition(successCallback,errorCallback);
}else{
alert("請更新你的瀏覽器模闲！");
}
function successCallback(result){
//console.log(222);
alert(parseInt(result.coords.latitude) +","+ parseInt(result.coords.longitude));
console.log(result);
}
function errorCallback(error){
//console.log(11);
alert(error);
}
if(navigator.geolocation){
alert("您的瀏覽器支持定位！"); navigator.geolocation.getCurrentPosition(successCallback,errorCallback);
}else{
alert("請更新你的瀏覽器崭捍！");
}
function successCallback(position){
//console.log(222);
var coords = position.coords;
var latitude = coords.latitude;
var longitude = coords.longitude;
var accuracy = coords.accuracy;
alert(parseInt(latitude)+","+ parseInt(longitude));
//console.log(result);
}
function errorCallback(error){
//console.log(11);
//alert(error);
switch(error.code){
case 3:
alert("超時尸折，請重試！");
break;
case 2:
alert("位置信息不可用殷蛇！");
break;
case 1:
alert("用戶拒絕了該瀏覽器的位置信息請求翁授！");
break;
case 0:
alert("未知錯誤拣播！");
break;
}
}
- 配置對象 添加位置對象作為第三個參數(shù)options（是個對象{enableHeightAcuracy:true,timeout:5000,maximumAge:3000}）
- enableHighAcuracy：true（指示瀏覽器獲取高精度的位置、默認為false收擦，設置為true優(yōu)先使用GPS定位）
- timeout：5000 （指定獲取地理位置的超時時間、默認不限時谍倦、單位為毫秒）
- maximumAge：3000 （最長有效期塞赂、在重復獲取地理位置時，此參數(shù)指定多久在此獲取位置）
watchPosition(用在移動端昼蛀，在設備位置發(fā)生變化后不斷執(zhí)行宴猾，用法和setCurrentPositon相同)
- watchPosition（通常使用在移動端，移動設備位置一旦發(fā)生變化叼旋，就執(zhí)行一次仇哆，獲取位置）
var watcher;
$('#bt1').click(function(){
if(navigator.geolocation){
alert("您的瀏覽器支持定位！");
watcher = navigator.geolocation.watchPosition(successCallback,errorCallback);
}else{
alert("請更新你的瀏覽器夫植！");
}
})
$('#bt2').click(function(){
if(navigator.geolocation){
//alert("您的瀏覽器支持定位讹剔！");
navigator.geolocation.clearWatch(watcher);
}else{
alert("請更新你的瀏覽器！");
}
})
function successCallback(position){
//console.log(222);
var coords = position.coords;
var latitude = coords.latitude;
var longitude = coords.longitude;
var accuracy = coords.accuracy;
console.log(coords);
alert(parseInt(latitude)+","+ parseInt(longitude));
//console.log(result);
}
function errorCallback(error){
//console.log(11);
//alert(error);
switch(error.code){
case 3:
alert("超時详民，請重試延欠！");
break;
case 2:
alert("位置信息不可用！");
break;
case 1:
alert("用戶拒絕了該瀏覽器的位置信息請求沈跨！");
break;
case 0:
alert("未知錯誤由捎！");
break;
}
}
百度地圖API
<script src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰" type="text/javascript"> </script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background: greenyellow;
}
</style>
</head>
<body>
<div id="map" style="width:100%;height:100%;"></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=5aiK2z3bGTyMnInk6vjL0tZrU8GKHhl9" type="text/javascript"></script>
<script type="text/javascript">
var map = new BMap.Map("map");
map.centerAndZoom('成都',15);
</script>
</body>
</html>
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(callback: function, options: PositionOptions);
geolocation.getCurrentPosition(function(result) {
var latitude = result.latitude;
console.log(latitude);
});
var mp = new BMap.Map(‘map’); //創(chuàng)建地圖對象
var point = new BMap.Point(121.491, 31.233);//創(chuàng)建中心點對象
mp.centerAndZoom(point, 15); //初始化地圖，設置中心和縮放比例饿凛。
var map = new BMap.Map("map");
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(successCallback);
function successCallback(position){
console.log(position);
map.centerAndZoom(position.point,20);
}
map對象常見方法
- enableDragging()/disableDragging() 啟用/禁用地圖拖拽
- enableScrollWheelZoom()/disableScrollWheelZoom() 啟用/禁用滾輪放大縮小
- enableDoubleClickZoom()/disableDoubleClickZoom() 啟用/禁用雙擊放大
- enableKeyboard()/enableKeyboard () 啟用/禁用鍵盤上下鍵移動地圖
- getCenter() 返回當前的中心點對象
百度API控件
- 百度API控件
- Control：控件的抽象基類狞玛，所有控件均繼承此類的方法、屬性涧窒。通過此類您可實現(xiàn)自定義控件心肪。
- NavigationControl：地圖平移縮放控件，PC端默認位于地圖左上方杀狡，它包含控制地圖的平移和縮放的功能蒙畴。移動端提供縮放控件，默認位于地圖右下方呜象。
- OverviewMapControl：縮略地圖控件膳凝，默認位于地圖右下方，是一個可折疊的縮略地圖恭陡。
- ScaleControl：比例尺控件蹬音，默認位于地圖左下方，顯示地圖的比例關系休玩。
- MapTypeControl：地圖類型控件著淆，默認位于地圖右上方劫狠。
- CopyrightControl：版權控件，默認位于地圖左下方永部。
- GeolocationControl：定位控件独泞，針對移動端開發(fā)，默認位于地圖左下方苔埋。
var MapTypeControl = new BMap.MapTypeControl();
map.addControl(MapTypeControl);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background: greenyellow;
}
</style>
</head>
<body>
<button type="button" name="button" id="btn">定位</button>
<div id="map" style="width:100%;height:100%;"></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=5aiK2z3bGTyMnInk6vjL0tZrU8GKHhl9" type="text/javascript"></script>
<script type="text/javascript">
var map = new BMap.Map("map");
initMap();
initPosition();
function initMap(){
var opts = {
anchor: BMAP_ANCHOR_BOTTOM_LEFT,
offset:new BMap.Size(200,200),
type:BMAP_NAVIGATION_CONTROL_LARGE
}
map.centerAndZoom("北京",20);
var MapTypeControl = new BMap.MapTypeControl(opts);
map.addControl(MapTypeControl);
var NavigationControl = new BMap.NavigationControl();
map.addControl(NavigationControl);
}
function initPosition(){
$('#btn').click(function(){
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(successCallback);
})
function successCallback(position){
//console.log(position);
//var point = new BMap.Point(latitude,langtitude);
map.centerAndZoom(position.point,20);
//console.log(map.getCenter());
}
}
</script>
</body>
</html>
