Vue中使用高德地图,实现周边搜索
网上看了很多Vue中高德地图的Demo,感觉零零碎碎的,有些说到一半就不知道怎么回事了。在此记录下(这是我遇到的情况,如有其他坑,请自行踩坑)
忘了说了 这是基于element ui 的菜单栏做的 ,如不需要,自行剔除相关代码样式,重新写个滑块导航
一、安装npm
npm i @amap/amap-jsapi-loader --save
二、引入
Script 引入
import AMapLoader from "@amap/amap-jsapi-loader";
let AMap = null;
三、代码阶段
这个代码基本完成了周边的类型搜索、标注;只是对搜索类型的还没做,这个代码逻辑看懂了,类型搜索很简单了,我也是看了很多例子,零零碎碎的总结出来的代码
Html Demo:
View Code
View Code
View Code
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <el-menu 2 :default-active="activeIndex" 3 class="el-menu-demo" 4 mode="horizontal" 5 @select="handleSelect" 6 > 7 <el-menu-item index="1">交通</el-menu-item> 8 <el-menu-item index="2">娱乐</el-menu-item> 9 <el-menu-item index="3">商场</el-menu-item> 10 <el-menu-item index="4">学校</el-menu-item> 11 <el-menu-item index="5">医疗</el-menu-item> 12 </el-menu> 13 <div class="album" id="album"></div> 14 </div>
JS Demo:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 export default { 2 created() { 3 this.initAMap(); 4 }, 5 data() { 6 return { 7 activeIndex: "1", 8 }; 9 }, 10 mounted() {}, 11 methods: { 12 // 周边搜索 13 searchNear(mapNew) { 14 mapNew.clearMap(); 15 let placeSearch = new AMap.PlaceSearch({ 16 // city: '', // 兴趣点城市 17 citylimit: true, // 是否强制在设置的城市内搜索,默认false 18 type: "地铁", // 兴趣点类别,用‘|’分隔,默认:'餐饮服务|商务住宅|生活服务' 19 pageSize: 20, // 每页条数,默认10,范围1-50 20 pageIndex: 1, // 页码 21 extensions: "all", // 默认base,返回基本地址信息;all:返回详细信息 22 // map: AMap, // 地图实例,可选 23 // panel: 'panel', // 结果列表的id容器,可选 24 autoFitView: true, // 是否自动调整地图视野到marker点都处于可见范围 25 }); 26 27 let keywords = "", // 关键字 28 position = [104.070081, 30.581108], // 中心点经纬度 29 radius = 2000; // 搜索半径 0-50000 30 placeSearch.searchNearBy( 31 keywords, 32 position, 33 radius, 34 function (status, result) { 35 console.log(mapNew, "地图实列"); 36 // var icon = new AMap.Icon({ 37 // size: new AMap.Size(10, 10), // 图标尺寸 38 // image: iconquyu, // Icon的图像 39 // imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量,适于雪碧图等 40 // imageSize: new AMap.Size(40, 50), // 根据所设置的大小拉伸或压缩图片 41 // }); 42 // console.log(icon,"图片"); 43 new AMap.Marker({ 44 position: [ 45 104.070081, 46 30.581108, 47 ], //不同标记点的经纬度s 48 // icon: "http://store.is.autonavi.com/showpic/2f754f895d410592bdf46eeddc379bee",//中心点icon 49 title: 'aaa', 50 clickable:true, 51 // content:result.poiList.pois[i].name, 52 // text:result.poiList.pois[i].name, 53 // offset:[0,50], 54 map: mapNew, 55 }); 56 for (let i = 0; i < result.poiList.pois.length; i++) { 57 new AMap.Marker({ 58 position: [ 59 result.poiList.pois[i].location.lng, 60 result.poiList.pois[i].location.lat, 61 ], //不同标记点的经纬度 62 // icon: "http://store.is.autonavi.com/showpic/2f754f895d410592bdf46eeddc379bee", 63 title: result.poiList.pois[i].name, 64 clickable:true, 65 // content:result.poiList.pois[i].name, 66 // text:result.poiList.pois[i].name, 67 // offset:[0,50], 68 map: mapNew, 69 }); 70 } 71 console.log(status, result, "结果"); //这个结果可以看出周边的很多信息列表,根据结果做很多事,如果要翻页,请移步官网 在此如有需要 附链接https://lbs.amap.com/api/webservice/guide/api/newpoisearch 72 } 73 ); 74 }, 75 handleSelect(key, keyPath) { 76 console.log(key, keyPath); 77 }, 78 initAMap() { 79 let that = this; 80 AMapLoader.load({ 81 key: "0a3647329c1fceff9e14bcd1a27f4f0d", 82 version: "2.0", 83 plugins: ["AMap.PlaceSearch", "AMap.Geolocation"], 84 }) 85 .then((map) => { 86 AMap = map; 87 // 其他功能同h5 88 var mapNew = new AMap.Map("album", { 89 center: [104.070081, 30.581108], // 地图中心点坐标 90 zoom: 15, // 地图缩放级别 91 }); 92 that.searchNear(mapNew); 93 }) 94 .catch((e) => { 95 console.log("高德地图加载错误", e); 96 }); 97 }, 98 }, 99 };
Css Demo:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 .album { 2 width: 824px; 3 height: 532px; 4 border-radius: 4px; 5 position: relative; 6 } 7 .el-menu.el-menu--horizontal { 8 border-bottom: none; 9 } 10 .el-menu--horizontal > .el-menu-item.is-active { 11 border-bottom: none; 12 color: #409eff !important; 13 } 14 .el-menu--horizontal > .el-menu-item { 15 border-bottom: none; 16 }
代码看完,如对标记不懂的,移步:https://lbs.amap.com/api/javascript-api/reference/overlay#marker
对路线规划不懂的,移步:https://lbs.amap.com/api/javascript-api/guide/services/navigation
最后是我对每个功能代码期望的 效果图,顺便吐槽下:对那些没得效果图的,发出来干嘛啊 哈哈哈哈
key 自行去搜索高德地图Api, 到官网的控制台注册申请,创建个测试项目就有了
对了 如果对其中参数还不明白的 ,多看官网说明,理解就很简单了(再附一句,代码里面有很多测试代码已注释,基本没啥用,忘删了)