怎么在html中调用百度地图的api

发布网友发布时间：2022-05-01 19:36

共2个回答

懂视网时间：2022-05-12 05:52

本文主要和大家介绍了HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码,需要的朋友可以参考下，希望能帮助到大家。

可以省下先发送位置信息后，点确定再出导航，省一步，

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
 <title>HTML5页面直接调用百度地图API,获取当前位置，直接导航目的地</title>
 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wDYEcxgRRheZwyC9jpN1Tt7fzr2zjosZ"></script> 
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><!--调用jQuery-->
 <style type="text/css">
 body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
 </style> 
</head>
<body> 
 <p id="allmap"></p>
</body> 
</html> 
<script type="text/javascript"> 
 var map = new BMap.Map("allmap"); 
 var point = new BMap.Point(116.709684,39.89778);
 map.centerAndZoom(point, 16); 
 map.enableScrollWheelZoom(); 
 var myIcon = new BMap.Icon("myicon.png",new BMap.Size(30,30),{
 anchor: new BMap.Size(10,10) 
 });
 var marker=new BMap.Marker(point,{icon: myIcon}); 
 map.addOverlay(marker); 
 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);//地图中心点移到当前位置
  var latCurrent = r.point.lat;
  var lngCurrent = r.point.lng;
  //alert('我的位置：'+ latCurrent + ',' + lngCurrent);
  location.href="http://api.map.baidu.com/direction?origin="+latCurrent+","+lngCurrent+"&destination=39.89778,116.709684&mode=driving®ion=北京&output=html";
 }
 else {
  alert('failed'+this.getStatus());
 } 
 },{enableHighAccuracy: true})
 map.addOverlay(marker); 
 var licontent="<b>健龙森羽毛球馆</b><br>"; 
 licontent+="<span><strong>地址：</strong>北京市通州区滨河中路108号</span><br>"; 
 licontent+="<span><strong>电话：</strong>(010)81556565 / 6969</span><br>";  
 var opts = { 
 width : 200,
 height: 80,
 };  
 var infoWindow = new BMap.InfoWindow(licontent, opts); 
 marker.openInfoWindow(infoWindow); 
 marker.addEventListener('click',function(){
 marker.openInfoWindow(infoWindow);
 }); 
</script>

热心网友时间：2022-05-12 03:00

首先打开百度地图开放平台

点击开发菜单，选择地图生成器；

切换城市；

输入具体地理位置名称，比如平凉市汽车东站，点击查找定位经纬度；

点击设置地图；具体参数，可自由设置；

添加标注，鼠标点击点标记图标，然后在地图中找到具体位置，点击鼠标左键进行标注；

输入标记名称，和备注，点击保存；

预览；

点击获取代码，然后复制代码；将代码粘贴到新建的HTML中保存即可使用。