百度地图开发(功能有:标注地点；定位本机等)

1.开发百度地图先去他们的官网申请密钥

下面有道通往百度地图的传送门，申请密钥也方便快捷

传送门

2.百度地图开发方面，demo级别的话，需要三个步骤：   

2.0.首先引入百度js，这里需要密钥 ：  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=FtppmMikPUX6swgTT3L75eKXX6j1ZsRC"></script> 

2.1.设置地图样式(不设置，就不会显示)

 <style type="text/css">
   body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
   #allmap{width:100%;height:100%;}
   p{margin-left:5px; font-size:14px;}
  </style>

2.2.body内设置div来接收地图

<div id="allmap"></div>

2.3.js才是重头戏

<script type="text/javascript">
  
    var map = new BMap.Map("allmap");  
    var geoc = new BMap.Geocoder();   //  手动点击位置
    var markersArray = [];  
   // var geolocation = new BMap.Geolocation();  
    var initjd="112.508074";
    var initwd="23.056833";
    var companyjd= "${dz.zbjd}";
  var companywd="${dz.zbwd}";
 
if (companyjd !== null || companyjd !== undefined || companyjd !== '') { 
  var point = new BMap.Point(companyjd, companywd);   //创地图对象，设置上已经添加的经纬度
     map.centerAndZoom(point,20); // 初始化地图
     addMarker(point);  //标注初始化经纬度
  }

  if(companyjd == null || companyjd == undefined || companyjd == ''){
      var point = new BMap.Point(initjd, initwd);   //创地图对象，设置上已经添加的经纬度
    map.centerAndZoom(point,20); // 初始化地图
    addMarker(point);  //标注初始化经纬度
  }


 
   map.enableScrollWheelZoom(true);   //滚动条
   var mk = new BMap.Marker(point);  // 制作标注，maker是addOverlay的属性
   map.addOverlay(mk);               // 固定原本标签
   map.addEventListener("click", showInfo);  
  
    
    //点击地图时间处理  
    function showInfo(e) {  
        document.getElementById('jd').value = e.point.lng;   //经度的赋值
        document.getElementById('wd').value =  e.point.lat;   //维度的赋值
        geoc.getLocation(e.point, function (rs) {  
            var addComp = rs.addressComponents;  
            var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;  
            if (confirm("确认：地址为" + address + "?")) {  
            }  
        });  
        addMarker(e.point);  
    }  
    
    //清除标识  
    function clearOverlays() {  
        if (markersArray) {  
            for (i in markersArray) {  
                map.removeOverlay(markersArray[i])
  }  
        }  
    }  
    
    
    //地图上标注  
    function addMarker(point) {  
        var marker = new BMap.Marker(point);  
        markersArray.push(marker);  
        clearOverlays();  
        map.addOverlay(marker);  
    }  
    
    // 地图定位功能
      // 添加带有定位的导航控件
 var navigationControl = new BMap.NavigationControl({
   // 靠左上角位置
   anchor: BMAP_ANCHOR_TOP_LEFT,
   // LARGE类型
   type: BMAP_NAVIGATION_CONTROL_LARGE,
   // 启用显示定位
   enableGeolocation: true // 会多出一个点
 });
 map.addControl(navigationControl);
 // 添加定位控件
 
 var geolocationControl = new BMap.GeolocationControl();
 geolocationControl.addEventListener("locationSuccess", function(e){
   // 定位成功事件
   var address = '';
   address += e.addressComponent.province;
   address += e.addressComponent.city;
   address += e.addressComponent.district;
   address += e.addressComponent.street;
   address += e.addressComponent.streetNumber;
   alert("当前定位地址为：" + address);
 });
 geolocationControl.addEventListener("locationError",function(e){
   // 定位失败事件
   alert(e.message);
 });
 map.addControl(geolocationControl);
</script>

一个地图功能就ok了。

献上图片