首页手记高德地图javascriptAPI笔记
高德地图javascriptAPI笔记

标签：
Html/CSS Html5 CSS3
进行轨迹信息小红旗标位，点击小红旗进行信息窗口响应，用户足迹连线处理，调用高德地图公交、步行、自驾路线规则，测试过程暂绑定固定数据，可优化为真实数据，并可由用户自行输入起点和终点进行路线规则。
<!doctype html>
<html>
<head>
    <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>高德地图javascriptAPI笔记</title>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src = 'https://webapi.amap.com/maps?v=1.4.0&key=您申请的key值&plugin=AMap.AdvancedInfoWindow'></script>
    <style type="text/css">
        #panel {
            position: absolute;
            background-color: white;
            max-height: 80%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 250px;
            border: solid 1px silver;
        }
        div.amap-geo{display:none;}
        div.button-group{bottom:-10px;}
        div.amap-info-combo .tab{border:0}
    </style>
<body>
<div id='container'></div>
<div id="panel" style="display:none;">
</div>
<div id="tip" style="display:none;"></div><!--修改为block就可以定位信息-->
<div class="button-group">
    <input type="button" class="button" value="公交" onclick="transfer();"/>
    <input type="button" class="button" value="步行" onclick="walking();"/>
    <input type="button" class="button" value="自驾" onclick="driving();"/>
    <input type="button" class="button" value="信息窗体" onclick="openWindow();"/>
