web使用百度地图实现经纬度定位和轨迹

19人阅读 评论(0) 收藏 举报
分类:

1首先成为百度开发者(注意选择浏览器端和JavascriptAPI)


2.申请秘钥(如果不想对访问网址进行限制的话   Referer白名单使用 * )


3.定位的代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String name = (String)request.getAttribute("name");
	String longitude = (String)request.getAttribute("longitude");
	String latitude = (String)request.getAttribute("latitude");
	String time = (String)request.getAttribute("time");
%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
	<style type="text/css">
		body, html,#allmap {
			width: 100%;height: 100%;
			overflow: hidden;margin:0;
			font-family:"微软雅黑";
		}
	</style>
	<title>地图定位</title>
</head>

<body>
	<div id="allmap"></div>
	<div id="map-address0" style="display:none">
   		<p>姓名:<%=name %></p>
   		<p>时间:<%=time %></p>
	</div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMap.Point(104.404, 37.915),11);  // 初始化地图,设置中心点坐标和地图级别
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));	             			
	map.setCurrentCity("西安");          // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	map.setMapStyle({style:'grassgreen'});
	
	// 用经纬度设置地图中心点
	var longitude = <%=longitude%>;
	var latitude = <%=latitude%>;
	if( longitude!=null && latitude != null){
		map.clearOverlays(); 
		var new_point = new BMap.Point(longitude,latitude);
		var infoWindow = new BMap.InfoWindow(document.getElementById("map-address0").innerHTML);
		var marker = new BMap.Marker(new_point);  // 创建标注
		//点击标注显示信息
		marker.addEventListener("click", function(){          
		    this.openInfoWindow(infoWindow);
		});
		map.addOverlay(marker);              // 将标注添加到地图中
		map.panTo(new_point);      
	}
</script>

上面的html接收了经纬度,名字和时间,可以根据这个进行地图定位和设置点击事件(实现定位功能)



轨迹功能,接收到后端传来的一个经纬度的数据后

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="net.sf.json.JSONArray" %>
<%@ page import="net.sf.json.JSONObject" %>

<%
	JSONArray jsonArray = (JSONArray)request.getAttribute("ret");
%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
	<script type="text/javascript" src="/js/jquery-1.8.2.js"></script>
	<style type="text/css">
		body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
		#allmap {height:100%; width: 100%;}
		#control{width:100%;}
	</style>
	<title>行动轨迹</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
	map.enableScrollWheelZoom();
	map.setMapStyle({style:'grassgreen'});
	var json = <%=jsonArray%>;
	var points = [];
	for(var i=0,l=json.length;i<l;i++){
//		var object = json[i];
//		alert(json[i].longitude+json[i].latitude);
		var point = new BMap.Point(json[i].longitude, json[i].latitude);
//		alert(point.longitude+point.latitude);
		points[i]=point;
	}
	var polyline = new BMap.Polyline(points, {strokeColor:"red", strokeWeight:4, strokeOpacity:0.5});   //创建折线
	map.addOverlay(polyline);   //增加折线
</script>


查看评论

iOS GPS定位-地图显示、定位| 高德地图| 百度地图

本课程由扣丁学堂教学总监郭宏志老师讲授,主要讲解了GPS定位这一专题,内容包括:使用mkmapview显示地图、Cllocationmanager获得经纬度、在地图上标注位置、使用clgeocoder、使用高德地图、使用百度地图等知识。
  • 2015年11月26日 14:50

JSP页面使用百度地图定位

  • 2015年08月07日 14:52
  • 97KB
  • 下载

百度地图--根据经纬度定位

根据经纬度定位 body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{height:500px...
  • u011630575
  • u011630575
  • 2015-05-29 20:42:37
  • 3606

百度地图API四:实现轨迹动态回放功能

本文记录 百度地图实现实现 轨迹回放的功能。   所谓轨迹回放功能。 是指选择某个时间段,然后在地图上再现这个时间段内轨迹的出现情况。 什么时候出现了第几个轨迹点。隔几秒出现下一个轨迹 点。...
  • liusaint1992
  • liusaint1992
  • 2015-11-28 15:43:35
  • 20717

【小程序】地图|绘制GPX轨迹

需求概述根据导出的GPX文件,在地图上绘制其路径轨迹。GPX: the GPS Exchange FormatGPX (the GPS Exchange Format) is a light-weig...
  • rolan1993
  • rolan1993
  • 2018-04-02 11:36:35
  • 258

百度地图车辆运动轨迹

先看效果: bolg地址:http://blog.csdn.net/adsdassadfasdfasdf/article/details/7549787       下面是代...
  • adsdassadfasdfasdf
  • adsdassadfasdfasdf
  • 2012-05-09 14:17:24
  • 77385

百度地图——显示小车轨迹动画回放

百度地图,Android显示车辆轨迹动画 初次设计想就用百度自带的显示覆盖物的方式,计算两个坐标点的距离,添加短距离的坐标点,然后在密密麻麻的坐标点之间显示,隐藏覆盖物,形成移动的视觉效果。 后来发现...
  • baidu_16668271
  • baidu_16668271
  • 2016-09-23 17:28:26
  • 3963

百度地图实现轨迹播放

百度地图实现轨迹播放 1、以下代码作为参考,也是实现轨迹的核心代码 2、为什么要帖出这个百度轨迹播放代码,是因为百度实现轨迹回放比高德地图复杂些,另外百度轨迹播放有些细节处理不好会导致使用效果很差,比...
  • ml5271169588
  • ml5271169588
  • 2016-11-18 09:41:04
  • 1111

百度地图API实现轨迹动态回放并控制回放速度

百度地图实现动态回放并控制回放速度,介绍了几个主要函数,代码直接可用。...
  • Coder_XiaoHui
  • Coder_XiaoHui
  • 2017-03-29 21:30:22
  • 4944

html5定位经纬度不准确,转换百度地图API

使用过html5定位,通过百度地图转化,感觉位置还是很精确,误差也在十来米左右的样子,不通过转换的定位,位置相差很远。现在这个方法就基本很准确了...
  • nvzizhou
  • nvzizhou
  • 2016-08-30 17:17:02
  • 9484
    个人资料
    持之以恒
    等级:
    访问量: 2529
    积分: 151
    排名: 110万+
    文章分类
    文章存档
    最新评论