最近在项目遇到一个关于谷歌地图的问题，看了下谷歌地图api后实现了导航和定位的功能,特意记录下，以便以后查看.

整个流程从服务端获得目的地（简称 B）的经纬度地址，通过客户端获得用户(简称A)的经纬度地址,

如果成功获得B的经纬度就在地图上显示出A到B的驾车路径,

如果没有获得A的经纬度则在地图上显示B的位置并明确标识.

拆分下整个需求，需要这些功能

1.渲染地图;

2.在地图上标识某地;

3.获得用户的经纬度;

4.在地图上显示导航路线.

--------------

1.显示地图；

看google的api

引入入地图api

<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>

看看谷歌官方的例子，渲染地图很简单的……

这是自己的代码

<!DOCTYPE HTML>
<html lang="zh-ch">
<head>
<title>谷歌地图</title>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1" />

<meta name="apple-mobile-web-app-capable" content="yes">

<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script src="map.js" type="text/javascript"></script>
<style>
#map_canvas{
position: absolute;
left: 0;
top:0;
height:50%;
width:50%;
background: #fff8dc;
}
</style>
</head>
<body>
<div id="map_canvas">
</div>

</body>
</html>

js 代码initMap 渲染地图

var newMap = {a:{},b:{name:"目的地"}}; //全局变量
newMap.directionsDisplay = {};
newMap.directionsService = new google.maps.DirectionsService(); //这两个是在导航的时候用到的
//初始化地图
function initMap(mapCenter) {newMap.directionsDisplay = new google.maps.DirectionsRenderer();var myOptions = {zoom:10,mapTypeId: google.maps.MapTypeId.ROADMAP, //地图类型center: mapCenter   //LatLng 对象
    }newMap.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
newMap.directionsDisplay.setMap(newMap.map); }

js 方法 calcRoute() 导航
//导航方法
function calcRoute(start,end) {var request = {origin:start,  //开始的位置 （A）destination:end, //开始的位置 （B）travelMode: google.maps.TravelMode.DRIVING   //导航类型 驾驶
    };newMap.directionsService.route(request, function(result, status) {if (status == google.maps.DirectionsStatus.OK) {directionsDisplay.setDirections(result);}});
}

2.获得用户的当前的地理位置信息

使用html5的方法来 geolocation.getCurrentPosition() 获得地址，这方法在移动设备上好用，pc上不好用. 这个和有没有网络没有关系,没有网络也是可用的

function getLatLng(){if( navigator.geolocation ) {function gpsSuccess(pos){if( pos.coords ){newMap.a.lat = pos.coords.latitude;newMap.a.lng = pos.coords.longitude;}else{newMap.a.lat = pos.latitude;newMap.a.lng = pos.longitude;}var userPositon = new google.maps.LatLng(newMap.a.lat,newMap.a.lng);var crsPositon = new google.maps.LatLng(newMap.b.lat,newMap.b.lng);initMap(userPositon);calcRoute(userPositon,crsPositon);addMarker(crsPositon,newMap.map,newMap.b.name);addMarker(userPositon,newMap.map, "您当前位置");}function gpsFail(){alert('无法获取您的地理位置信息');var obj = new google.maps.LatLng(newMap.b.lat,newMap.b.lng);initMap(obj);addMarker(obj,newMap.map, newMap.b.name);}navigator.geolocation.getCurrentPosition(gpsSuccess, gpsFail, {enableHighAccuracy:true, maximumAge: 3000000,timeout:20*1000});}
}

还有一问题在地图上标识某地

//向地图上添加某地标识
function addMarker(location,map,contentString) {var marker = new google.maps.Marker({position: location,'draggable': false,'animation': google.maps.Animation.DROP,map: map});var infowindow = new google.maps.InfoWindow({content: contentString});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});
}

把这些方法拼装起来ok

ok完整的例子

demo地址

转载于:https://www.cnblogs.com/acmilan/archive/2012/06/15/2469051.html

