插件 jQuery.latitude longitude picker gmaps 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.latitude longitude picker gmaps 中文API文档 https://github.com/wimagguc/jquery-latitude-longitude-picker-gmaps

jQuery Latitude and Longitude Picker for Google Maps

1.1.2

A jQuery Latitude and Longitude plugin to pick a location using Google Maps.

Supports multiple maps. Works on touchscreen. Easy to customize markup and CSS.

Check out the live demos.

Features

Basic functions

  • Move the marker on the map to receive the updated latitude, longitude and zoom values in the hidden fields

  • “location_changed” event will be fired, with the gllLatlonPicker Node JS object as attribute for easy access

Map with location search field:

  • If the search has results, the first element will appear on the map (with the default zoom value 11)

  • You can set default latitude, longitude and zoom values in the hidden fields

  • Use any custom id you want

Map with reverse lookup:

  • WHen the position changes the location’s name will be returned

  • The “location_changed” event will also be fired with the gllLatlonPicker Node JS object as attribute

  • To disable this, you can set queryLocationNameWhenLatLngChanges param to false

Adjust latitude, longitude and zoom fields on the fly:

  • Set any default latitude, longitude and zoom values. The map shows your data after pressing the update button.

  • Any fields can be hidden or visible fields to ease user input

Before you start

To use the Maps JavaScript API and the Geocoding API, you must get an API key which you can then add to your website, or web server. The API key is used to track API requests associated with your project for usage and billing. https://developers.google.com/maps/documentation/javascript/get-api-key#get-an-api-key

Get started

Import jQuery and Google Maps (don’t forget to change the Google Maps script import tag to include your API key):

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

Import the plugin:

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

Add a HTML markup:

  <fieldset class="gllpLatlonPicker">
    <input type="text" class="gllpSearchField">
    <input type="button" class="gllpSearchButton" value="search">
	<div class="gllpMap">Google Maps</div>
	<input type="hidden" class="gllpLatitude" value="20"/>
	<input type="hidden" class="gllpLongitude" value="20"/>
	<input type="hidden" class="gllpZoom" value="3"/>
  </fieldset>

(See more options in the demos)

Customize default settings

If you want to modify the default parameters, you need to disable the auto-init procedure first. You can do this by adding the following code when importing the plugin scripts:

  <link rel="stylesheet" type="text/css" href="css/jquery-gmaps-latlon-picker.css"/>
  <script>
    $.gMapsLatLonPickerNoAutoInit = 1;
  </script>
  <script src="js/jquery-gmaps-latlon-picker.js"></script>

Then copy the init code from “jquery-gmaps-latlon-picker.js” and extend it. Here is an example:

<script>
  $(document).ready(function() {
    // Copy the init code from "jquery-gmaps-latlon-picker.js" and extend it here
    $(".gllpLatlonPicker").each(function() {
      $obj = $(document).gMapsLatLonPicker();

      $obj.params.strings.markerText = "Drag this Marker (example edit)";

      $obj.params.displayError = function(message) {
        console.log("MAPS ERROR: " + message); // instead of alert()
      };

      $obj.init( $(this) );
    });
  });
</script>

License

MIT, do-with-the-code-whatever-you-please License

This code uses the jQuery Javascript library and the Google Maps API. To read more about these, go to:

Special thanks

  • To @Beanow for his suggestions
  • To @famzah for the easy-to-customise default settings code

About

Richard Dancsi


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>