HTML5建立高德地圖

時間 2020-01-09

標籤 html5 html 建立地圖欄目 HTML5 简体版

原文原文鏈接

建立高德地圖javascript

功能真的很好很強大，有圖有證據！java

1.申請key值去官網
2.https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619enode

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e"></script>

3.有個div容器
4.建立地圖 new AMap.Map('容器的名字')；git

初始化地圖（默認設置）web

    <div id="container"></div> 
    <script type="text/javascript">
        new AMap.Map('container');
    </script>

初始化地圖（簡單自定義設置）api

    var map = new AMap.Map('container',{
        zoom:16,
        center:[116.379391,39.861536],
    });

getZoom() 獲取地圖的級別
getCenter(); 獲取地圖的中心位置數組

Zoom 的數字越大顯示的越精細越小顯示的範圍越大
setZoom 能夠手動去設定地圖級別ide

     map.setZoom(15);

setCenter([]) 設置中心點，放入座標函數

        map.setCenter([121.222,30]);

中心點和層級一塊兒設定工具

    map.setZoomAndCenter(12,[121.22,30])

獲取級別和中心點

        console.log(map.getZoom());
        console.log(map.getCenter().toString());

on('moveend') //地圖移動結束時
on('zoomend') //地圖級別發生改變時

獲取行政區
map.getCity(function(info){
info 當前中心點的行政區
});

        map.getCity(function(info){
            setCenterNode.innerHTML = info.province+','+info.district
        });

設置行政區

map.setCity('字符串') 想讓地圖到達該地區的中心點
    map.setCity('天津市');

獲取地圖的範圍

    console.log(map.getBounds().northeast.toString());//右上角的座標
    console.log(map.getBounds().southwest.toString());//左下角的座標

經過事件來設定顯示限制

        btn.onclick = function(){
            var bounds = map.getBounds();
            bounds.northeast.R = Number(xNode.value);
            bounds.southwest.R = Number(yNode.value);
            map.setLimitBounds(bounds);
        };

經過事件解除顯示限制

        clear.onclick = function(){
            map.clearLimitBounds();
        };

設置地圖的顯示範圍

    var myBounds = new AMap.Bounds([88.379391,20.861536],[117.379391,41.861536])
    map.setBounds(myBounds); //可是不是特別精準，會以它以爲最好的方式去顯示

地圖的平移
panBy(x,y) x表明向左平移多少像素 / y表明向上平移多少像素
panTo([x座標，y座標]) 地圖會直接平移到這個位置

        <input type="" name="" id='xNode'>
        <input type="" name="" id='yNode'>
        btn.onclick =function(){
            map.panTo([xNode.value,yNode.value])
        };

獲取鼠標的經緯度
longitude 經度 / latitude 緯度

        map.on('click',function(e){
            //xyNode.innerHTML = e.lnglat.lng + ',' + e.lnglat.lat;
            map.setCenter([e.lnglat.lng,e.lnglat.lat])
        });

設置地圖鼠標的默認樣式
setDefaultCursor('樣式')
cursor : 裏面全部的樣式均可以

        map.setDefaultCursor('-webkit-grabbing');

地圖搜索

AMap.plugin('AMap.Autocomplete',function(){
    new AMap.Autocomplete().search(要搜索的內容,function(status,data){
        console.log(data 搜索出來的數據)
    })
})

案例：輸入地址出現下拉列表，點擊可切換地圖

    <div id="container"></div> 
    <div id='setCenterNode'>
        <!-- 搜索框 -->
        <input type="" name="" id='searchText'>  
        <!-- 下拉列表內容顯示位置 -->
        <ul id='node'></ul>
    </div>
    ---------
    new AMap.Autocomplete({
        input:'searchText'
    });

加載插件的方式有兩種

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=AMap.Autocomplete"></script>
    -------------
    new AMap.Autocomplete({
        input:'searchText'
    });

地圖搜索與POI（興趣點）結合1

    AMap.service(['AMap.PlaceSearch'],function(){
        new AMap.PlaceSearch({
            pageSize:5, //當頁一共顯示多少條
            pageIndex:1, //當前第幾頁
            city:'010', //興趣點的城市
            citylimit:true, //是否限制在設定的城內搜索
            map:map, //展現在哪一個地圖裏
            panel:'setCenterNode' //放在哪一個元素下
        })
    })

