这个jQuery插件可以帮助您的公司使用GoogleMaps API轻松创建商店定位器

在不使用任何额外的后端编程的情况下，您只需要将所有位置信息提供给它KML、XML或JSON数据。

基本用法（以Chipotle为例）：

1.包括jQuery库和jQuery商店定位器插件。

<script src="http://code.jquery.com/jquery.min.js"></script> 
<script src="js/jquery.storelocator.js"></script> 

2.包括所需的把手.js和谷歌地图API V3。

<script src="js/handlebars.min.js"></script> 
<script src="http://maps.google.com/maps/api/js?key=YOUR-API-KEY"></script> 

3.包括插件的样式表。

<link rel="stylesheet" href="css/storelocator.css">

4.HTML结构。

<div id="map-container">
<div id="loc-list">
<ul id="list">
</ul>
</div>
<div id="map"></div>
</div>

5.调用地图容器上的插件。

$(function() {
  $('#map-container').storeLocator();
});

6.选项和回调。

// Allows custom data to be sent with the AJAX request. 
// Set the setting to an object with your properties and values.
'ajaxData'                   : null,

// Display no results message vs. all locations when closest location is further than distanceAlert setting
'altDistanceNoResult'        : false,

// Set to true to enable Google Places autocomplete. 
// Note the slight markup differences in the example file.
'autoComplete'               : false,

// Disable the listener that immediately triggers a search when an auto complete location option is selected.
'autoCompleteDisableListener': false,

// Google Places autocomplete options object.
'autoCompleteOptions'        : {},

// Disable displaying markers and location list indicators with alpha characters.
'disableAlphaMarkers'        : false,

// Set to an array of taxonomies that should filter exclusively vs. inclusively.
'exclusiveTax'               : null,

// Set to true to highlight the nearest location automatically after searching.
'openNearest'                : false,

// Set to an object for custom sorting that accepts three properties: method ('alpha', 'date', or 'numeric'), order ('asc', or 'desc'), and prop (property in your data to sort by such as name, city, distance, etc.).
'sortBy'                     : null,

// HTML elements
'addressID'                  : 'bh-sl-address',
'closeIcon'                  : 'bh-sl-close-icon',
'formContainer'              : 'bh-sl-form-container',
'formID'                     : 'bh-sl-user-location',
'geocodeID'                  : null,
'lengthSwapID'               : 'bh-sl-length-swap',
'loadingContainer'           : 'bh-sl-loading',
'locationList'               : 'bh-sl-loc-list',
'mapID'                      : 'bh-sl-map',
'maxDistanceID'              : 'bh-sl-maxdistance',
'modalContent'               : 'bh-sl-modal-content',
'modalWindow'                : 'bh-sl-modal-window',
'overlay'                    : 'bh-sl-overlay',
'regionID'                   : 'bh-sl-region',
'searchID'                   : 'bh-sl-search',
'sortID'                     : 'bh-sl-sort',
'taxonomyFiltersContainer'   : 'bh-sl-filters-container',

// Google maps settings object.
'mapSettings'              : {
  zoom     : 12,
  mapTypeId: google.maps.MapTypeId.ROADMAP
},

// Marker Clusterer settings object.
'markerCluster'              : null,

// Replacement marker image used for all locations
'markerImg'                : null,

// Replacement marker dimensions object
// ex value: { height: 20, width: 20 }
'markerDim'                : null,

// Multiple replacement marker images based on categories object. 
// Value should be array with image path followed by dimensions.
// ex value: catMarkers : {'Restaurant' : ['img/red-marker.svg', 32, 32]}
'catMarkers'               : null,

// Selected marker image.
'selectedMarkerImg'        : null,

// Selected marker image dimensions object - ex value: { height: 20, width: 20 }
'selectedMarkerImgDim'     : null,

// The unit of length. Default is m for miles.
// Change to km for kilometers.
'lengthUnit'               : 'm',

// The number of closest locations displayed at one time. 
// Set to -1 for unlimited.
'storeLimit'               : 26,

// Displays alert if there are no locations with 60 m/km of the user's location. 
// Set to -1 to disable.
'distanceAlert'            : 60,

// The format of the data source. 
// Accepted values include kml, xml, json, and jsonp.
'dataType'                 : 'xml',