使用 html5 显示导航路线 谷歌地图api相关推荐

  1. html5谷歌地图,谷歌地图API和HTML 5

    我是新来的Stackoverflow,所以要善良.谷歌地图API和HTML 5 我一直在使用谷歌地图api和一些其他的东西来制作游戏的项目.这个想法是使用地理定位数据来清除地图上的雾(当你开始时地图充 ...

  2. 谷歌地图 API 的 5 个强大替代品（国外产品）

    谷歌地图因其全球地理定位服务而广受欢迎.他们庞大的地理特征.小型企业和全球街道图像数据库是无与伦比的--这就是为什么谷歌地图 API多年来一直是开发人员的首选. 然而,在 2018 年 7 月,谷歌大 ...

  3. 谷歌地图API教程及在VUE中的使用

    目录 一.获取密钥API Key   1.创建项目   2.启用Maps JavaScript API服务   3.创建API Key   4.设置结算账户 二.头文件中引入api资源文件   1.获 ...

  4. 去除谷歌地图api上的各种默认标记

    针对于谷歌地图api上显示的各种样式问题 详情参考: https://mapstyle.withgoogle.com/

  5. php获取谷歌地图gps定位,谷歌地图 API 开发之获取当前坐标(经纬度)

    很多时候要定位到当前所在的位置,谷歌地图 API 没找到,然后网上搜的是通过原生js geolocation来实现的. 代码如下: var x=document.getElementById(&quo ...

  6. 谷歌地图API位置请求_Google Maps API

    谷歌地图API位置请求  Google maps api 以xml格式传回请求的地址:http://maps.google.com/maps/api/geocode/xml?latlng=39.910 ...

  7. 谷歌地图api的使用 一

    一.注册账号 使用谷歌地图api,需要注册一个谷歌账号,并创建一个你的项目,在项目中开通你所需要的api. 谷歌地图api网址:https://cloud.google.com/maps-platfo ...

  8. 谷歌地图api 微信小程序_使用Google的融合位置提供程序API进行实时位置跟踪

    谷歌地图api 微信小程序 Location tracking and monitoring have seen a surge in modern application development w ...

  9. 谷歌地图显示服务器错误解决方法,谷歌地图API：内部服务器错误插入功能时

    我尝试在自定义谷歌地图上插入功能:我使用示例代码从文档 但我得到一个ServiceException(内部服务器错误),当我拨打 服务插入方法.谷歌地图API:内部服务器错误插入功能时 这里是我做的: ...

最新文章

  1. [Android Traffic] 调整定时更新的频率(C2DM与退避算法)
  2. 图像转换 之 方形图转化扇形图
  3. 计算机专业python教材_计算机专业几本必看的书！
  4. 【DIY】送给儿子的礼物——DIY故事机（音乐播放器）
  5. php管理用户名和密码,管理员用户名/密码不适用于PHP
  6. python3.0与2.0,python3.0与python2.0有哪些不同
  7. 51nod 1534 棋子游戏
  8. Oracle CRS stack is already configured and will be running under init(1M)
  9. PyCharm配置django环境
  10. 数学常用公式及规律、结论（三）
  11. Spring IOC(依赖注入的三种方式)
  12. gtShell - 为你常用的目录建立标签并快速跳转
  13. vcpkg Ubuntu安装
  14. 小米营销总监：中国模式能复制，但要有本地化的独特性
  15. 金华职业技术学院计算机网络技术考试,金华职业技术学院2016年提前招生计算机应用技术专业测评方案...
  16. CSDN 去除图片水印
  17. 如何知晓代理IP所属城市？
  18. 移动机器人定位（amcl）
  19. 包载信使mRNA的多西环素纳米脂质体|雷公藤红素纳米脂质体RNA核糖核酸（实验原理）
  20. centos环境：Do not run Composer as root/super user的解决办法。

热门文章

  1. 这是我见过最好的支付系统，支付系统开发神器
  2. 禁止乱用：一款牛批的开源去马赛克工具。。。
  3. 字符串转运算表达式条件表达式
  4. debug控制台的console控台不见了
  5. 感觉做自媒体的越来越多了，前景怎么样？
  6. wordpress vue_使用Vue构建WordPress插件
  7. java实现录音功能
  8. 今日感悟——11.2
  9. 算法day22|235，701，450
  10. 微信小程序通过保存图片分享到朋友圈