地圖搜索與POI（興趣點）結合2

        var searchNode = new AMap.Autocomplete({
            input:'searchIpt'
        });
        var placeSearch = new AMap.PlaceSearch({
            map:map
        });
        AMap.event.addListener(searchNode,'select',function(e){
            placeSearch.search(e.poi.name)
        });

地圖搜索與POI（興趣點）結合3--搜索周邊

    new AMap.PlaceSearch({
        type:'住宿', //搜索的結果的過濾 結果類型
        pageSize:5,
        pageIndex:1,
        city:'010',
        citylimit:true,
        map:map, //展現在哪一個地圖裏
        panel:'setCenterNode' //放在哪一個元素下
    }).searchNearBy('北京',[116.379391,39.861536],1000,function(){});

設置標記

    var marker = new AMap.Marker({
        icon:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', //標記的圖標
        position:[e.lnglat.lng,e.lnglat.lat], //標記的座標
        offset:new AMap.Pixel(-25,-25) // 像素的誤差值
    });
    marker.setMap(map);

設置多個標記

        var marker = new AMap.Marker({
            icon:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', //標記的圖標
            position:[116.379391,39.861536], //標記的座標
           // offset:new AMap.Pixel(-50,-500) // 像素的誤差值
        });
        var marker2 = new AMap.Marker({
            icon:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', //標記的圖標
            position:[116.378391,39.825536], //標記的座標
           // offset:new AMap.Pixel(-50,-500) // 像素的誤差值
        });
        map.add([marker,marker2])

自定義標記圖標

    var mk1 = new AMap.Icon({
        size:new AMap.Size(500,500), //圖標大小
        image:'./1.jpg', //圖片地址
        imageSize:new AMap.Size(100,100) //最終在map裏面顯示的大小
    //  imageOffset:new AMap.Pixel(-50,-50) //裁剪 誤差值
    });
    var marker = new AMap.Marker({
        position:[116.379391,39.861536],
        icon:mk1
    });
    map.add([marker])

刪除標記

    marker.setMap(null);
    map.remove([marker]);

縮放比例尺控件

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=AMap.Scale,AMap.ToolBar"></script>
    map.addControl(new AMap.scale());
    map.addControl(new AMap.ToolBar());

3d地圖

    var map = new AMap.Map('container',{
        zoom:17,
        pitch:90,
        center:[116.379391,39.861536],
        viewMode:'3D', //變成了3d 地圖了
        buildingAnimation:true // 能夠讓顯示的建築物變成動畫現實
    });
    map.addControl(new AMap.ControlBar({
        showZoomBar:true, // 顯示 zoom條控件
       // showControlButton:true,// 能夠取消 傾斜旋轉角度的按鈕
        position:{ //控件的定位
            right:'50px',
            top:'30px'
        }
    }))

駕駛導航

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=AMap.Driving,AMap.Autocomplete"></script> 
    new AMap.Driving({
        map:map,
        panel:'panel'
        }).search([
            {keyword:起點,city:'北京'},
            {keyword:終點,city:'北京'}
        ],function(status,data){
            console.log(data);
     })

經過鼠標點擊獲取起始點和終點，規劃駕車路線

        var num = 0, arr = [];
        map.on('click',function(e){
            num++;
            if(num%2 == 1){
                arr = [e.lnglat.R,e.lnglat.P];
            }
            else{
                new AMap.Driving({
                    map:map,
                    panel:'panel'
                    }).search(new AMap.LngLat(arr[0],arr[1]),new AMap.LngLat(e.lnglat.R,e.lnglat.P),function(status,data){
                        console.log(data);
                })
            }
        });

經過經緯度來進行導航

    new AMap.Driving({
        map:map,
        panel:'panel'
        }).search(new AMap.LngLat(startX,startY),new AMap.LngLat(endX,endY),function(status,data){
            console.log(data);
    })

步行路線的規劃

    new AMap.Walking({
        map:map,
        panel:'panel'
        }).search([
            {keyword:起點,city:'北京'},
            {keyword:終點,city:'北京'}
        ],function(status,data){
            console.log(data);
    })

