手机微信公众号调用百度api 地图导航

说明：container 设置100%，覆盖整个屏幕；起点这里是固定写死的，可以用微信公众号api拿到；获取到的坐标通过api转换成百度坐标，注意是异步；daohang(e)开始导航，e是接口拿到的终点的数据；

html:

<div id="container" style="width: 100%;height: 100vh;display: none;position: fixed;left:0;top:0;z-index:99;"><div style="width:100%;height: 100%;" id="map"></div></div>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的百度ak"></script>

script:

<script>
　　var startName = '上海市'; //起点
　　var startlng = 116.328556 ; //起点x坐标
　　var startlat = 39.884334 ; //起点y坐标
　　var endName; //终点
　　var endAdress; //终点地址
　　var endPhone; //终点电话
　　var endlng; //终点x坐标
　　var endlat; //终点y坐标

　　

//起始坐标转成百度坐标

　　//e是接口拿到的数据
　　function goMap(e) {
　　　　var ggPoint = new BMap.Point(startlng,startlat);
　　　　//异步
　　　　setTimeout(function(){
　　　　　　var pointArr = [];
　　　　　　pointArr.push(ggPoint);
　　　　　　new BMap.Convertor().translate(pointArr, 1, 5, translateCallback)
　　　　},2000);
//坐标转换完之后的回调函数
　　　　translateCallback = function (data){
　　　　　　if(data.status === 0) {
　　　　　　　　console.log(JSON.stringify(data));
　　　　　　　　startlng = data.points[0].lng;
　　　　　　　　startlat = data.points[0].lat;
　　　　　　　　// 点击路线开始导航
　　　　　　　　daohang(e);
　　　　　　}
　　　　}
　　}

// 导航
　　function daohang(e){
//终点数据
　　　　endName = $(e).attr('endName');
　　　　endAdress = $(e).attr('endAdress');
　　　　endPhone = $(e).attr('endPhone');
　　　　endlng = $(e).attr('endlng');
　　　　endlat = $(e).attr('endlat');

　　　　$('#container').show();
// 地图容器
　　　　var map = new BMap.Map("map");
　　　　map.centerAndZoom(new BMap.Point(startlng,startlat), 13);
　　　　map.enableScrollWheelZoom();
　　　　var marker=new BMap.Marker(new BMap.Point(startlng,startlat));
　　　　map.addOverlay(marker);
　　　　var licontent= "<b>"+ endName + "</b><br>";
　　　　licontent+="<span><strong>地址：</strong>"+ endAdress +"</span><br>";
　　　　licontent+="<span><strong>电话：</strong>"+ endPhone +"</span><br>";
　　　　licontent+="<span class='input'>"+
　　　　"<strong></strong>"+
　　　　"<input class='outset' type='text' name='origin' value='"+ startName +"'/>"+
　　　　"<input class='outset-but' type='button' value='公交' onclick='gotobaidu(1)' />"+
　　　　"<input class='outset-but' type='button' value='驾车' onclick='gotobaidu(2)' />"+
　　　　"<a class='gotob' href='url='http://api.map.baidu.com/direction?destination=latlng:" + marker.getPosition().lat+","+marker.getPosition().lng+"|name:天安门"+"®ion=北京"+"&output=html' target='_blank'></a>"+
　　　　"</span>";

　　　　var hiddeninput="<input type='hidden' value='北京' name='region' />"+
　　　　"<input type='hidden' value='html' name='output' />"+
　　　　"<input type='hidden' value='driving' name='mode' />"+
　　　　"<input type='hidden' value='latlng:"+ endlat +","+ endlng +"|name:"+ endAdress + "' name='destination' />";

　　　　var content1 ="<form id='gotobaiduform' action='http://api.map.baidu.com/direction' target='_blank' method='get'>" + licontent +hiddeninput+"</form>";

　　　　var opts1 = { width: 300 };

　　　　var infoWindow = new BMap.InfoWindow(content1, opts1);
　　　　marker.openInfoWindow(infoWindow);
　　　　marker.addEventListener('click',function(){
　　　　　　marker.openInfoWindow(infoWindow);
　　　　});
　　}

　　function gotobaidu(type) {
　　　　if($.trim($("input[name=origin]").val())=="")
　　　　{
　　　　　　alert("请输入起点！");
　　　　　　return;
　　　　}else{
　　　　　　if(type==1)
　　　　　　{
　　　　　　　　$("input[name=mode]").val("transit");
　　　　　　　　$("#gotobaiduform")[0].submit();
　　　　　　}else if(type==2)
　　　　　　{
　　　　　　　　$("input[name=mode]").val("driving");
　　　　　　　　$("#gotobaiduform")[0].submit();
　　　　　　}
　　　　}
　　}

</script>