</div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://webapi.amap.com/ui/1.0/main.js"></script>
<script type="text/javascript">
    /***************************************
     由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。
     ***************************************/
    var map, geolocation;
    //加载地图，调用浏览器定位服务
    map = new AMap.Map('container', {
        resizeEnable: true,
        zoom:11,
        center: [113.360975,23.125178]
    });

    //给坐标商家位置插上小红旗,点击显示商家信息 begin
    var lnglats= [
        [113.324587, 23.106487],
        [113.325548, 23.106547],
        [113.325451,23.106273],
        [113.324976,23.105754],
        [113.324719,23.106126],
        [113.326033,23.106427],
        [113.323588,23.106363],
        [113.324446,23.10507],
        [113.324462,23.106264],
        [113.323223,23.106649],
        [113.321586,23.104557],
        [113.322136,23.107039]
    ];
    var data = ['广州小蛮腰','名人馆','石头记','甜品店','广州手信','东门','广州手信','广州手信','广州手信','广州手信','广州手信','广州手信'];
    var shopInfo = [
        '广州小蛮腰<br/>广州小蛮腰202793800<br/><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./flag_mark_red.png"/>广州小蛮腰202793800',
        '<span style="color:red;">名人馆</span>',
        '石头记',
        '甜品店',
        '广州手信',
        '东门',
        '广州手信',
        '广州手信',
        '广州手信',
        '广州手信',
        '广州手信',
        '广州手信',
    ];
    var discount = ['门票3折','门票5折','6折','2折','4折','7折'];
    //添加点标记，并使用自己的icon
    for(var i= 0;i<lnglats.length;i++) {
        var marker = new AMap.Marker({
            map: map,
            position: lnglats[i],
            title: data[i],
            icon: new AMap.Icon({
                size: new AMap.Size(40, 40),  //图标大小
                image: "http://www.easyicon.net/api/resizeApi.php?id=555380&size=24",
                imageOffset: new AMap.Pixel(6, 10)
            })
        });
        marker.content = data[i];
        marker.shopInfo = shopInfo[i];
        marker.on('click', markerClick);

        // 设置label标签
        marker.setLabel({//label默认蓝框白底左上角显示，样式className为：amap-marker-label
            offset: new AMap.Pixel(-12, -12),//修改label相对于maker的位置
            content: discount[i],
        });
    }

    function markerClick(e) {
        //设置DomLibrary，jQuery或者Zepto
        AMapUI.setDomLibrary($);

        //加载SimpleInfoWindow，loadUI的路径参数为模块名中 'ui/' 之后的部分
        AMapUI.loadUI(['overlay/SimpleInfoWindow'], function(SimpleInfoWindow) {

            var infoWindows = new SimpleInfoWindow({
                infoTitle: '<strong>'+e.target.content+'</strong>',
                infoBody: '<p>'+e.target.shopInfo+'</p>'
            });

            //显示在map上
            infoWindows.open(map, e.target.getPosition());
        });
    }
    map.setFitView();
    //给坐标商家位置插上小红旗,点击显示商家信息 end

    //用户消费商家轨迹 begin
    var lineArr = [
        [113.324587, 23.106487],
        [113.325548, 23.106547],
        [113.325451,23.106273],
        [113.324976,23.105754],
        [113.324719,23.106126],
        [113.326033,23.106427],
        [113.322136,23.107039]
    ];

    var polyline = new AMap.Polyline({
        path: lineArr,          //设置线覆盖物路径
        strokeColor: "#3366FF", //线颜色
        strokeOpacity: 1,       //线透明度
        strokeWeight: 6,        //线宽
        strokeStyle: "solid",   //线样式
        strokeDasharray: [10, 5], //补充线样式
        bubble: true,
        lineJoin: 'round',
        showDir: true
    });
    polyline.setMap(map);
    //用户消费商家轨迹 end

    //定位功能 begin
    /*
    map.plugin('AMap.Geolocation', function() {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition:'LB'
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });
    //解析定位结果
    var thisAddress = "";
    function onComplete(data) {
        var str=['定位成功'];
        str.push('经度：' + data.position.getLng());
        str.push('纬度：' + data.position.getLat());
        thisPosition = [data.position.getLng(),data.position.getLat()];
        if(data.accuracy){
            str.push('精度：' + data.accuracy + ' 米');
        }//如为IP精确定位结果则没有精度信息
        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
        str.push('地址：'+ data.formattedAddress);
        thisAddress = data.formattedAddress;
        document.getElementById('tip').innerHTML = str.join('<br>');
    }
    //解析定位错误信息
    function onError(data) {
        document.getElementById('tip').innerHTML = '定位失败';
    }
    */
    //定位功能 end

    //窗口导航
    function openWindow(){
        clearMap();
        var lnglat = [113.31621,23.12698];
        var content='';
        var  infowindow1 = new AMap.AdvancedInfoWindow({
            content: content,
            asDestination: true,
            asOrigin: false,
            placeSearch: false,
            autoMove: true,
            offset: new AMap.Pixel(0, -30),
            panel: panel,
            closeWhenClickMap: true
        });
        infowindow1.open(map,lnglat);
        $("#panel").css("display","block");
    }

    function transfer(){
        $("#hideRoad").css("display","block");
        clearMap();
        /*
         * 调用公交换乘服务
         */
        //加载公交换乘插件
        AMap.service(["AMap.Transfer"], function() {
            var transOptions = {
                map: map,                                 //指定地图对象，设置此参数后，路线规划结果将自动绘制在地图中
                city: '广州市',                            //公交城市
                panel:'panel',                            //用于显示路线指引信息的Div容器的id或Div元素，提供此参数后，路线指引信息将在此容器中进行展示。可选值
                //cityd:'乌鲁木齐',                        //终点城市
                policy: AMap.TransferPolicy.LEAST_TIME //乘车策略
            };
            //构造公交换乘类
            var trans = new AMap.Transfer(transOptions);
            //根据起、终点坐标查询公交换乘路线
            trans.search([{keyword:'广东省广州市天河区冼村街道'},{keyword:'广州南站'}], function(status, result){
            });
            $("#panel").css("display","block");
        });
     }
    function walking() {
        $("#hideRoad").css("display","block");
        clearMap();
        /*
         * 调用步行路线服务
         */
        //加载步行路线插件
        AMap.service(["AMap.Walking"], function () {
            var transOptions = {
                map: map,
                city: '广州市',
                panel: 'panel',
            };
            //构造公交换乘类
            var walking = new AMap.Walking(transOptions);
            //根据起、终点坐标查询步行换乘路线
            walking.search([{keyword: '广东省广州市天河区冼村街道'}, {keyword: '广州南站'}], function (status, result) {
                //TODO 解析返回结果，自己生成操作界面和地图展示界面
            });
            $("#panel").css("display", "block");
        });
    }

    function driving(){
        $("#hideRoad").css("display","block");
        clearMap();
        /*
         * 调用自驾路线服务
         */
        //加载自驾路线插件
        AMap.service(["AMap.Driving"], function() {
            var transOptions = {
                map: map,
                city: '广州市',
                panel:'panel',
                policy: AMap.DrivingPolicy.LEAST_TIME
            };
            //构造自驾路线类
            var driving = new AMap.Driving(transOptions);
            //根据起、终点坐标查询自驾路线
            driving.search([{keyword:'广东省广州市天河区冼村街道'},{keyword:'广州南站'}], function(status, result){
            });
            $("#panel").css("display","block");
        });
   }

   //清除地图
   function clearMap(){
       map.clearMap();
       $("#panel").css("display","none");
       $("#panel").html("");
   }
</script>
</body>
</html>
点击查看更多内容