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

百度地图API应用实例

最新推荐文章于 2024-10-22 10:49:48 发布

原创最新推荐文章于 2024-10-22 10:49:48 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery百度地图调用

实训笔记专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用百度地图API在网页上展示地图，并通过jQuery实现点击事件来显示特定位置。详细步骤包括申请百度地图AK、引入JS文件、设置点击事件等。

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>";