jQuery纬度经度选择器基于Google Maps的使用教程

jQuery纬度经度选择器基于Google Maps的使用教程

本教程将引导您了解并使用[wimagguc/jquery-latitude-longitude-picker-gmaps](https://github.com/wimagguc/jquery-latitude-longitude-picker-gmaps.git)这个开源项目，它提供了一个通过Google Maps来选取经纬度的jQuery插件。

1. 项目目录结构及介绍

该项目遵循简洁的目录布局，便于理解和维护：

• css: 包含样式表文件，用于定制插件的外观，主要文件是jquery-gmaps-latlon-picker.css。
• js: 存放JavaScript文件，包括插件的核心代码jquery-gmaps-latlon-picker.js以及依赖的jQuery版本（例如jquery-2.1.1.min.js）。
• .gitignore: 指定了Git在提交时应忽略的文件或目录。
• LICENSE.md: 许可证文件，声明了MIT协议，允许自由使用、修改和分发此代码。
• README.md: 主要的读我文件，提供了快速入门指南和基本参数设置信息。
• demo.html: 实际使用的演示页面，展示了插件的基本用法。
• google-maps-latitude-longitude-picker.*: 示例JSON数据文件，可能用于示例中的配置或数据展示。

2. 项目的启动文件介绍

项目的关键在于正确导入必要的资源并初始化插件。虽然没有一个单一的“启动文件”，但您可以从demo.html中学习如何集成到您的网页中：

1. 引入jQuery：

   <script src="js/jquery-2.1.1.min.js"></script>
   

2. 加载Google Maps API（记得替换YOUR_API_KEY）：

   <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false"></script>
   

3. 引入插件样式和脚本：

   <link rel="stylesheet" href="css/jquery-gmaps-latlon-picker.css">
   <script src="js/jquery-gmaps-latlon-picker.js"></script>
   

之后，在HTML中添加标记，并使用JavaScript初始化插件。

3. 项目的配置文件介绍

本项目的核心配置并不直接存储于单独的配置文件中，而是通过JavaScript进行自定义。您可以在引入插件后，通过以下方式覆盖默认配置：

1. 首先，可以通过设置$gMapsLatLonPickerNoAutoInit = 1;来禁止自动初始化，然后手动调用初始化函数，并传递自定义参数。这通常在主JavaScript逻辑中完成，如：

   <script>
       $gMapsLatLonPickerNoAutoInit = 1;
       $(document).ready(function() {
           $("gllpLatlonPicker").each(function() {
               var obj = $.gMapsLatLonPicker();
               obj.params.strings.markerText = "拖动这个标记进行编辑";
               obj.params.displayError = function(message) {
                   console.log("地图错误: " + message);
               };
               obj.init($(this));
           });
       });
   </script>
   

   上面的代码片段展示了如何修改标记文本和错误处理函数，以及如何逐个对匹配元素初始化插件。

请注意，API密钥的配置不是在这个项目内部进行的，而是在调用Google Maps API的脚本标签中直接指定key=YOUR_API_KEY进行。

以上就是这个基于Google Maps的经纬度选择器插件的基本使用和配置指导。确保在使用前已获取Google Maps API的API密钥，这是运行项目的关键步骤之一。