// Accepts raw KML, XML, or JSON instead of using a remote file.
'dataRaw'                  : null,

// The path to the location data.
'dataLocation'             : 'data/locations.xml',

// XML element used for locations (tag).
'xmlElement'               : 'marker',

// Background color of the odd list elements.
'listColor1'               : '#ffffff',

// Background color of the even list elements.
'listColor2'               : '#eeeeee',

// Display a marker at the origin.
'originMarker'             : false,

// Replacement origin marker image.
'originMarkerImg'          : null,

// Replacement origin marker dimensions object
// ex value: { height: 20, width: 20 }
'originMarkerDim'          : null,

// Bounces the maker when a list element is clicked.
'bounceMarker'             : true,

// First hides the map container and then uses jQuery’s slideDown method to reveal the map.
'slideMap'                 : true,

// Shows the map container within a modal window. 
// Set slideMap to false and this option to true to use.
'modal'                    : false,

// Modal selectors.
'overlay'                  : 'bh-sl-overlay',
'modalWindow'              : 'bh-sl-modal-window',
'modalContent'             : 'bh-sl-modal-content',
'closeIcon'                : 'bh-sl-close-icon',

// If true, the map will load with a default location immediately. 
// Set slideMap to false if you want to use this.
'defaultLoc'               : false,

// If using defaultLoc, set this to the default location latitude.
'defaultLat'               : null,

// If using defaultLoc, set this to the default location longitude.
'defaultLng'               : null,

// Set to true if you want to use the HTML5 geolocation API (good for mobile) to geocode the user's location.
'autoGeocode'              : false,

// Set to true if you want to give users an option to limit the distance from their location to the markers.
'maxDistance'              : false,

// ID of the select element for the maximum distance options.
'maxDistanceID'            : 'bh-sl-maxdistance',

// Set to true if you want to immediately show a map of all locations. 
// The map will center and zoom automatically.
'fullMapStart'             : false,

// Set to a zoom integer if you want to immediately show a blank map without any locations.
'fullMapStartBlank'        : false,

// Set to a number to limit the number of items displayed in the location list with full map start.
'fullMapStartListLimit'      : false,

// InfoBubble settings object. 
'infoBubble'                 : null,

// Set to true if you aren't able to use form tags (ASP.net WebForms).
'noForm'                   : false,

// Set to true to display a loading animated gif next to the submit button.
'loading'                  : false,

// Class of element container that displays the loading animated gif.
'loadingContainer'         : 'bh-sl-loading',

// restrict featured locations by a specified distance
'featuredDistance'           : null,

// Set to true to enable featuring locations at the top of the location list (no matter the distance).
// Add featured=”true” to featured locations in your XML or JSON locations data.
'featuredLocations'        : false,

// Set to true to enable displaying location results in multiple "pages."
'pagination'               : false,

// If using pagination, the number of locations to display per page.
'locationsPerPage'         : 10,

// Set to true to enable displaying directions within the app instead of an off-site link.
'inlineDirections'         : false,

// Set to true to allow searching for locations by name using separate searchID field.
'nameSearch'               : false,

// ID of the search input form field for location name searching.
'searchID'                 : 'bh-sl-search',

// If using nameSearch, the data attribute used for the location name in the data file.
'nameAttribute'            : 'name',

// Set to true to have the location list only show data from markers that are visible on the map.
'visibleMarkersList'       : false,

// Set to true to perform a new search after the map is dragged.
'dragSearch'               : false,

// Template paths
'infowindowTemplatePath'   : 'assets/js/plugins/storeLocator/templates/infowindow-description.html',
'listTemplatePath'         : 'assets/js/plugins/storeLocator/templates/location-list-description.html',
'KMLinfowindowTemplatePath': 'assets/js/plugins/storeLocator/templates/kml-infowindow-description.html',
'KMLlistTemplatePath'      : 'assets/js/plugins/storeLocator/templates/kml-location-list-description.html',

// ID of list template if using inline Handlebar templates instead of separate files.
'listTemplateID'           : null,

// ID of infowindow template if using inline Handlebar templates instead of separate files.
'infowindowTemplateID'     : null,

// Filtering object that can be used to set up live filtering
'taxonomyFilters'          : null,

// Class of the container around the filters.
'taxonomyFiltersContainer' : 'bh-sl-filters-container',

