百度地图拖拽marker点击确定按钮后获取百度地图的坐标传给后台

最新推荐文章于 2022-11-14 08:43:47 发布

想吃糖。

最新推荐文章于 2022-11-14 08:43:47 发布

阅读量363

点赞数

本文链接：https://blog.csdn.net/weixin_45574815/article/details/115635106

版权

<!-- 百度地图拖拽marker点击确定按钮后获取百度地图的坐标传给后台 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>点标记可拖拽</title>
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
	
	.anchorBL{display:none;}/* 去掉百度标志 */
    #container {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=NqjroyyWzKHLQfnGEpBzx9Tx9p2Byoyc"></script>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <div id="container" style="width: 800px;height: 500px;margin-left:calc(50% - 400px);"></div>
	<button type="button" id="sure" style="width: 50px; height: 50px;float: right;">确定</button>
</body>
</html>
</script>
<script>
	// 创建Map实例
	var map = new BMapGL.Map('container');
	function zidongqingqiu(){
		$.ajax({
			url:'https://api.map.baidu.com/location/ip?ak=NqjroyyWzKHLQfnGEpBzx9Tx9p2Byoyc&ip=&coor=bd09ll',
			type:"get",		
			/* 处理跨域请求 */
			dataType: "jsonp",
			jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
			jsonpCallback:"message",
					
			success:function(data,mess){
				console.log(data);
				var temp = JSON.stringify(data);	//var temp = JSON.stringify(data);打印出所有数据
				var tempx = JSON.stringify(JSON.parse(temp).content.point.x);
				var tempy = JSON.stringify(JSON.parse(temp).content.point.y);
				var x = tempx.replace(/^\"|\"$/g,'');//去除str 前后的双引号,去掉后就变成数字了!!!
				var y = tempy.replace(/^\"|\"$/g,'');
		 		map.centerAndZoom(new BMapGL.Point(x,y), 12); 
			},
			error:function(err){
			},
		});
	}
	zidongqingqiu();
	// 开启鼠标滚轮缩放	--能够滚动轮子缩放
	map.enableScrollWheelZoom(true); 	
	//增加可拖拽标记并实现拖拽功能
	var ketuozhuai = new BMapGL.Marker(new BMapGL.Point(113.91269016,35.30725756),{
		enableDragging:true
	});	
	map.addOverlay(ketuozhuai);

	var templng;
	var templat;
    ketuozhuai.addEventListener('dragend', function () {
        var nowPoint = ketuozhuai.getPosition(); // 拖拽完成之后坐标的位置
		templng = nowPoint.lng;
		templat = nowPoint.lat;
    });
	// 覆盖物拖拽事件
	$("#sure").click(function(){
		zuobiao(templng,templat);
	});
	
	//var个变量接收传给后台
	function zuobiao(lng,lat){
		alert("经度:"+lng+""+"维度:"+lat);
		$.ajax({
			url:'url',
			success:function(data,mess){
			},
			error:function(err){
			},
		});
	}

</script>

想吃糖。

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
百度地图拖拽marker点击确定按钮后获取百度地图的坐标传给后台

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <title>点标记可拖拽</title> <meta http-equiv="Access-Control-Allow-Origin" content="*"> <m
复制链接

扫一扫