步行路線的座標規劃

    new AMap.Walking({
        map:map,
        panel:'panel'
        }).search([x,y],[x,y],function(status,data){
            console.log(data);
    })

貨車路線規劃（多點）-座標

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=AMap.TruckDriving,AMap.Autocomplete"></script> 
    new AMap.TruckDriving({
            map:map,
            panel:'panel',
            city:'beijing',//城市
            size:1 //大小
        }).search([{lnglat:[116.379391,39.861536]},{lnglat:[116.979391,39.161536]},{lnglat:[116.579391,40.861536]}],function(status,data){
            console.log(data);
    });

貨車路線規劃（多點）-位置

    new AMap.TruckDriving({
            map:map,
            panel:'panel',
            city:'beijing',//城市
            size:1 //大小
        }).search([{
            keyword:'起點'
        },
        {
            keyword:'途徑點'
        }
        {
            keyword:'途徑點'
        }
        {
            keyword:'終點'
        }],function(status,data){
            console.log(data);
    });

騎行路線規劃

new AMap.Riding({
map:map,
panel:'panel'
}).search(new AMap.LngLat(startX,startY),new AMap.LngLat(endX,endY),function(status,data){
console.log(data);
})

    <div id="container"></div> 
    <div id='panel'></div>
    <div id='search'>
        起點:<input type="" name="" id='startNode'><br>
        終點:<input type="" name="" id='endNode'><br>
        <button id='btn'>開始導航</button>
    </div>
        var map = new AMap.Map('container',{
            zoom:11,
            center:[116.379391,39.861536],
        });
        new AMap.Autocomplete({
            input:'startNode'
        });
        new AMap.Autocomplete({
            input:'endNode'
        });
        btn.onclick = function(){
            new AMap.Riding({
                map:map,
                panel:'panel'
            }).search([
                {keyword:startNode.value,city:'北京'},
                {keyword:endNode.value,city:'北京'}
            ],function(status,data){
                console.log(data);
            })
        };

根據鼠標點擊錄入起始點和目標，規劃騎行路線

        var num = 0, arr = [];
        map.on('click',function(e){
            num++;
            // 點擊一次時將起始點計入數組
            if(num%2 == 1){
                arr = [e.lnglat.R,e.lnglat.P];
            }else{
                // 第二次點擊時開始規劃路線
                new AMap.Riding({
                    map:map,
                    panel:'panel'
                    }).search(new AMap.LngLat(arr[0],arr[1]),new AMap.LngLat(e.lnglat.R,e.lnglat.P),function(status,data){
                        console.log(data);
                })
            }
        });

地鐵+公交的導航方式

   <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=AMap.Transfer,AMap.Autocomplete"></script>
    new AMap.Transfer({
        map:map,
        panel:'panel'
        }).search([
            {keyword:起始點,city:'北京'},
            {keyword:終點,city:'北京'}
            //只支持數組的前兩個內容
        ],function(status,data){
            console.log(data);
    })

根據鼠標點擊錄入起始點和目標，規劃公交路線

        var num = 0, arr = [];
        map.on('click',function(e){
            num++;
            if(num%2 == 1){
                arr = [e.lnglat.R,e.lnglat.P];
            }
            else{
                new AMap.Transfer({
                    map:map,
                    panel:'panel',
                    city:'北京'
                    }).search(new AMap.LngLat(arr[0],arr[1]),new AMap.LngLat(e.lnglat.R,e.lnglat.P),function(status,data){
                        console.log(data);
                })
            }
        });

地圖類型的切換
AMap.MapType 引入這個插件

    map.addControl(new AMap.MapType({
        defaultType:1,//0 默認 1表明的是衛星
        showRoad:true //顯示路況
    }));

經常使用的插件鷹眼插件 OverView

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=AMap.OverView"></script> 
    map.addControl(new AMap.OverView());