// Set to true to enable exclusive taxonomy filtering rather than the default inclusive.
'exclusiveFiltering'       : false,

// Set to true to enable query string support for passing input variables from page to page.
'querystringParams'        : false,

// Store user's location when autoGeocode in enabled to prevent multiple lookups per session.
'sessionStorage'           : false,

// Callbacks
'callbackAutoGeoSuccess'     : null,
'callbackBeforeSend'         : null,
'callbackCloseDirections'    : null,
'callbackCreateMarker'       : null,
'callbackDirectionsRequest'  : null,
'callbackFilters'            : null,
'callbackFormVals'           : null,
'callbackGeocodeRestrictions': null,
'callbackJsonp'              : null,
'callbackListClick'          : null,
'callbackMapSet'             : null,
'callbackMarkerClick'        : null,
'callbackModalClose'         : null,
'callbackModalOpen'          : null,
'callbackModalReady'         : null,
'callbackNearestLoc'         : null,
'callbackNoResults'          : null,
'callbackNotify'             : null,
'callbackPageChange'         : null,
'callbackRegion'             : null,
'callbackSorting'            : null,
'callbackSuccess'            : null,

// Language options
'addressErrorAlert'          : 'Unable to find address',
'autoGeocodeErrorAlert'      : 'Automatic location detection failed. Please fill in your address or zip code.',
'distanceErrorAlert'         : 'Unfortunately, our closest location is more than ',
'kilometerLang'              : 'kilometer',
'kilometersLang'             : 'kilometers',
'mileLang'                   : 'mile',
'milesLang'                  : 'miles',
'noResultsTitle'             : 'No results',
'noResultsDesc'              : 'No locations were found with the given criteria. Please modify your selections or input.',
'nextPage'                   : 'Next »',
'prevPage'                   : '« Prev'

更多示例：

• 模态窗口示例
• 默认位置示例
• HTML5自动地理编码示例
• KML示例
• JSON示例
• 最大距离示例
• 无表单标记示例
• 您可以在DIST文件夹下找到更多示例。

更新日志：

版本3.1.10（2023-02-20）

• 增加了地图标记的可访问性。
• 由于Google Charts API被弃用，以及Google标记标签的动画效果不佳，bounceMarker设置被弃用。
• 修复了位置对象属性丢失时新的禁用筛选功能的问题。
• 修复了标记标签无法使用以前的技术的问题。已切换到google.maps.Marker标签参数。
• 已更新包devDependencies。

第3.1.9版（2023-02-06）

• 添加了在使用包容性筛选时禁用在筛选后当前位置设置中没有匹配值的输入和选项字段的功能（默认）。
• 扩展名称属性设置，以便可以搜索多个属性。用逗号分隔属性名称。
• 当fullMapStart被启用并且taxFilters被重置并且名称搜索和原点为空时，固定的位置集长度场景。
• 如果没有使用默认排序的位置，则显示空的结果消息。
• 暂时修复了缺少Google Maps回调参数控制台错误-之前在API端没有强制执行参数要求。
• 更新了不推荐使用的google.maps.event.addDomListener与window.addEventListener的用法。

第3.1.8版（2022-08-22）

• 添加了坐标范围检查，以排除纬度和经度值无效的位置。

第3.1.7版（2022-06-27）

• 修复了空名称搜索值不清除以前的值的问题。
• 修复了openNearest设置无法与querystringParams设置结合使用的问题。
• 修复了启用自定义排序（sortBy）时openNearest设置无法打开正确位置的问题。

v3.1.6 (2021-12-06)

• 修复了空名称搜索值不清除以前的值的问题。
• 修复了openNearest设置无法与querystringParams设置结合使用的问题。
• 修复了启用自定义排序（sortBy）时openNearest设置无法打开正确位置的问题。

v3.1.5 (2021-09-30)

• 添加了额外的检查，以确保在启用defaultLoc和fullMapStart时映射不会触发两次。
• 启用defaultLoc时不需要fullMapStart，这只是避免用户错误的一种预防措施。
• 修正了上次更新中fitBounds更新时启用maxDistance时初始搜索的居中问题。

v3.1.4 (2021-06-07)

• 固定名称搜索筛选器值在清除表单输入时不清除

v3.1.3 (2021-05-09)

