使用主要查看 显示附近十个厕所代码示例:
<!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> <!-- 引入cdn --> <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>