客户端获取商家覆盖物拖拽百度地图经纬度

时间 2019-11-12

标签客户端获取商家覆盖物百度地图经纬度繁體版

原文原文链接

项目中有遇到在建立商家时须要接入百度地图以便获取到商家的精准位置，废话很少说，直接上图javascript

1，首先要先在百度地图api开放平台建立一个应用，获取ak密钥。php

网址：http://lbsyun.baidu.com/index.php?title=jspopularcss

2，建立应用html

3，建立完成后java

下面开始引用百度地图api接口，在百度的示例demo里面有不少接口和示例代码，直接复制粘贴就ok啦jquery

附上项目中写的代码api

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
font-family: "微软雅黑";
}
#allmap {
width: 100%;
height: 500px;
}
p {
margin-left: 5px;
font-size: 14px;
}
</style>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
<title>门店精准定位</title>
</head>
<body>
<div id="allmap"></div>
<p>拖动标志物，获取门店具体位置经纬度</p>
<button id='aa' style="margin-left:500px;">肯定</button>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">

// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
map.centerAndZoom(point, 11);
map.addEventListener("click", function(e){
// alert('当前经度:'+e.point.lng+' , 纬度: '+e.point.lat);
var now_point = new BMap.Point(e.point.lng, e.point.lat );
marker.setPosition(now_point);//设置覆盖物位置
});
var marker = new BMap.Marker(point); //建立marker对象
marker.enableDragging(); //marker可拖拽
//拖拽结束事件
marker.addEventListener("dragend", function(e){
//获取覆盖物位置
var o_Point_now = marker.getPosition();
var lng = o_Point_now.lng;
var lat = o_Point_now.lat;
//e.point.lng 地理经度。
// e.point.lat 地理纬度。
//alert(e.point.lng + "---, " + e.point.lat);
get_lng_lat();
})
map.addOverlay(marker); //在地图中添加marker
// get_lng_lat();
$('#aa').click(function(){
get_lng_lat();
var o_Point_now = marker.getPosition();
var lng = o_Point_now.lng;
var lat = o_Point_now.lat;

//获取到经纬度传值到后台get接收
window.location.href='?m=plugin&p=admin&cn=index1&id=food:sit:shop_edit&bid='+bid+'&lng='+lng+'&lat='+lat;
});
//获取经纬度
function get_lng_lat()
{
//返回覆盖物标注的地理坐标。
var o_Point_now = marker.getPosition();
var lng = o_Point_now.lng;
var lat = o_Point_now.lat;
alert('经度:'+lng+' , 纬度: '+lat);
}

 

</script>

前台页面jsp

好了，具体就是这样，但愿你们多多指正，互相学习，谢谢啦！学习