• 修复了空名称搜索字段值覆盖筛选结果的问题。
• 固定的过滤器组不应用在一起。
• 修复了在设置fullMapStartListLimit并且位置数小于限制时可能发生的错误。
• 将捆绑Handlebars更新到v4.7.7版本

版本3.1.1（2020-01-10）

• 增强了对正则表达式的筛选，以更好地说明与子字符串的精确匹配。
• 修复了上一版本3.1.0中引入的多类别选择过滤问题。
• 将捆绑的Handlebars更新到v4.7.6版本。
• 已更新节点模块。

第3.1.0版（2019-11-18）

• 添加了featuredDistance设置，以将特征位置限制为指定的距离（应使用数值）。
• 由于安全问题，已将Handlebars的捆绑版本更新为4.5.1版。
• 更新了分类法筛选REGEX和字符串替换，以支持国际字符。

v3.0.0（2018年9月30日）

• 添加了ajaxData，允许使用AJAX请求发送自定义数据。该设置接受一个对象。
• 添加了altDistanceNoResult设置，当最近的位置超过distanceAlert设置时，相对于所有位置不显示结果消息。
• 添加了回调AutoGeoSuccess回调，该回调在地理定位API返回成功结果后触发。
• 添加了callbackFormVals回调，该回调在从表单处理完表单值后触发。
• 添加了callbackGeocodeRestrictions回调，该回调允许覆盖componentRestrictions对象。
• 添加了callbackNearestLoc回调，该回调在使用openNearest设置触发最近位置时触发。
• 添加了callbackSorting回调，当选择新的排序方法时会触发该回调。
• 添加了用于地理编码的组件过滤，以更好地按区域进行限制。
• 增加了长度单位（距离英里/公里）前端交换功能、设置和示例文件。
• 为callbackSuccess回调添加了mappingObject、originPoint、data和page参数。
• 添加了新的前端排序功能、设置和示例文件。
• 添加了位置数据对象作为callbackDirectionsRequest回调的参数。
• 添加了openNearest设置，以在搜索后打开/选择最近的位置。
• 修正了功能位置设置的问题，即远距离的功能位置会触发距离警报。
• 修复了包含“与”符号的筛选值的问题，该问题不会显示任何结果-更新了筛选正则表达式。
• 修复了在使用fullMapStartBlank设置时跳过HTML5地理位置的问题。
• 修复了通过heldr88的PR没有结果后显示页码的问题
• 修复了分类筛选和自动地理编码设置的问题，HTML地理编码API将在每次更改筛选器时运行。
• 从项目中删除了Less，因为Bootstrap更新不再需要它。
• 将默认位置数据类型转换为JSON，而不是XML。
• 更新了Bootstrap示例文件以使用Bootstrap 4。
• 更新了分类法筛选，以便在选择筛选器后将分页重置为第一页。
• 修复了mapReload（由可选重置按钮触发）中storeLimit未重置的问题

2017-06-13

• 修正了使用查询字符串进行筛选时的错误，其中带空格的筛选值不起作用，更新了processForm方法，因此提交映射会将焦点从任何表单输入/选择字段中删除，而不仅仅是地址输入，更新了filterData字符串替换方法以匹配筛选器设置中的字符串替换方法

2017-05-08

• 添加了autoCompleteDisableListener设置以禁用在选择自动完成位置选项时立即触发搜索的侦听器，修复了在位置列表模板中放置无序列表触发的Handlebars目标问题

2016-12-04

• 添加了callbackRegion回调，允许在发送到Google Maps地理编码API之前设置区域

2016-10-02

• 修补程序，用于防止在位置类别未定义的情况下使用更新的filterData方法出现潜在错误，从而错过package.json文件中的更新版本

2016-09-30

• 添加了在筛选时替换非ASCII字符的检查，删除了processData方法中的非标准$1 RegExp属性，更新了版本

2016-07-20

• 添加了callbackMapSet回调，该回调在地图设置后触发，修复了没有属性的位置可以从以前的位置获取这些属性值的问题
• 修复了分页总页数基于完整位置集总数而不是storeLimit设置的问题

2016-07-03

• 修复了在进行完整地址搜索后新边界搜索AJAX参数的问题

v2.5.3版本（2016年4月4日）

• 无结果的返工处理

v2.5.2版本（2016-03-17）

