h5plus获取位置以及在百度地图上显示

获取位置并上传到数据库

//获取到位置坐标并上传
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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值