百度地图api实现的定位，导航，附近搜索

先上效果图：<我的位置图标下载：http://www.zhouyfei.xin/mapImage/myload.gif> 这个图标非常好用，是找的：http://www.cnblogs.com/shuilangyizu/p/5888031.html

<起点 | 终点图标：自ps的，可将就这用>：http://www.zhouyfei.xin/mapImage/start.png，

http://www.zhouyfei.xin/mapImage/end.png

实现功能： 1、定位，根据设备自动定位，设置到区，可自行调整；

2、附近地标搜索，显示定位附近图书馆，可更改；

3、路线规划，点选终点或手动输入终点位置；

代码实现：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">#allmap{width:300px;height:300px;}p{margin-left:5px; font-size:14px;}</style><style type="text/css">body, html {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}#allmap{height: 350px;width:100%;}#r-result,#r-result table{width:100%;}input { font-family: "micrsoft yahei"; width: 80%; height: 2em; font-size: 1em; line-height: 2em; border: 0px; outline: 0px; padding: .2em 1em; margin: 0em 10%;}.btn-group { width: 100%; border-top: 1px solid #DDD; border-bottom: 2px solid #DDD;}button {width: 32%; text-align: center; border: 0; border-radius: 0; background-color: inherit; height: 44px; line-height: 44px; font-size: 15px;}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=*******AK可到百度地图开发平台自行申请********"></script><script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script><title>BookSiYi</title>
</head>
<body>
<div id="search"><input type="text" id="start" placeholder="正在定位您的位置..." style="border-bottom: 1px solid #DDD; " /><input type="text" id="end" placeholder="请选择终点"  οnchange="searchRoute()"/><div class="btn-group"><button id="bus-search" class="button">公交</button><button id="driver-search" class="button">驾车</button><button id="walk-search" class="button">步行</button></div>
</div>
<div id="allmap"></div>
<div id="r-result"></div><script type="text/javascript">$("#bus-search").css("background-color", "#95B7EE");window.start_point = "";window.end_point = "";// 定位对象var map;var geoc = new BMap.Geocoder();var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(r){if(this.getStatus() == BMAP_STATUS_SUCCESS){//var mk = new BMap.Marker(r.point);//map.addOverlay(mk);//map.panTo(r.point);window.start_point = r.point.lng+","+r.point.lat;map = new BMap.Map("allmap");   // 创建Map实例var ep = window.start_point.split(",");function addMapControl(){//向地图中添加缩放控件var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_ZOOM});map.addControl(ctrl_nav);//向地图中添加比例尺控件var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,offset: new BMap.Size(10, 5)});map.addControl(ctrl_sca);}map.centerAndZoom(new BMap.Point(ep[0],ep[1]), 13);map.enableScrollWheelZoom(true);       //启用滚轮放大缩小var local = new BMap.LocalSearch(map, {renderOptions:{map: map}});local.search("图书馆");setLocation(r.point);addMapControl();}else {$("#start").attr("placeholder","请输入您的当前位置")alert('无法定位到您的当前位置，导航失败，请手动输入您的当前位置！'+this.getStatus());}},{enableHighAccuracy: true});function setLocation(point){geoc.getLocation(point, function(rs){var addComp = rs.addressComponents;var result = addComp.province + addComp.city + addComp.district;$("#start").val(result);//设置定位图标var new_point = new BMap.Point(rs.point.lng,rs.point.lat);var myIcon = new BMap.Icon("http://www.zhouyfei.xin/mapImage/myload.gif", new BMap.Size(30,30),{anchor:new BMap.Size(13,15),imageOffset:new BMap.Size(0,0)});var marker = new BMap.Marker(new_point,{icon:myIcon,isOpen:true});map.addOverlay(marker);var opts = {width : 40,     // 信息窗口宽度height: 18,     // 信息窗口高度title : "我的位置" , // 信息窗口标题isOpen: 1,}var infoWindow = new BMap.InfoWindow("地址 : "+$("#start").val(), opts);  // 创建信息窗口对象marker.addEventListener("click", function(){map.openInfoWindow(infoWindow,new_point); //开启信息窗口});//设置监听，点选地图设终点，规划路线map.addEventListener("click",function(e) {window.end_point = e.point.lng +","+ e.point.lat;var local = new BMap.LocalSearch(map, {renderOptions:{map: map}});searchRoute();});});}var type="bus";$("#bus-search,#driver-search,#walk-search").click(function(){var id = $(this).attr("id");$(".button").css("background-color","#fff");$("#"+id).css("background-color","#95B7EE");type = "bus";if(id == "bus-search"){type = "bus";}else if(id == "driver-search"){type = "driver";}else if(id == "walk-search"){type = "walk";}searchRoute();});//搜索路线function searchRoute(){if($("#end").val().length!=0){var end = $("#end").val();$("#end").val("");}else{var pe = window.end_point.split(",");var end = new BMap.Point(pe[0],pe[1]);}var ps = window.start_point.split(",");var start = new BMap.Point(ps[0], ps[1]);var starIcon = new BMap.Icon("http://www.zhouyfei.xin/mapImage/start.png", new BMap.Size(22, 32));var endIcon = new BMap.Icon("http://www.zhouyfei.xin/mapImage/end.png", new BMap.Size(22,32));if(type == "bus"){var transit = new BMap.TransitRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: false}});transit.search(start, end);transit.setMarkersSetCallback(function(result){result[0].marker.setIcon(starIcon);result[1].marker.setIcon(endIcon);});}else if(type == "driver"){var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: false}});driving.search(start, end);driving.setMarkersSetCallback(function(result){result[0].marker.setIcon(starIcon);result[1].marker.setIcon(endIcon);});}else if(type == "walk"){var walking = new BMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: false}});walking.search(start, end);walking.setMarkersSetCallback(function(result){result[0].marker.setIcon(starIcon);result[1].marker.setIcon(endIcon);});//walking.search("天坛公园","故宫");}}
</script>
</body>
</html>

