h5 百度地图API的使用

1.头部导入百度地图js

<script
    type="text/javascript"
    src="http://api.map.baidu.com/api?v=3.0&ak=你的秘钥">
</script>

html 建立一个div 并赋予宽高 用于存放地图

<style>
    html {
        height: 100%;
        width: 100%;
    }
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #allmap {
        height: 100%;
        width: 100%;
    }
</style>
<div id="allmap"></div>

js初始化地图并且定位展示当前地址
 

<script type="text/javascript">

     var longi = window.location.href.split('longitude=')[1].split('&')[0]; //经度
     var lati = window.location.href.split('latitude=')[1].split('&')[0];   //纬度
     // 百度地图API功能
     var map = new BMap.Map("allmap");    // 创建Map实例
     map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
     //添加地图类型控件
     map.addControl(new BMap.MapTypeControl({
           mapTypes:[
                BMAP_NORMAL_MAP,
           ]
     }));	  
     map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
     map.enableScrollWheelZoom(true);   //启用滚轮放大缩小，默认禁用
     map.enableContinuousZoom(true);    //启用地图惯性拖拽，默认禁用
     function theLocation(longitude,latitude){
         if(longitude!= "" && latitude != ""){
               map.clearOverlays(); 
               var new_point = new BMap.Point(longitude,latitude);
               var marker = new BMap.Marker(new_point);  // 创建标注
               map.addOverlay(marker);              // 将标注添加到地图中
               map.panTo(new_point);      
          }
      }
      theLocation(longi,lati)
        </script>