web百度地图跨域问题

//根据经纬度获取地理位置信息function latOrLng(sLat, sLng) {
var resUrl = ' http://api.map.baidu.com/geocoder/v2/?ak=FSRidxf6b5vc9CPCYN7omiX20HzZpGvd&location=' + sLat + ',' + sLng + '&output=json&pois=1';
$.ajax({
type: "get", //jquey是不支持post方式跨域的 
async: false,
url: resUrl, //跨域请求的URL  dataType: "jsonp",
//传递给请求处理程序,用以获得jsonp回调函数名的参数名(默认为:callback)  jsonp: "callback",
beforeSend: function(msg) {
$("#showmsg").html("正在查询您的绑定信息……");
},//成功获取跨域服务器上的json数据后,会动态执行这个callback函数  success: function(data) {
addresslist.innerHTML = '';
for(var i = 0; i < data.result.pois.length; i++) {
var template = '<li class="mui-table-view-cell" baiduAddress="' + data.result.pois[i]['addr'] + '" lat="' + data.result.pois[i].point.y + '" lng="' + data.result.pois[i].point.x + '">' +
'<p class="address-title">' + data.result.pois[i]['name'] + '</p>' +
'<img class="addressImg" src="../../images/address.png" />' +
'<p class="address">' + data.result.pois[i]['addr'] + '</p>' +
'</li>';
addresslist.innerHTML += template;
}
cellclickmy();
}
});
}
 

转载于:https://www.cnblogs.com/tian-sun/p/7404342.html

<think>好的,用户想在Java Web应用中集成百度地图导航功能。首先,我需要回顾之前提供的引用内容,看看有没有相关的实现方法。引用[2]提到在JSP文件中嵌入百度地图API,并替换密钥。引用[3]则涉及经纬度获取和距离计算,这可能与导航相关。不过导航功能通常需要路径规划和显示,可能需要调用百度地图的导航接口。 接下来,我需要确认用户的需求具体是什么。导航功能可能包括显示地图、路线规划、起输入、导航提示等。根据百度地图API文档,Web端实现导航通常使用JavaScript API,而Java后端处理业务逻辑,比如获取用户位置、存储地址等。 用户是Java Web项目,所以可能需要前后端分离的结构。前端JSP或HTML中使用JavaScript调用百度地图API,后端Java处理数据。例如,用户输入起和终前端通过API获取路线,后端可能保存导航记录或进行其他处理。 然后,我需要考虑步骤。首先,申请百度地图开发者账号,获取AK密钥。然后在JSP页面引入API脚本,创建地图容器,初始化地图,添加导航控件。可能需要添加路线规划功能,调用相应的API方法,如DrivingRoute。同时,需要处理前后端的数据交互,比如将用户输入的地址传给后端,或者从后端获取存储的地址信息。 还要注意问题前端JavaScript和后端Java如何通信。可能使用AJAX调用后端Servlet,获取或提交数据。例如,用户选择历史地址时,后端从数据库查询并返回给前端显示。 另外,引用[1]提到Java处理业务逻辑,比如地址查询和更新,这可能和用户的需求相关。比如,用户保存常用地址,后端用Java实现这些功能,前端地图展示时调用这些数据。 测试方面,用户需要在本地或服务器部署项目,确保密钥正确,网络通畅,API调用无误。可能遇到的常见问题包括密钥错误、地图不显示、路线规划失败等,需要检查密钥配置和网络请求。 最后,生成相关问题,帮助用户深入理解,比如如何优化地图加载速度、如何处理多个途经、如何实现实时导航等。这些问题可能涉及API的高级用法或性能优化。</think>以下是在Java Web应用中实现百度地图导航功能的步骤指南: 一、前期准备 1. 注册百度地图开发者账号 访问百度地图开放平台(http://lbsyun.baidu.com/),完成开发者注册并创建应用,获取API密钥(AK)[^2]。 2. 创建Java Web项目 使用Eclipse/IntelliJ新建动态Web项目,建议采用Maven结构管理依赖 二、基础集成步骤 1. 前端页面实现(JSP示例) ```jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的AK密钥"></script> </head> <body> <div id="mapContainer" style="width: 100%;height:600px"></div> <script> var map = new BMap.Map("mapContainer"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.enableScrollWheelZoom(true); // 添加导航控件 var naviControl = new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(naviControl); </script> </body> </html> ``` 三、路线规划功能实现 1. 添加路线规划控件 ```javascript function planRoute(startPoint, endPoint) { var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } }); driving.search(startPoint, endPoint); } ``` 2. Java后端服务示例(获取坐标服务) ```java @WebServlet("/LocationService") public class LocationService extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String address = request.getParameter("address"); // 调用百度地图地理编码API String url = "http://api.map.baidu.com/geocoding/v3/?address=" + URLEncoder.encode(address, "UTF-8") + "&output=json&ak=您的AK密钥"; // 发送HTTP请求并解析返回的JSON数据 // ...(使用HttpClient或URLConnection实现) } } ``` 四、功能扩展建议 1. 历史记录存储:使用JDBC将用户查询记录存入MySQL 2. 地址收藏功能:结合Session/Cookie实现用户偏好设置 3. 实时交通显示:调用百度地图实时路况接口 $$ \text{坐标转换公式:} x_{mercator} = \frac{longitude}{180} \times 20037508.34 $$
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值