控件的添加show()
控件的刪除hide()

   <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=AMap.OverView,AMap.Scale,AMap.ToolBar"></script> 
    var oV = new AMap.OverView({
        visible:true //默認顯示和隱藏
    });
    var oS = new AMap.Scale();
    var oT = new AMap.ToolBar()
    map.addControl(oV);
    map.addControl(oS);
    map.addControl(oT);
    let yyNode = gjtNode = blcNode = true;
    // 鷹眼（點擊對應的控制鷹眼按鈕）
    yy.onclick = function(){
        if(yyNode == true){
            oV.hide();
        }
        else{
            oV.show();
        };
        yyNode = !yyNode
    };
    // 工具條 
    gjt.onclick = function(){
        if(gjtNode == true){
            oT.hide();
        }
        else{
            oT.show();
        };

        gjtNode = !gjtNode
    };
    // 比例尺
    blc.onclick = function(){
        if(blcNode == true){
            oS.hide();
        }
        else{
            oS.show();
        };
        blcNode = !blcNode
    }

地圖加載完成事件 complete

        map.on('complete',function(){
           var text = new AMap.Text({
             text:'地圖加載完成',
             draggable:true,
             position:[116.379391,39.861536]
           }).on('mousemove',function(){
            console.log(1)
           });
           text.setMap(map);

        });
        console.log('地圖未加載');

地圖顯示等級改變事件

        map.on('zoomstart',function(){
            console.log('地圖等級改變開始');
        });
        map.on('zoomend',function(){
            console.log('地圖等級改變結束');
        });

中心點移動事件

        map.on('mapmove',function(){
            console.log('中心點移動中.');
        });
        map.on('movestart',function(){
            console.log('地圖中心點開始移動');
        });
        map.on('moveend',function(){
            console.log('地圖中心點移動結束');
        });

地圖容器大小發生改變事件

    map.on('resize',function(){
        console.log('容器大小改變中');
    });

覆蓋物與地圖的交互

    //覆蓋物
    var text = new AMap.Text({
        text:'覆蓋物事件',
        position:[116.379391,39.861536]
    });
    //鼠標移入覆蓋物
    text.on('mouseover',function(){
        console.log('覆蓋物移入');
    });
    //鼠標移出覆蓋物
    text.on('mouseout',function(){
        console.log('覆蓋物移出');
    });
    //鼠標在覆蓋物上移動
    text.on('mousemove',function(){
        console.log('覆蓋物上移動鼠標');
    });

插入圓形的矢量圖

        var circle = new AMap.Circle({
            center:[116.379391,39.861536],
            radius:10
        });
        circle.setMap(map);

插入長方形的矢量圖

        var rectangle = new AMap.Rectangle({
            bounds:new AMap.Bounds(new AMap.LngLat(116.379391,39.861536),new AMap.LngLat(116.379491,39.861636))
        });
        rectangle.setMap(map);

hide()隱藏
show()顯示

    circle.hide();
    rectangle.show();

右鍵菜單事件

    //建立一個右鍵菜單
    var contextmenu = new AMap.ContextMenu();
    //右鍵的第一個菜單
    contextmenu.addItem('放大一級',function(){
        map.zoomIn();
    },0);
    //右鍵的第二個菜單
    contextmenu.addItem('縮小一級',function(){
        map.zoomOut();
    },1);
    //給地圖綁定右鍵
    map.on('rightclick',function(e){
        //打開右鍵 
        //map 在哪一個地圖裏
        //參數2 - 位置
        contextmenu.open(map,e.lnglat);

        setTimeout(function(){
            contextmenu.close();
        },3000);
        // 關閉右鍵菜單
    });

DOM事件綁定

AMap.event.addDomListener （綁定的元素，綁定的事件名（click、mousedown），函數）
        var lis1 = AMap.event.addDomListener(button1,'click',function(){
            map.zoomIn();
        });

DOM事件解除綁定

AMap.event.removeListener (要解除綁定函數名)
        AMap.event.addDomListener(button2,'click',function(){
            AMap.event.removeListener(lis1);
        });

自定義事件 addListener/on/emit

       //變量記錄點擊幾回
        var count = 0;
        //點擊事件
        var _onClick = function(){
            //count事件：事件派發 也能夠說是變量的改變
            map.emit('count',{count:count += 1});
        };
        //監聽的變量發生改變時觸發的函數
        var _onCount = function(){
            console.log(count);
        };
        //監聽的變量發生改變時
        map.on('count',_onCount);
        AMap.event.addListener(map,'click',_onClick);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。