• 修复了分页冒泡问题，修复了autoGeo代码和dragSearch组合的分页问题

v2.5.1版本（2016-03-13）

• 修复了visibleMarkersList和位置列表背景颜色和选择的问题。

v2.5.0版本（2016-03-06）

• 添加了新的dragSearch设置，该设置将在启用时拖动地图时形成新的搜索。
• 添加了新的geocodeID设置，这样HTML地理编码API可以由按钮触发，而不是自动触发。
• 修复了没有结果的问题，单击标记会显示上一个结果的数据，而单击位置列表项会引发错误。
• 合并了来自hawkeister的pull请求，并更新到具有main属性的bower.json文件。
• 合并了hyperTwitch的pull请求，修复了将fullMapStartListLimit与不同的存储限制结合使用的问题。
• 更新了对最新版本的jQuery引用。

v2.4.1版本（2016-01-21）

• 更改了新的完整地图开始列表限制，使其仅应用于初始加载。
• 修正了新的自动完成设置中搜索被触发两次的问题。
• 添加了新的选定标记图像选项以高亮显示单击的标记。
• 添加了Google Places自动完成选项和示例文件。
• 添加了完整地图起始位置列表限制设置。
• 修复了内联方向和默认位置设置组合的问题

v2.3.3版本（2015年12月23日）

• 删除了在没有结果时隐藏映射和结果，而只显示无结果消息和空映射
• 添加了fullMapStartBlank选项和示例

v2.2.4版本（2015-12-15）

• 已调整列表标签宽度样式。

v2.2.3版本（2015-12-13）

• 为内联方向面板表添加了预防性样式，切换为无单位线高度

v2.2.2版本（2015-12-01）

• 添加了预防性样式以避免表格与方向面板冲突，修复了启用内联方向的clearMarkers错误

v2.2.1版本（2015-11-28）

• 更新了预防性样式，以更具体地针对地图容器，并添加了最大高度img规则。

v2.2.0版本（2015-11-22）

• 添加了对谷歌地图API的检查。
• 添加了Grunt Handlebars任务，用于从src目录编译Handlebars模板，这将在未来的版本中增加更多的兼容性。
• 添加了预防性样式，以避免与CSS框架和重置发生冲突。
• 默认设计刷新。
• 修复了多个地址提交后出现的内联方向面板错误。
• 已从Google Maps API URL中删除传感器参数，因为它不再需要。
• 将默认插件样式从LESS切换到SASS。
• 已将包含的Handlebars更新到v4.0.5版本。

v2.1.0版本（2015-09-20）

• 增加了将数组对象作为dataRaw传入的功能。
• 添加了用于调试的writeDebug console.log帮助程序函数。
• 添加了sessionStorage选项，以在启用autoGeocode时存储用户的位置，从而防止每个会话进行多次查找。
• 修复了多个地址提交后出现的内联方向面板错误。
• 已更新processForm方法表单字段变量，其回退值为空字符串。

v2.0.9版本（2015-08-14）

• 修复了使用catMarkers设置而不设置位置类别导致错误的问题。

v2.0.8版本（2015-07-20）

• 更改了信息窗口和位置列表模板，以便在城市可用时添加逗号。
• 修复了内联方向中在目标地址前加“null”的问题。
• 修正了关闭方向错误，关闭图标点击次数不能超过两次。
• 修复了表单未覆盖查询字符串参数的错误。
• 已更新processForm方法以接受最大距离查询字符串参数。
• 更新了processForm方法，以使用现有的原始数据（如果存在并且匹配），从而避免不必要的地理编码请求。
• 将最大距离检查更新为小于或等于所选距离，而不是仅小于。
• 为了清楚起见，更新了options.md中的regionID描述。
• 更新了formEventHandler方法，以防止在keydown而不是keyup时提交ASP.net表单。
• 更新了options.md中的mapSettings描述，以突出显示可以将缩放设置为0以进行自动居中和缩放。

v2.0.7版本（2015-04-03）

