百度地圖api寫一個有標注點有連線的地圖

第一步引入資源，創建百度地圖容器

 <!--百度地圖容器-->
  <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>
<script type="text/javascript">

    var map = new BMap.Map("dituContent");//創建和初始化地圖函數：
    map.centerAndZoom(new BMap.Point(116.328749,40.026922), 13);//中心點坐標主要必須要有中心點
    map.enableScrollWheelZoom(true);//是否有滾輪滑動放大縮小
    var TestPoint = [
                        [116.307232,40.017031,"地點1"],
                        [116.307852,40.057031,"地點2"],
                        [118.309852,41.157031,"地點3"],
                        
                    ];//自定義坐標，我這里瞎找了三個點后面要用
                    
</script>

這樣我們就創建了一個初始化的地圖

 

 

 

第二步 寫一個自定義的標注點

用addOverlay()這個方法創建一個標注點

//創建和初始化地圖函數：
   var map = new BMap.Map("dituContent");
   map.centerAndZoom(new BMap.Point(116.328749,40.026922), 13);//中心點坐標
   map.enableScrollWheelZoom(true);//是否有滾輪滑動放大縮小
   
   
   var TestPoint = [
                       [116.307232,40.017031,"地點1"],
                       [117.307852,40.057031,"地點2"],
                       [118.309852,41.157031,"地點3"],
                       
                   ];//自定義坐標數組
        
        //我這里創建了三個點所以用for循環一下，如果只有一個點就直接調用就行了
        for (var i = 0; i < TestPoint.length; i++) {
               var marker = new BMap.Marker(new BMap.Point(TestPoint[i][0],TestPoint[i][1]));//標創建注點
               //Point(x,y)是封裝好的一個方法，用來把坐標轉換一下，以后如果用到有關坐標的功能都要用到這個方法；x是經度，y是維度   
               map.addOverlay(marker);//在地圖的指定坐標添加覆蓋物 也就是標注點   
               marker.setLabel(new BMap.Label("我是標注點"+(i+1),{offset:new BMap.Size(15,-25)}));//備注；如果不想要就刪掉
               
               
        } 

 

 

 

創建折線把三個點連起來

思路跟標注點一樣只不過現在用Polyline()方法

//創建和初始化地圖函數：
    var map = new BMap.Map("dituContent");
    map.centerAndZoom(new BMap.Point(116.328749,40.026922), 13);//中心點坐標
    map.enableScrollWheelZoom(true);//滾輪
    var pointlygon_array = [];//折現需要的數組
    var TestPoint = [[116.307232,40.017031,"地點1"],
                     [117.307852,40.057031,"地點2"],
                     [118.309852,41.157031,"地點3"], ];//自定義坐標
         for (var i = 0; i < TestPoint.length; i++) {
                var marker = new BMap.Marker(new BMap.Point(TestPoint[i][0],TestPoint[i][1]));//標創建注點
                var content =TestPoint[i][2];
                map.addOverlay(marker);//添加覆蓋物      
                marker.setLabel(new BMap.Label("我是標注點"+(i+1),{offset:new BMap.Size(15,-25)}));//備注
                pointlygon_array[i] = new BMap.Point(TestPoint[i][0],TestPoint[i][1])  //創建線段用的坐標數組   
         } 
  var polygon = new BMap.Polyline(pointlygon_array,{strokeColor:"red", strokeWeight:2, strokeOpacity:0.5});//創建折線                                                                   
  //                      Polyline（坐標值，{線段顏色，線段寬度，線段透明度}）；    
          map.addOverlay(polygon);//添加覆蓋物  

 

 

為標注點寫一個點擊事件

//創建和初始化地圖函數：
    var map = new BMap.Map("dituContent");
    map.centerAndZoom(new BMap.Point(116.328749,40.026922), 13);//中心點坐標
    map.enableScrollWheelZoom(true);//滾輪
    // var myGeo = new BMap.Geocoder();//類用於獲取用戶的地址解析
    var pointlygon_array = [];//折現需要的數組
    var TestPoint = [
                        [116.307232,40.017031,"地點1"],
                        [117.307852,40.057031,"地點2"],
                        [118.309852,41.157031,"地點3"],        
                    ];//自定義坐標
         for (var i = 0; i < TestPoint.length; i++) {
                var marker = new BMap.Marker(new BMap.Point(TestPoint[i][0],TestPoint[i][1]));//標創建注點
                var content =TestPoint[i][2];          
                map.addOverlay(marker);//添加覆蓋物  
                marker.setLabel(new BMap.Label("我是標注點"+(i+1),{offset:new BMap.Size(15,-25)}));//備注
                addClickHandler(content,marker);//調用點擊方法
                pointlygon_array[i] = new BMap.Point(TestPoint[i][0],TestPoint[i][1])
         }          
          var polygon = new BMap.Polyline(pointlygon_array,{strokeColor:"red", strokeWeight:2,strokeOpacity:0.5});//創建折線   
          map.addOverlay(polygon);//添加覆蓋物  
         var opts = {
                width : 250,     // 信息窗口寬度
                height: 80,     // 信息窗口高度
                title : "當前位置" , // 信息窗口標題
                enableMessage:true//設置允許信息窗發送短息
               };  
        function addClickHandler(content,marker){
            marker.addEventListener("click",function(e){
                var p = e.target;
                var point = new BMap.Point(p._lastPt.lng, p._lastPt.lat);
                var infoWindow = new BMap.InfoWindow(content,opts);  // 創建信息窗口對象 
                map.openInfoWindow(infoWindow,point); //開啟信息窗口
        }
        );
        }