一, API de geolocalización
Comprobar si los soportes del navegador geoposicionada
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "该浏览器不支持获取地理位置。";
}
}Obtener la ubicación actual
navigator.geolocation.getCurrentPosition(showPosition, showError);
function showPosition(position) {
x.innerHTML = "纬度: " + position.coords.latitude +"<br>经度: " + position.coords.longitude;
}
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML = "请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "未知错误。"
break;
}
}información de monitorización continua de la ubicación
navigator.geolocation.watchPosition(showPosition, showError);Detener la supervisión de la información de ubicación
navigator.geolocation.clearWatch(watchId);En segundo lugar, Baidu API
paso
1 representan, Baidu registrados, en http://lbsyun.baidu.com/apiconsole/key?application=key clave de aplicación de la página (AK)
2, la introducción página: <script type = "text / javascript" src = "http://api.map.baidu.com/api?v=2.0&ak= su clave "> </ script>
3 , un mapa requiere HTML elemento como un contenedor, con el fin de mostrar en la página. Aquí creamos un div elemento.
<Body> <div id = "allmap"> </ div> </ body>
4 , un mapa de instancias
<Script type = "text / javascript">
// Baidu mapas API función
mapa var = nuevo BMap.Map ( "allmap");
map.centerAndZoom (nueva BMap.Point (120.378386,30.309756), 15); // Según inicializar las coordenadas de mapa
map.enableScrollWheelZoom (true);
Map.addControl (nueva BMap.NavigationControl ()); // panorámica y zoom controles
Map.addControl (nuevo BMap.ScaleControl ()); // Escala
Map.addControl (nueva BMap.OverviewMapControl ()); // miniatura mapa
Map.addControl (nuevo BMap.MapTypeControl ()); // tipo de mapa
map.setCurrentCity ( " Hangzhou "); // Sólo cuando ajusta la información de la ciudad, MapTypeControl la función de conmutación se puede utilizar
// llamadas add
marcador var = nuevo BMap.Marker (nuevo BMap.Point (120.378386,30.309756)); // Crear Dimensiones
Map.addOverlay (marcador); // marcará añadido al mapa
</ Script>
el control del mapa
| Controlar | clase base abstracta para los controles, todos los controles se heredan métodos de clase, propiedades. Puede lograrse mediante dicho control una costumbre. |
| NavigationControl | Mapa de panorámica y zoom controles, terminal PC se encuentra por defecto en la parte superior izquierda del mapa que contiene el mapa de control de panorámica y de zoom capacidades. terminal móvil que proporciona controles de zoom, que se encuentra por defecto en la parte inferior derecha del mapa. |
| OverviewMapControl | Miniatura control del mapa, el valor predeterminado se encuentra en la parte inferior derecha del mapa, se trata de un mapa en miniatura plegable. |
| ScaleControl | control de escala, el valor predeterminado se encuentra en la parte inferior izquierda del mapa, que muestra la relación entre el mapa. |
| MapTypeControl | Mapa de control de tipo, el derecho de la parte superior por defecto del mapa (mapa, satélite, tridimensional). |
| CopyrightControl | control de los derechos de autor, por defecto se encuentra en la parte inferior izquierda del mapa. |
| GeolocationControl | controles de posicionamiento para el desarrollo terminal móvil, que se encuentra por defecto en la parte inferior izquierda del mapa. |
mapas que cubren
| Cubrir | clase base abstracta material de cubierta, que abarca todas tales métodos se heredan. |
| Marcador | Marca representa el punto en el mapa, marcado iconos personalizables. |
| Etiqueta | Representa un texto marcado en el mapa, puede personalizar la etiqueta de texto. |
| polilínea | Él representa polilínea en el mapa. |
| Polígono | Él representa polígono en el mapa. Polígono semejante a una línea poligonal cerrada. Como alternativa, también se puede añadir un color de relleno. |
| Circulo | Representar el círculo en el mapa. |
| InfoWindow | ventana de información es también una cubierta especial, que puede mostrar más ricos mensajes de texto y multimedia. Nota: Al mismo tiempo, sólo una ventana de mensajes se abre en el mapa. |
Ejemplo
<!DOCTYPE html>
<html>
<title>Geolocation和百度地图API进行地理定位实例</title>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
body, html,#container {
width: 100%;
height: 100%;
overflow: hidden;
margin:0;
font-family:"微软雅黑";
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=134db1b9cf1f1f2b4427210932b34dcb"></script>
</head>
<body>
<div id="status" style="text-align: center"></div>
<div id="container"></div>
</body>
</html>
<script type="text/javascript">
//默认地理位置设置为上海市浦东新区
var x = 121.48789949,y = 31.24916171;
var tip = document.getElementById("status");
window.onload = function() {
if(navigator.geolocation) {
// navigator有3个方法:clearWatch、getCurrentPosition、watchPosition
navigator.geolocation.getCurrentPosition(showPosition);
// 百度地图API功能
var map = new BMap.Map("container", {enableMapClick:false}); // 创建Map实例
var point = new BMap.Point(x,y); // 设置中心点坐标
map.centerAndZoom(point,12); // 初始化地图,设置中心点坐标和地图级别、
map.addControl(new BMap.MapTypeControl()); // 添加地图类型
map.addControl(new BMap.OverviewMapControl()); // 添加地图类型控件
map.addControl(new BMap.ScaleControl()); // 地图添加比例尺
map.addControl(new BMap.NavigationControl()); // 地图添加缩放比例
map.setCurrentCity("上海"); // 设置地图显示的城市,此项是必须设置的
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
var geolocation = new BMap.Geolocation(); // geolocation 有2个方法:getCurrentPosition、getStatus
geolocation.getCurrentPosition(
function(r){ // 成功的回调
console.log("通过百度地图定位");
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
}else {
alert('failed'+this.getStatus()); // 此处的this指代 geolocation
}
},
function(error){ // 失败的回调
switch(error.code) {
case error.TIMEOUT:
tip.innerHTML = "A timeout occured! Please try again!发生超时！请重试！";
break;
case error.POSITION_UNAVAILABLE:
tip.innerHTML = 'We can\'t detect your location. Sorry!我们无法探测到你的位置,对不起！';
break;
case error.PERMISSION_DENIED:
tip.innerHTML = 'Please allow geolocation access for this to work.请允许访问地理位置';
break;
case error.UNKNOWN_ERROR:
tip.innerHTML = 'An unknown error occured!发生未知错误！';
break;
}
},{
// 指示浏览器获取高精度的位置，默认为false
enableHighAccuracy: true,
// 指定获取地理位置的超时时间，默认不限时，单位为毫秒
timeout: 5000,
// 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
maximumAge: 3000
})
return;
}
alert("你的浏览器不支持获取地理位置！");
};
function showPosition(position){ // 成功的回调
console.log("通过原生H5的geolocation定位");
x = position.coords.latitude; // 维度
y = position.coords.longitude; // 经度
};
</script>