百度地图api实现的定位，导航，附近搜索相关推荐

php调用百度地图定位,php用百度地图API进行IP定位和GPS定位
/** * 根据地理坐标获取国家.省份.城市,及周边数据类(利用百度Geocoding API实现) * 百度密钥获取方法:http://lbsyun.baidu.com/apiconsole/key ...
百度地图API的IP定位城市和浏览器定位（转）
转自博文:百度地图API的IP定位城市和浏览器定位 http://blog.csdn.net/suixufeng/article/details/13511761 百度地图API提供了Geolocat ...
HTML5+百度地图API实现地理定位
背景如果知道用户在哪里,往往会提高很多Web应用的体验,比如为用户指明方向,对它们要去的地方给出建议,让用户知道它们所在的区域内有哪些人可能会对某个活动感兴趣等等.现在,利用HTML5(以及基于Ja ...
百度地图api，第一次定位成功，后面505错误
百度地图api,第一次定位成功,后面505错误 1.查看key对不对 2.查看AndroidManifest中放的位置对不对,是放在 <application里面与 <activity a ...
使用百度地图api模拟实时定位页面完整示例
使用百度地图api模拟实时定位页面完整示例效果:使用百度地图api在页面上显示车辆的实时位置,并有自动刷新和手动刷新两种方式可以选择.每次刷新后,都会在地图上显示车辆的最新位置. 示例运行效果截图 ...
百度地图实现普通地图、定位、周边搜索功能
//--------------一下是普通地图的实现----------------------------------- 1:打开百度地图APi进去,如果没有注册过的需要注册,注册过的登录进入 2: ...
关于Android百度地图API步骑行导航引擎初始化失败以及View空指针异常的问题
关于百度地图导航初始化失败问题以及View 空指针异常因为要做毕业设计的关系所以用到了百度地图,但发现百度地图API这个是真的大坑一个,一些莫名其妙的BUG,搞得让你头大, 这里我先将初始化失败的问 ...
Android 百度地图API实现实时定位
首先需要注册百度地图的开发者账号,选择个人开发者就可以.百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com) 然后获取AK这个在网上都有可以自己查看.下载.配置sdk可以 ...
百度地图API后台持续定位、指南针改变位置问题
最近的需要用到后台持续定位,项目中又是用的百度地图API,遇到点麻烦: 1.进入后台,手机静置,定位持续16分钟左右就停止了,但是还是无限后台效果:但如果一直运动,让定位持续更新,定位服务一直保持其 ...
百度地图api初使用，行政区划及搜索
最近发现了百度地图api这个好东西,官网上细致的demo和讲解,所以写了以下html 里面包含这几个功能:地图调用,行政区边界,还有一个地图搜索的搜索框行政区边界demo 搜索框demo 所以第一步 ...

百度地图api实现的定位，导航，附近搜索

百度地图api实现的定位，导航，附近搜索相关推荐

最新文章

热门文章