95 lines
2.9 KiB
HTML
95 lines
2.9 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>SuperMap iClient for JavaScript</title>
|
|
<style>
|
|
#map{
|
|
border:0px solid;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="js/cordova-2.7.0.js"></script>
|
|
<script src="js/jquery.js"></script>
|
|
<script src="libs/SuperMap.Include.js"></script>
|
|
<script src="js/LocationControl.js"></script>
|
|
<script type="text/javascript">
|
|
var map, layer,markerLayer,locationCtrl;
|
|
function init() {
|
|
SuperMap.Util.setApp(true);
|
|
map = new SuperMap.Map("map",{controls: [
|
|
new SuperMap.Control.ScaleLine(),
|
|
new SuperMap.Control.Zoom(),
|
|
new SuperMap.Control.Navigation({dragPanOptions: {enableKinetic: true}})
|
|
]
|
|
});
|
|
layer = new SuperMap.Layer.CloudLayer();
|
|
markerLayer = new SuperMap.Layer.Markers("Markers");
|
|
map.addLayers([layer,markerLayer]);
|
|
map.setCenter(new SuperMap.LonLat(11615044.272732, 4422334.5114479), 4);
|
|
}
|
|
function locating(){
|
|
if(!locationCtrl){
|
|
locationCtrl = new SuperMap.LocationControl();
|
|
}
|
|
locationCtrl.local(onSuccess,onError,5000);
|
|
}
|
|
// 获取位置信息成功时调用的回调函数
|
|
function onSuccess(position) {
|
|
transCoordinate(position.lon,position.lat,
|
|
function(position){
|
|
var lat = position.lat;
|
|
var lon = position.lon;
|
|
markerLayer.clearMarkers();
|
|
|
|
var size = new SuperMap.Size(44, 33);
|
|
var offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
|
|
var icon = new SuperMap.Icon("./img/mark.png", size, offset);
|
|
|
|
markerLayer.addMarker(new SuperMap.Marker(new SuperMap.LonLat(lon, lat), icon));
|
|
map.setCenter(new SuperMap.LonLat(lon, lat));
|
|
},
|
|
function(){
|
|
alert("坐标转换失败!");
|
|
}
|
|
);
|
|
}
|
|
// onError回调函数
|
|
function onError(msg) {
|
|
alert(msg);
|
|
}
|
|
//云服务转换坐标
|
|
function transCoordinate(lon,lat,onSuccess,onError){
|
|
var urlCoordinate="http://services.supermapcloud.com/iserver/cloudhandler";
|
|
|
|
var lon_Cloud = lon;
|
|
var lat_Cloud = lat;
|
|
|
|
var param = "{\"x\":" + lon_Cloud + ",\"y\":" + lat_Cloud + "}";
|
|
var data = {"servicename":"coordinateService","methodname":"convertGPS2SM","parameter":param};
|
|
|
|
jQuery.ajax({
|
|
"dataType":"jsonp",
|
|
"jsonp":"jsonp",
|
|
"type":"GET",
|
|
"url":urlCoordinate,
|
|
"data":data,
|
|
"success":function(onSuccess){
|
|
return function(cb){
|
|
var position = {
|
|
"lon":cb.result[0].x,
|
|
"lat":cb.result[0].y
|
|
};
|
|
onSuccess(position);
|
|
}
|
|
}(onSuccess),
|
|
"error":onError
|
|
});
|
|
}
|
|
document.addEventListener("deviceready",init,false);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="map" style="position:absolute;left:0px;right:0px;width:100%;height:100%;"></div>
|
|
<input id="button" style="position:absolute;right:5px;top:5px;z-index:999" value="定位" type="button" ontouchend="locating()"></input>
|
|
</body>
|
|
</html> |