前言
定位功能的实现方法有很多:
- 使用arcgis api for js中自带的api
- 使用HTML5中的定位来获取当前位置的经纬度,结合arcgis api 实现定位功能
- 使用其他api获取当前位置,如百度、谷歌。
本文使用arcgis api实现定位功能;同时使用HTML5+arcgis api实现定位功能。
提示:以下是本篇文章正文内容,下面案例可供参考
一、arcgis api定位
直接调用arcgis官方api实现定位功能:这个很简单,直接new 一个LocateButton对象,调用startup方法即可,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Location</title>
<script src="https://js.arcgis.com/3.34/"></script>
<link rel="stylesheet" href="https://js.arcgis.com/3.34/esri/css/esri.css">
<style>
#location {
position: absolute;
top: 100px;
left: 30px;
z-index: 50;
}
</style>
<script>
require(["esri/map","esri/dijit/LocateButton","esri/graphic","esri/geometry/Point"], function (Map,LocateButton,Graphic,Point) {
// 加载地图
var map = new Map("mapDiv",{
basemap: "topo",
logo:false
});
//使用arcgis api实现定位,主要使用的是LocateButton控件。
var locateButton = new LocateButton({
map:map
}, "location");
locateButton.startup();
});
</script>
</head>
<body>
<div id="mapDiv">
<div id="location"></div>
</div>
</body>
</html>
结果如下:
定位前:
定位后:
二、HTML5+Arcgis JS实现定位
2.1 利用HTML5获取当前位置的经纬度
代码如下(示例):
定位:
//从HTML5上获取得到浏览器定位位置的经纬度。
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else{
alert("浏览器不支持地理定位。");
}
}
定位成功,获取定位信息:
//成功获取到定位的经纬度,利用arcgis api跳转到定位所在的位置
function showPosition(position){
console.log(position);
var lat = position.coords.latitude; //纬度
var lag = position.coords.longitude; //经度
console.log('纬度:'+lat+',经度:'+lag);
map.centerAndZoom(new Point(lag, lat), 12);
map.graphics.add(new Graphic(new Point(lag, lat), new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,17,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0,0.75]), 1),
new Color([0,0,255,0.25]))));
console.log("map-->",map);
}
定位失败
//获取失败的回调函数
function showError(error){
switch(error.code) {
case error.PERMISSION_DENIED:
alert("定位失败,用户拒绝请求地理定位");
break;
case error.POSITION_UNAVAILABLE:
alert("定位失败,位置信息是不可用");
break;
case error.TIMEOUT:
alert("定位失败,请求获取用户位置超时");
break;
case error.UNKNOWN_ERROR:
alert("定位失败,定位系统失效");
break;
}
}
2.2 点击按钮执行定位
代码如下(示例):
//点击定位按钮,执行获取HTML5的定位信息,并在获取成功的回调函数中进行跳转到定位位置
document.getElementById("locationByHTML").onclick = function () {
getLocation();
};
2.3 全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Location</title>
<script src="https://js.arcgis.com/3.34/"></script>
<link rel="stylesheet" href="https://js.arcgis.com/3.34/esri/css/esri.css">
<style>
#location {
position: absolute;
top: 100px;
left: 30px;
z-index: 50;
}
</style>
<script>
require(["esri/map","esri/dijit/LocateButton","esri/graphic","esri/geometry/Point","esri/symbols/SimpleMarkerSymbol","esri/Color","esri/symbols/SimpleLineSymbol"], function (Map,LocateButton,Graphic,Point,SimpleMarkerSymbol,Color,SimpleLineSymbol) {
// 加载地图
var map = new Map("mapDiv",{
basemap: "topo",
logo:false
});
//使用arcgis api实现定位,主要使用的是LocateButton控件。
var locateButton = new LocateButton({
map:map
}, "location");
locateButton.startup();
//从HTML5上获取得到浏览器定位位置的经纬度。
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else{
alert("浏览器不支持地理定位。");
}
}
//成功获取到定位的经纬度,利用arcgis api跳转到定位所在的位置
function showPosition(position){
console.log(position);
var lat = position.coords.latitude; //纬度
var lag = position.coords.longitude; //经度
console.log('纬度:'+lat+',经度:'+lag);
map.centerAndZoom(new Point(lag, lat), 12);
map.graphics.add(new Graphic(new Point(lag, lat), new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,17,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0,0.75]), 1),
new Color([0,0,255,0.25]))));
console.log("map-->",map);
}
//获取失败的回调函数
function showError(error){
switch(error.code) {
case error.PERMISSION_DENIED:
alert("定位失败,用户拒绝请求地理定位");
break;
case error.POSITION_UNAVAILABLE:
alert("定位失败,位置信息是不可用");
break;
case error.TIMEOUT:
alert("定位失败,请求获取用户位置超时");
break;
case error.UNKNOWN_ERROR:
alert("定位失败,定位系统失效");
break;
}
}
//点击定位按钮,执行获取HTML5的定位信息,并在获取成功的回调函数中进行跳转到定位位置
document.getElementById("locationByHTML").onclick = function () {
getLocation();
};
});
</script>
</head>
<body>
<div id="mapDiv">
<div id="location"></div>
</div>
<button id="locationByHTML">locationByHTML</button>
</body>
</html>
总结
两种方式均实现了定位。