高德API学习1

前言

未来工作中需要用到高德api,所以对其中的javascript API进行了学习。

代码如下：

<!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>基本地图展示</title>
    <link rel="stylesheet" href="main1119.css"/>
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
    <script src="es5.min.js"></script>
    <script src="map.js"></script>
    <script type="text/javascript" src="addToolbar.js"></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;
        }
    </style>
</head>
<body>
<div id="container" style="width:1100px;height:700px"></div>
<div id="panel"></div>

<script>
    //最主要的方法，进行地图的绘制
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom:13,
        center: new AMap.LngLat(116.397428, 39.90923)
        
    });
    
    
    var marker = new AMap.Marker({
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: [116.39,39.9]
        });
    marker.setMap(map);
    
     var infowindow = new AMap.InfoWindow({
     content: '<h3>高德地图</h1><div>高德是中国领先的数字地图内容、导航和位置服务解决方案提供商。</div>',
     offset: new AMap.Pixel(0, -30),
     size:new AMap.Size(230,0)
    })
    
    //infowindow.open(map,new AMap.LngLat(116.397057,39.908551));
    
    AMap.event.addListener(map, 'click', function(e) {
        new AMap.Marker({
            map:map,
            position: e.lnglat
        })
    })
    
    
    AMap.event.addListener(map,'click', function() {
        
    })
    map.on('click')
    
    marker.on('mouseover',function(e) {
        infowindow.open(map,e.target.getPosition());
    })
    marker.on('mouseout',function(e) {
        infowindow.close();
    })
    
    //加载公交站点查询插件
    AMap.service(["AMap.StationSearch"], function() {
        //实例化公交站点查询类
        var station = new AMap.StationSearch({
        pageIndex: 1, //页码
        pageSize: 60, //单页显示结果条数
        city:'010'    //确定搜索城市
        });
        //TODO:调用search方法
        //搜索“东直门”相关的公交站点
        station.search('东直门', function(status, result){
        //根据status判断是否有正确结果
        if(status === 'complete' && result.info === 'OK'){
                 //取得了正确查询结果
                debugger;
                // stationSearch_CallBack(result);
                    for(var i = 0;i<result.stationInfo.length; i++) {
                        (function(arg) {
                            var infowindow = new AMap.InfoWindow({
                             content: '<h3>地点信息</h1><div>'+ result.stationInfo[arg].name +'</div>',
                             offset: new AMap.Pixel(0, -30),
                             size:new AMap.Size(230,0)
                            })
                            new AMap.Marker({
                                map:map,
                                position: [result.stationInfo[arg].location.lng,result.stationInfo[arg].location.lat]
                            }).on('mouseover',function(e) {
                                infowindow.open(map,e.target.getPosition());
                            }).on('mouseout',function(e) {
                                infowindow.close();
                            })
                        })(i)
                    }
                 //stationSearch_CallBack可以进行一些结果的展示等

        }else{
             //查询失败或者没有合适结果
        }
    });
    }); 
    
    
    
    /*AMap.service('AMap.Transfer',function(){//回调函数
        //实例化Transfer
        //transfer= new AMap.Transfer({city: '北京市'});
        //TODO: 使用transfer对象调用公交换乘相关的功能
        var trans;
         var transOptions = {
            map: map,
            city: '北京市',                         //公交城市
            panel: 'panel',       
            policy: AMap.TransferPolicy.LEAST_TIME //乘车策略
        };
        //构造公交换乘类
        trans = new AMap.Transfer(transOptions);
        //根据起、终点坐标查询公交换乘路线
        trans.search([116.397057,39.908551], [116.483917,39.954491], function(status, result) {
            debugger;
            
        });
        /*AMap.event.addListener(trans, 'complete', function(e){
                        if(e.info === 'OK'){
                            var se = e.plans[0].segments;
                            for(var i = 0; i < se.length; i++){
                                console.log(se[i].instruction);
                            }
                            
                        }
                    });*/
//    })
    
    AMap.service('AMap.Transfer',function() {
        var trans = new AMap.Transfer({
            map:map,
            city:'北京市',
            panel:'panel',
            policy: AMap.TransferPolicy.LEAST_TIME //乘车策略
        })
        trans.search([{keyword:'天安门'},{keyword:'东直门'}]);
    })

    //步行导航
    /*AMap.service(["AMap.Walking"], function() {
        var MWalk = new AMap.Walking({
            map: map,
            panel: "panel1"
        }); //构造路线导航类
        //根据起终点坐标规划步行路线
        //MWalk.search([116.379028,39.865042], [116.427281,39.903719], function(status, result){
        MWalk.search([
            {keyword: '北京市地震局(公交站)'},
            {keyword: '亦庄文化园(地铁站)'}
        ], function(status, result) {

        });
    });*/
     var lineArr = [
        [116.368904, 39.913423],
        [116.382122, 39.901176],
        [116.387271, 39.912501],
        [116.398258, 39.904600]
    ];
    var polyline = new AMap.Polyline({
        path: lineArr,          //设置线覆盖物路径
        strokeColor: "#3366FF", //线颜色
        strokeOpacity: 1,       //线透明度
        strokeWeight: 5,        //线宽
        strokeStyle: "solid",   //线样式
        strokeDasharray: [10, 5] //补充线样式
    });
    polyline.setMap(map);
    
</script>
</body>
</html>

 

posted on 2016-04-26 16:31  苏南坡  阅读(659)  评论(0)    收藏  举报

导航