百度地图---通过ip定位获取当前城市

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/moniteryao/article/details/53898967

实现的功能:

商户注册,有坐标这个字段,通过此功能,商户在地图上自行移动标注来获取经纬度坐标,

下边怎么使用,可自由发挥了。

效果图:


代码:

<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,
			#allmap {
				width: 100%;
				height: 500px;
				overflow: hidden;
				margin: 0;
				font-family: "微软雅黑";
			}
		</style>
		<link rel="stylesheet" type="text/css" href="__TMPL__Public/simpleboot/bootstrapvalidator/vendor/bootstrap/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="__TMPL__Public/simpleboot/bootstrapvalidator/dist/css/bootstrapValidator.css" />

		<script type="text/javascript" src="__TMPL__Public/simpleboot/bootstrapvalidator/vendor/jquery/jquery.min.js"></script>
		<script type="text/javascript" src="__TMPL__Public/simpleboot/bootstrapvalidator/vendor/bootstrap/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="__TMPL__Public/simpleboot/bootstrapvalidator/dist/js/bootstrapValidator.js"></script>
		<script type="text/javascript" src="__TMPL__Public/js/iframeHeigth.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=这里的ak需要自己去百度地图申请的"></script>
		<title>IP定位获取当前城市</title>
	</head>

	<body style="height: 600px;">
		<div id="allmap"></div>
		<div id="info" style="margin-top:20px;color:#000000;text-align: center;font-size: 18px;">当前坐标:<span id="sppoint"></span>
		</div>
		<div class="" style="text-align: center;margin-top:20px;">
			<button type="button" class="btn btn-primary" οnclick="savepoint()" style="width: 200px;">保存坐标</button>
		</div>
	</body>

</html>
<script type="text/javascript">
	function savepoint() {//保存坐标的事件,根据自己的需求,传值咯
		var point = $("#sppoint").text();
		if(point.length < 10) {
			alert("坐标不正确");
			return;
		}
		document.location.href = "__ROOT__/user/Mqiye/getbaseinfo?point=" + point;
	}
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(116.331398, 39.897445);

	var top_left_navigation = new BMap.NavigationControl();
	map.addControl(top_left_navigation);

	var marker = new BMap.Marker(point); // 创建标注
	map.addOverlay(marker);

	function myFun(result) {
		$("#sppoint").text(result.center.lng + "," + result.center.lat);
		var cityName = result.name;
		map.setCenter(cityName);

		var marker = new BMap.Marker(result.center); // 创建标注
		map.centerAndZoom(result.center, 18);//设置中心点及缩放的比例
		map.addOverlay(marker);//添加标注
		marker.enableDragging();//设置标注可移动

		marker.addEventListener("dragend", function(e) { //拖动事件 
			var pt = e.point;
			var dizhi;
			//			$("#info").html("当前坐标:"+e.point.lng + ", " + e.point.lat);
			$("#sppoint").text(e.point.lng + ", " + e.point.lat);
		});
	}
	//	$(function(){//本来想用异步,实现通过外网IP定位的,本机没法测试,先注释了。
	//		$.ajax({
	//			type:"get",
	//			url:"user/Mqiye/getlatAndlgt",
	//			async:true,
	//			success:function(data){
	//				if(data.success){
	//					var map = new BMap.Map("allmap");
	//					var top_left_navigation = new BMap.NavigationControl(); 
	//					map.addControl(top_left_navigation);
	//					
	//					var point = new BMap.Point(data.lgt,data.lat);
	//					var marker = new BMap.Marker(point);// 创建标注
	//					map.centerAndZoom(point,18);
	//					map.addOverlay(marker); 
	//					marker.enableDragging();
	//					
	//					marker.addEventListener("dragend", function(e){  //拖动事件 
	//						var pt = e.point;
	//						var dizhi;
	//						$("#info").html(e.point.lng + ", " + e.point.lat);
	//					});
	//				}
	//			}
	//		});
	//	});
	var myCity = new BMap.LocalCity();
	myCity.get(myFun);
</script>


展开阅读全文

没有更多推荐了,返回首页