如何根据数据库保存的经度纬度使用百度API定位到

来源：互联网发布：好的自考软件编辑：程序博客网时间：2024/05/17 00:53

1 . 首先需要申请一个百度地图AK

2 . 引用js（<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=申请的AK"></script>）

3 . 在 jQuery 中应用

(PS : 由于这个<td>是JSON遍历出来的，"class" 名都一样，点击事件$("body").on("click",".glyphicon-globe",function(){} 这样写)

jsp页面

<div class="addmask" style="display: none;"><div class="map"><p>顾客评价位置</p><i class="close"><span class="glyphicon glyphicon-remove"></span></i><div class="wap"><div id="container"></div></div></div></div>

JQuery代码：

$("body").on("click",".glyphicon-globe",function(){var a = $(this).attr("data-a");var b = $(this).attr("data-b");$(".addmask").show("slow");var map = new BMap.Map("container");map.centerAndZoom(new BMap.Point(116.331398,39.897445),11);map.enableScrollWheelZoom(true);if(a != "" && b != ""){map.clearOverlays(); var new_point = new BMap.Point(a,b);var marker = new BMap.Marker(new_point);  // 创建标注map.addOverlay(marker);              // 将标注添加到地图中marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画map.addControl(new BMap.NavigationControl()); //左上角控件map.enableScrollWheelZoom(); //滚动放大map.enableKeyboard(); //键盘放大map.panTo(new_point);     console.log(a+b); }});$("body").on("click",".close",function(){$(".addmask").hide("slow");});});

经纬度data-a,data-b 是在json拼接html中拿到的

html+="<tr><td>"+obj[index].uid+"</td><td>"+obj[index].city+"</td><td>"+obj[index].brand+"</td><td>"+obj[index].shoppe+"<td>132</td>"+"</td><td>"+obj[index].phone+"</td><td>"+obj[index].staffId+"</td><td>"+year+'-'+month+'-'+date+' '+hour+':'+min+':'+sec+"</td><td>"+obj[index].type+"</td><td class='glyphicon-globe' data-a='"+obj[index].longtitude+"' data-b='"+obj[index].latitude+"'></td></tr>";

阅读全文

0 0