如何實如今H5裏調起高德地圖APP？

時間 2019-11-12

標籤如何如今 h5 地圖 app 简体版

原文原文鏈接

http://www.cnblogs.com/milkmap/p/5912350.htmljavascript

這一篇文章，將講述如何在H5裏調起高德地圖APP，並展現興趣點。適合於展現某個餐館，商場等，讓用戶自行選擇前往方式。css

場景1、在高德地圖上展現Marker點或者POI標記

在一些基於位置分享的應用開發中，咱們會在地圖上標記marker點或者使用地圖上的poi點，這時候若是能在高德地圖客戶端展現這個位置的話，用戶就可使用導航或者路線規劃等功能前往指定地點，起到引導用戶前往的做用，所以JSAPI提供的調起高德地圖並顯示點標記或者poi點的功能，以知足此類需求。html

點標記位置展現

一般咱們都使用Marker點來進行位置的標定，因此JSAPI在Marker類中提供了markOnAMAP的方法，這個方法接受一個JSON對象參數，參數對象包含position和name兩個屬性，調起以後將在高德地圖客戶端或者Web站點標記顯示對應的Marker點，基於marker點的展現，用戶能夠接着使用周邊搜索、路線規劃和導航等功能。掃描右側二維碼，點擊地圖中見的marker點查看移動端調起來效果。java

核心代碼：web

var marker = new AMap.Marker({
        position:[116.473188,39.993253]
    });

    marker.markOnAMAP({
        position: marker.getPosition(),
        name:'首開廣場'//name屬性在移動端有效
    })

所有源代碼，可複製後直接使用：api

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>點標記</title>
    <style>
        body,#mapContainer{
            margin:0;
            height:100%;
            width:100%;
            font-size:12px;
        }
    </style>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0?v=1.0" />
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值&plugin=AMap.ToolBar"></script>
    <script>
        function init() {
            map = new AMap.Map("mapContainer", {
                zoom: 18,
                center:[116.473188,39.993253]
            });
            marker = new AMap.Marker({
                map:map,
                position:[116.473188,39.993253]
            })
            marker.setLabel({
                offset: new AMap.Pixel(20, 20),//修改label相對於maker的位置
                content: "點擊Marker打開高德地圖"
            });
            marker.on('click',function(e){
                marker.markOnAMAP({
                    name:'首開廣場',
                    position:marker.getPosition()
                })
            })
            map.addControl(new AMap.ToolBar());
            if(AMap.UA.mobile){
                document.getElementById('button_group').style.display='none';
            }
        }
    </script>
</head>
<body onload="init()">
    <div id="mapContainer" ></div>
    <div class="button-group" id='button_group' style='top:15px;bottom:inherit'>
        <img src="http://a.amap.com/lbs/static/img/markonapp.png" style='width:120px;height:120px'>
        <div class='button' style='text-align: center'>手機掃碼打開demo</div>
    </div>
</body>
</html>

這一篇文章將告訴您，若是直接打開高德地圖APP，並展現路線規劃。適合有定位的移動設備，能夠查詢到從「個人位置」到目的地的路徑規劃，並直接導航。app

場景2、調起高德地圖的路線規劃功能

導航是目前JSAPI沒法覆蓋到的高德地圖客戶端的重要功能，目前高德地圖提供了駕車、公交、步行三種方式的導航服務，JSAPI在Driving、Transfer、Walking三個路線規劃插件類中提供了相關功能調起接口，使用這些接口開發者能夠在Web頁面中直接打開客戶端的路線規劃結果界面，也能夠看到客戶端提供的策略更豐富的路線規劃結果，只須要點擊一下即可以開始導航。想要實現這個功能只須要兩步：ui

加載路線規劃插件並建立對象

這裏咱們以駕車路線規劃爲例，加載Driving插件，建立Driving對象，同時設置駕車策略爲最短期：es5

AMap.plugin(["AMap.Driving"], function() {
            var drivingOption = {
                policy:AMap.DrivingPolicy.LEAST_TIME,
                map:map
            };
            var driving = new AMap.Driving(drivingOption); //構造駕車導航類
        });

調用searchOnAMAP方法

Driving對象建立完畢以後，只須要在須要的地方調用searchOnAMAP方法就能夠了，下面代碼中是在button的點擊事件中調用的。searchOnAMAP方法接收一個JSON對象參數，對象中須要指定路線規劃的起終點座標，同時也能夠設定起終點名稱，示例代碼中咱們利用了JSAPI路線規劃的結果數據中的起終點座標。調起高德地圖客戶端以後，只要點擊‘開始導航’就可使用導航功能了:spa

//根據起終點座標規劃駕車路線
        driving.search(
            [{keyword:'北京站'},{keyword:'北京大學'}],
            function(status,result){
                button.onclick = function(){
                    driving.searchOnAMAP({
                        origin:result.origin,
                        destination:result.destination
                    });
                } 
            });

查看所有源代碼

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title></title>
    <style>
        body,#mapContainer{
            margin:0;
            height:100%;
            width:100%;
            text-align: center;
            font-size:12px;
        }
        .panel{
            position: absolute;
            top:15px;
            right: 15px;
        }
        .qrcodetxt{
            background-color: #0D9BF2;
            padding: 6px;
            color: white;
        }
        .center{
            position: absolute;
            width: 100%;
            bottom: 24px;
        }
        .btmtip {
            cursor: pointer;
            border-radius: 5px;
            background-color: #0D9BF2;
            padding: 6px;
            width: 160px;
            color: white;
            margin: 0 auto;
        }
    </style>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0?v=1.0" />
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值&plugin=AMap.ToolBar"></script>
    <script>
        function init() {
            var button = document.getElementById('bt');
            map = new AMap.Map("mapContainer");
            AMap.plugin(["AMap.Driving"], function() {
                var drivingOption = {
                    policy:AMap.DrivingPolicy.LEAST_TIME,
                    map:map
                };
                var driving = new AMap.Driving(drivingOption); //構造駕車導航類
                //根據起終點座標規劃駕車路線
                driving.search([{keyword:'北京站'},{keyword:'北京大學'}],function(status,result){
                    button.onclick = function(){
                        driving.searchOnAMAP({
                            origin:result.origin,
                            destination:result.destination
                        });
                    } 
                });
                
            });
            map.addControl(new AMap.ToolBar());
            if(AMap.UA.mobile){
                document.getElementById('bitmap').style.display='none';
                bt.style.fontSize = '16px';
            }else{
                bt.style.marginRight = '10px';
            }
        }
    </script>
</head>
<body onload="init()">
    <div id="mapContainer" ></div>
    <div class='center'>
        <div id='bt' class="btmtip">點擊去高德地圖</div>
    </div>
    <div class="panel" id='bitmap' style='top:15px'>
        <img src="http://a.amap.com/lbs/static/img/drivingonapp.png" style='width:120px;height:120px'>
        <div class='qrcodetxt' style='text-align: center'>手機掃碼打開demo</div>
    </div>
</body>
</html>

相關標籤/搜索

每日一句

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