地理位置
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;
}
}
- 配置对象 添加位置对象作为第三个参数options（是个对象{enableHeightAcuracy:true,timeout:5000,maximumAge:3000}）
- enableHighAcuracy：true（指示浏览器获取高精度的位置、默认为false，设置为true优先使用GPS定位）
- timeout：5000 （指定获取地理位置的超时时间、默认不限时、单位为毫秒）
- maximumAge：3000 （最长有效期、在重复获取地理位置时，此参数指定多久在此获取位置）
watchPosition(用在移动端，在设备位置发生变化后不断执行，用法和setCurrentPositon相同)
- watchPosition（通常使用在移动端，移动设备位置一旦发生变化，就执行一次，获取位置）
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’); //创建地图对象
var point = new BMap.Point(121.491, 31.233);//创建中心点对象
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：控件的抽象基类，所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。
- NavigationControl：地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
- OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
- ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。
- MapTypeControl：地图类型控件，默认位于地图右上方。
- CopyrightControl：版权控件，默认位于地图左下方。
- GeolocationControl：定位控件，针对移动端开发，默认位于地图左下方。
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>
网友评论