您的位置：首页 > 其它

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

2016-12-27 20:54 417 查看

实现的功能：

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

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

效果图：

代码：

<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" onclick="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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 百度地图移动标注经纬度

相关文章推荐

新的分享

章节导航