高德地图基本使用

比眉伴天荒 2021-07-24 22:01 706阅读 0赞

1、引入
    	 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=创建新应用后的key"></script> 
    
    2、创建地图容器并设置大小
    	#container {width:100%; height: 100%; } 
    	<div id="container"></div> 
    
    3、创建地图
    	    <script>
            //初始化地图
            var map = new AMap.Map('container', {
                zoom:11,//级别
                center: [116.397428, 39.90923],//中心点坐标
                // viewMode:'3D'//使用3D视图
            });
    
            // 地图控件,同时引入工具条插件，比例尺插件和鹰眼插件
            AMap.plugin([
                'AMap.ToolBar',
                'AMap.Scale',
                'AMap.OverView',
                'AMap.MapType',
                'AMap.Geolocation',
            ], function(){
                // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
                map.addControl(new AMap.ToolBar());
    
                // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
                map.addControl(new AMap.Scale());
    
                // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
                map.addControl(new AMap.OverView({isOpen:true}));
            
                // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
                map.addControl(new AMap.MapType());
            
                // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
                map.addControl(new AMap.Geolocation());
            });
    
            //自动定位
            map.plugin('AMap.Geolocation', function () {
                geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true,//是否使用高精度定位，默认:true
                    timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                    maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                    convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                    showButton: true,        //显示定位按钮，默认：true
                    buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
                    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                    showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                    showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                    panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                    zoomToAccuracy:true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    
                });
                map.addControl(geolocation);
                geolocation.getCurrentPosition();
                AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
                AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
            });
    
            function onComplete(info)
            {
                console.log(info);
                
                //定位成功后开启查询服务,使用方法可查看官方的一些示例
                AMap.service(["AMap.PlaceSearch"], function() {
                    //构造地点查询类
                    var placeSearch = new AMap.PlaceSearch({ 
                        pageSize: 5, // 单页显示结果条数
                        pageIndex: 1, // 页码
                        city: "010", // 兴趣点城市
                        citylimit: true,  //是否强制限制在设置的城市内搜索
                        map: map, // 展现结果的地图实例
                        panel: "panel", // 结果列表将在此容器中进行展示。
                        autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                    });
                    //关键字查询
                    placeSearch.search('酒店');
                    //查询成功回调
                    AMap.event.addListener(placeSearch,'complete',function(res){
                        console.log(res);
                    })
                });
            }
            function onError()
            {
                alert('定位失败,请开启定位服务');
            }
        </script>

使用主要查看  
![在这里插入图片描述][2020090222443929.png_pic_center]  
显示附近十个厕所代码示例:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
        <title>Document</title>
        
        <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=1fef31a6f74570b99ee3ab3779a55b5e"></script> 
        <style>
            html,body{ width:100%; height: 100%;}
            #container { width:100%; height: 100%; }  
        </style>
    </head>
    <body>
        
        <div id="container"></div> 
        <script>
            //初始化地图
            var map = new AMap.Map('container', { 
                zoom:11,//级别
                center: [116.397428, 39.90923],//中心点坐标
                // viewMode:'3D'//使用3D视图
            });
    
            // 地图控件,同时引入工具条插件，比例尺插件和鹰眼插件
            AMap.plugin([
                'AMap.ToolBar',
                'AMap.Scale',
                'AMap.OverView',
                'AMap.MapType',
                'AMap.Geolocation',
            ], function(){ 
                // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
                map.addControl(new AMap.ToolBar());
    
                // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
                map.addControl(new AMap.Scale());
    
                // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
                map.addControl(new AMap.OverView({ isOpen:true}));
            
                // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
                map.addControl(new AMap.MapType());
            
                // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
                map.addControl(new AMap.Geolocation());
            });
    
            //自动定位
            map.plugin('AMap.Geolocation', function () { 
                geolocation = new AMap.Geolocation({ 
                    enableHighAccuracy: true,//是否使用高精度定位，默认:true
                    timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                    maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                    convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                    showButton: true,        //显示定位按钮，默认：true
                    buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
                    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                    showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                    showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                    panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                    zoomToAccuracy:true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    
                });
                map.addControl(geolocation);
                geolocation.getCurrentPosition();
                AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
                AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
            });
    
            //定位成功回调
            function onComplete(data)
            { 
                //每次定位成功清除所有的覆盖物避免重叠
                map.clearMap();
    
                searchNearBy(data);
            }
    
            //搜索附件厕所
            function searchNearBy(data)
            { 
                AMap.service(["AMap.PlaceSearch"], function() { 
    
                    //构造地点查询类
                    var placeSearch = new AMap.PlaceSearch({  
                        pageSize: 10, // 单页显示结果条数
                        pageIndex: 1, // 页码
                        citylimit: true,  //是否强制限制在设置的城市内搜索
                        map: map, // 展现结果的地图实例
                        // panel: "container", // 结果列表将在此容器中进行展示。
                        autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                    });
    
                    placeSearch.searchNearBy('卫生间',data.position,5000,
                        function(status,result){ 
                            console.log(result);
                        }
                    )
                });
            }
    
            function onError()
            { 
                alert('定位失败,请开启定位服务');
            }
        </script>
    </body>
    </html>

[2020090222443929.png_pic_center]: /images/20210724/cca6802a7b9e4d1fb51e8ff4d8e3ca37.png