• 修复了反向地理编码没有将原点传递给模板（自动地理编码和默认位置），导致方向链接不正确的错误。
• 已更新位置列表方向链接以使用https。
• 添加了使用exclusiveFiltering设置以独占方式而非包含方式筛选数据的选项。
• 添加了callbackFilters，该过滤器在更改过滤器时触发，并在需要时返回过滤器值。
• 添加了dataRaw选项，以使用原始KML、XML或JSON数据，而不是AJAX调用。
• 添加了基本的原始数据示例rawdata-example.php文件。
• 添加了visibleMarkersList选项，该选项可更新位置列表，以仅显示地图上当前显示的标记的数据。
• 更改了距离误差功能，使地图自动居中和缩放，所有位置都显示在地图上。
• 修复了fullMapStart和inlineDirections设置组合的问题。
• 修复了启用autoGeocode设置时未设置全局olat和olng变量的问题。
• 修复了maxDistance和autoGeocode设置组合的问题。

v2.0.5版本（2015-01-05）

• 修复了originMarker设置中的打字错误。
• 在设置自定义原点标记图像时，将originMarkerDim设置设为可选-默认为32px乘32px。
• 删除了geocodeErrorAlert语言选项，并将错误警报切换到自定义异常，这样用户就不会看到多个警报。
• 修复了在页面重新加载时没有删除关闭图标的内联方向错误。
• 添加了callbackListClick，它在单击列表元素时触发。
• 添加了callbackMarkerClick，它在单击地图标记时触发。

v2.0.4版本（2014-12-16）

• 修复了maxDistance和分页设置组合的错误。分页结果的最后一页被设置为使用locationsPerPage设置，而不是剩余的数字，这可能导致插件试图加载未定义的位置。
• 修复了googleGeocode和reverseGoogleGeocode方法中未定义对“this”的引用的错误。

v2.0.3版本（2014-12-12）

• 修复了maxDistance设置的错误-更新了locationsSetup方法，使locationset数组使用array.prush，而不是通过传入的参数递增，这会导致未定义的数组元素并导致错误。
• 从maxdistance-example.html中删除了保留的测试行。

v2.0.2版本（2014-12-08）

• 当使用内联模板选项来包括ID哈希时，更新了Handlebars.compile调用，使其与其他ID设置一致。
• 修复了modalClose方法中不正确的回调调用-callbackModalOpen到callbackModal Close。
• 添加了callbackModalReady，它在生成模态的内容时触发。
• 修复了markrSig设置-如果未设置markrDim，则先前引发错误。

v2.0.0版本（2014-11-03）

• 完成重写。
• 许多方法都是公共的，可以根据需要调用
• 谷歌地图设置现在作为一个设置公开。与其试图修改插件以更改谷歌地图设置，只需使用mapSettings选项进行覆盖即可。
• 添加了内联方向选项
• 通过正则表达式添加了多组实时过滤，用于快速分类等过滤。
• 添加了按名称搜索位置的选项
• 添加了按类别设置自定义标记的选项
• 添加了对结果进行分页的选项
• 添加了响应Bootstrap示例
• 添加了区域偏置设置以处理区域/国家选择字段
• 向主AJAX GET请求添加坐标和地址（用户输入），以实现更好的后端集成
• 添加了用于检查查询字符串参数的选项

v1.4.9 (2013-09-06)

• 将映射对象存储到jQuery对象中，以便通过调用$object.data（'map'）来检索它。
• 可以在位置中添加自定义变量
• 如果在位置中设置了“距离”变量，则不进行计算
• 启用新的谷歌地图https://developers.google.com/maps/documentation/javascript/basics#VisualRefresh
• 将提交图像按钮图像替换为按钮标签和CSS3
• 覆盖新的信息窗口Roboto字体以获得一致的风格
• 删除了图标阴影，因为它们在即将推出的谷歌地图版本中不再有效：请参阅https://developers.google.com/maps/documentation/javascript/basics#VisualRefresh
• 将JSON文件中每个位置的“locname”更改为“name”，以匹配其他位置数据类型并避免重命名
• 简化了代码的某些部分

v1.4.8 (2013-07-15)

• 增加了将“storeLimit”选项设置为-1的可能性，这意味着不受限制
• 增加了将“距离警报”选项设置为-1的可能性，这意味着禁用距离警报
• 只在“web”变量不为null时对其进行格式化，否则javascript会出错
• 可以在位置中添加自定义变量
• 如果在位置中设置了“距离”变量，则不进行计算
• 简化了代码的某些部分
• 如果noForm为true，则仅在字段实际处于焦点时模拟提交

 

预览截图

jQuery 谷歌地图商店定位器插件