一、ジオロケーションAPI
ブラウザがサポートgeopositioningかどうかをチェックします
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "该浏览器不支持获取地理位置。";
}
}現在の位置を取得します
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;
}
}連続的な監視位置情報
navigator.geolocation.watchPosition(showPosition, showError);位置情報の監視を停止します
navigator.geolocation.clearWatch(watchId);第二に、BaiduのAPI
ステップ
1 、登録Baiduはで、アカウントhttp://lbsyun.baidu.com/apiconsole/key?application=key ページのアプリケーションキー（AK）
2、ページの紹介：ます。<script type = "text / javascriptの" SRC = "http://api.map.baidu.com/api?v=2.0&ak= あなたのキー"> </ SCRIPT>
3 、マップが必要とするHTML ページに表示するためには、コンテナとしての要素を。ここでは、作成するdiv 要素を。
<BODY> <DIV ID = "allmap"> </ div> </ BODY>
4 、インスタンス化マップ
ます。<script type = "text / javascriptの">
// BaiduのマップのAPIの機能
VARマップ=新BMap.Map（ "allmap"）;
map.centerAndZoom（新しいBMap.Point（120.378386,30.309756）、 15）; // マップ座標を初期化するためによれ
map.enableScrollWheelZoom（真の）;
Map.addControl（新しいBMap.NavigationControl（））; // パンとズームコントロール
Map.addControl（新しいBMap.ScaleControl（））; // スケール
Map.addControl（新しいBMap.OverviewMapControl（））; // マップのサムネイル
Map.addControl（新しいBMap.MapTypeControl（））; // マップタイプ
map.setCurrentCity（「杭州」）; // 都市情報を設定する場合にのみ、MapTypeControl 切り替え機能を使用することができます
// 追加コールアウト
VARマーカーが新しいBMap.Markerを=（新しいBMap.Point （120.378386,30.309756））; // 寸法を作成します。
map.addOverlay（マーカー）; // マップに追加迎えます
</ SCRIPT>
地図制御
| コントロール | コントロールの抽象基本クラスは、すべてのコントロールは、プロパティをクラスメソッドを継承しています。あなたは、このようなAカスタムコントロールによって達成することができます。 |
| NavigationControl | パン、地図とコントロールをズームし、トップにデフォルトで位置PC端末は、機能をパンとズーム制御マップを含むマップの左。地図の右下にデフォルト位置ズームコントロールを提供する移動端末。 |
| OverviewMapControl | サムネイルマップコントロールは、デフォルトでは、地図の右下に位置しており、それは、折りたたみ可能なサムネイルマップです。 |
| ScaleControl | スケール制御は、デフォルトでは、マップとの間の比を示す、地図の左下に位置しています。 |
| MapTypeControl | マップタイプコントロール、マップ（マップ、衛星、3次元）のデフォルトのトップの右。 |
| CopyrightControl | 著作権制御は、デフォルトでは、マップの左下に位置しています。 |
| GeolocationControl | マップの左下にデフォルトで位置する移動端末の開発、のコントロールを配置します。 |
覆い地図
| オーバーレイ | 抽象ベースクラスは、すべてのそのような方法が継承される被覆材料を被覆します。 |
| マーカー | マークは、カスタマイズ可能なアイコンをマークし、マップ上のポイントを表します。 |
| ラベル | 地図上のマークされたテキストを表し、あなたはテキストラベルをカスタマイズすることができます。 |
| ポリライン | 彼は、地図上にポリラインを表します。 |
| ポリゴン | 彼は、地図上のポリゴンを表しています。ポリゴン閉じたポリラインに似ているが、あなたはまた、塗りつぶしの色を追加することができます。 |
| サークル | マップ上に円を表します。 |
| 情報ウィンドウ | 情報ウィンドウも特殊なカバーである、それは豊かなテキストおよびマルチメディアメッセージを表示することができます。注：同時に、1つのメッセージのみのウィンドウが地図上に開きます。 |
例
<!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>
