jQuery-Whatsnearby.js

概述

jQuery-Whatsnearby.js 是一个基于 jQuery 的 JavaScript 库，旨在提供一个简单易用的接口来获取任意位置附近的周边信息。它通过使用第三方地图服务的 API 来实现位置搜索和获取周边信息的功能。

功能特性

• 在地图上显示指定位置附近的 POI（兴趣点）信息，如餐厅、酒店、商店等。
• 支持自定义搜索半径和返回结果数量。
• 提供根据位置信息获取经纬度、地理编码的方法。
• 支持在地图上显示标记，并提供自定义标记样式的选项。
• 支持在地图上显示路线规划，提供了不同交通方式的选项。

如何使用

首先，引入 jQuery 和 jQuery-Whatsnearby.js 的脚本文件到你的 HTML 页面中。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="path/to/jquery-whatsnearby.js"></script>

接下来，创建一个容器用于显示地图，并设置地图的样式。

<div id="map" style="width: 500px; height: 400px;"></div>

在 JavaScript 中，使用以下代码初始化地图和搜索功能。

$(document).ready(function() {
    // 创建地图实例
    var map = new $.Whatsnearby.Map("map");

    // 获取当前位置信息
    map.getCurrentPosition(function(position) {
        // 在地图上显示当前位置附近的餐厅信息
        map.searchNearby(position, "restaurant", 1000, 10);
    });
});

以上代码会在地图上显示当前位置附近的 10 家餐厅，并且搜索半径为 1000 米。

API 参考

构造函数

$.Whatsnearby.Map(elementId, options)

创建一个地图实例。

• elementId (string) - 地图容器的元素 ID。
• options (object, optional) - 选项参数。
  • apiKey (string, optional) - 使用地图服务 API 的密钥。

方法

searchNearby(location, type, radius, limit)

搜索指定位置附近的 POI 信息。

• location (object) - 位置对象，包含经纬度信息。
  • latitude (number) - 纬度。
  • longitude (number) - 经度。
• type (string) - POI 类型，如 "restaurant"、"hotel" 等。
• radius (number) - 搜索半径，单位为米。
• limit (number, optional) - 返回结果数量限制。

getCurrentPosition(callback)

获取当前设备的位置信息。

• callback (function) - 位置信息回调函数，接受一个参数，为位置对象。

资源链接

• 项目地址：GitHub
• 地图服务 API 文档：API Documentation