客戶端獲取商家覆蓋物拖拽百度地圖經緯度

時間 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

好了，具體就是這樣，但願你們多多指正，互相學習，謝謝啦！學習

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。