300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 百度地图---通过ip定位获取当前城市

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

时间:2022-10-03 09:47:46

相关推荐

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

实现的功能:

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

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

效果图:

代码:

<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./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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。