vue开发：vue调用高德地图

最新推荐文章于 2025-06-17 14:05:30 发布

Generon

最新推荐文章于 2025-06-17 14:05:30 发布

阅读量1.3w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue开发

本文链接：https://blog.youkuaiyun.com/Generon/article/details/74922782

前言：在之前的博客中，有成功引入高德地图，这是以前的地址 vue 调用高德地图。

因为一些需求，需要使用到地图的周边功能。

完整的项目代码请查看我的github

一、先看要实现的结果，参考了链家的周边，如图所示。

二、原理分析

1、引入高德api，这个在之前的博客提到过，vue 调用高德地图。

2、使用地图的周边插件，这是高德网站的api。

1	`AMap.PlaceSearch` `//地点搜索服务插件，提供某一特定地区的位置查询服务`

在插件中的各种方法中选取了searchNearBy的方法。

1

2

3

4

5

 
         searchNearBy(keyword:String,center:LngLat,radius:Number, 
        
         callback: 
         function 
         (status:String,result:info/SearchResult)) 
        
         // 根据中心点经纬度、半径以及关键字进行周边查询 
        
         radius取值范围：0-50000