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

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>

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

百度地图--根据经纬度定位
根据经纬度定位 <html> <head> <meta http-equiv="Content-Type" content="text/ht ...
百度地图输入经纬度获取运行轨迹
直接上干货 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf ...
最简洁的方式，实现web端百度地图一键定位导航
web开发过程中经常碰到需要调用百度地图来视线定位导航的过程,许多技术博客上介绍的都是调用百度地图的api,来自定义各种效果,这是一种方式.如果没有特殊需求的话,可以采用笔者下面的方式,一句话就可以实 ...
Android百度地图之位置定位和附近查找代码简单实现 (上)
很长时间没有做Android相关知识了,闲暇之余再弄了弄最新的百度地图API,主要是进行百度地图附近餐馆查找功能来练练手,同时熟悉下最新的API教程.文章比较基础,也希望对你有所帮助~参考前文: ...
百度地图根据经纬度坐标，显示汽车行驶轨迹
继上一篇:百度地图根据经纬度坐标,显示轨迹又进行了些许优化.将固定点为变为汽车行驶轨迹并添加点位. 上一篇链接:https://blog.csdn.net/qq_36865945/article/d ...
vue中调用百度地图获取经纬度
项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度拖动小红标获取经纬度关键词查询获取经纬度前期准备 ...
百度地图三种定位方式测试（高精度、低功耗、仅用设备）
百度地图三种定位方式测试(高精度.低功耗.仅用设备) Android定位SDK自v7.0版本起,按照附加功能不同,向开发者提供了四种不同类型的定位开发包,可根据不同需求,自有选择所需类型的开发包使用. ...
百度地图官方的定位和方法
这几天比较闲,闲来无事就把之前做过项目的东西整理一下,今天要写的是项目中引用百度地图第三方的定位这些,供大家快速的集成和使用.首先在百度地图http://lbsyun.baidu.com/sdk/do ...
html5 geolocation 百度地图,html5 geolocation配合百度地图api实现定位
1.了解html5 geolocation HTML5 Geolocation(地理定位)用于定位用户的位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的.=> 使用 ...
[android] 百度地图开发 (三).定位当前位置及getLastKnownLocation获取location总为空问题
前一篇百度地图开发讲述"(二).定位城市位置和城市POI搜索",主要通过监听对象MKSearchListener类实现城市兴趣点POI(Point of Intere ...

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

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

最新文章

热门文章