获取位置并上传到数据库
//获取到位置坐标并上传
function getLoction() {
plus.geolocation.getCurrentPosition(function(p) {
// alert('Geolocation:'+p.coordsType+'\nLatitude:' + p.coords.latitude + '\nLongitude:' + p.coords.longitude + '\nAltitude:' + p.coords.altitude)
updateLoction(p.coords.longitude, p.coords.latitude)
}, function(e) {
// alert('Geolocation error: ' + e.message)
}, {
provider: 'baidu',
coordsType: "bd09ll"
}); //转化为百度地图坐标以便在百度地图上显示(以防止在百度地图上显示出现偏差)
}
//上传到数据库
function updateLoction(_lng, _lat) {
var url = ''
var _name = localStorage.getItem(name)
$.ajax({
type: "post",
url: "地址",
async: true, //异步请求
data: {'lng':_lng,'lat':_lat,'name':_name},
dataType: "json",
success: function(data) {
console.log(JSON.stringify(data))
}
});
}
在百度地图上展示坐标
在html文件中引用百度地图api
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=地图key值"></script>
在HTML中加入地图的根元素
<div id="rmap"><span class="loading">地图加载中...</span></div>
获取坐标并在地图中展示地图
<script type="text/javascript">
var map, testData = []
$(function() {
map = new BMap.Map("rmap")
map.centerAndZoom(new BMap.Point(118.171526, 39.669788), 14)
getLoction()
});
// 创建标注
function addMarker() {
var myIcon = new BMap.Icon("../../images/icon_mark.png", new BMap.Size(19, 33))
myIcon.setImageSize(new BMap.Size(19, 33)) //设置图片显示大小
$.each(testData, function(i, row) {
var marker = new BMap.Marker(new BMap.Point(row.lng, row.lat), {
icon: myIcon
});
marker.setLabel(new BMap.Label(row.name, {
offset: new BMap.Size(20, -10)
})); //设置标签显示位置
map.addOverlay(marker)
})
}
//获取位置
function getLoction() {
var url = ''
$.getJSON(url, {}, function(data) {
$.each(data, function(i, row) {
testData.push({
'lng': row.lng,
'lat': row.lat,
'name': row.name
})
})
addMarker()
});
}
</script>