绘图按钮添加纬度和经度输入字段？地理编码 [英] Plot Button to Add Latitude and Longitude to input fields? Geocode

问题描述

我有一个表单，我的一个输入可以让我的用户输入他们的办公地点（地址）。

从这个地址我想在他们的个人资料上绘制谷歌地图。我希望他们提供长和拉，但他们不知道如何。有没有一种方法，用户可以通过在地址栏中输入地址来填充长字段和拉字段，然后按下一个图表按钮，该按钮将返回long和lats并将其输入到相应的字段中。

到目前为止，我的代码如下（我做了一个JSFiddle，以避免在此消息中输入大量的代码）

http://jsfiddle.net/F2snX/

1的片段位置如下（但更好看完整的jsfiddle示例）

 < li id =field_15_92class =gfield > 
< label class =gfield_labelfor =input_15_92>律师业务地址< / label> 
< div class =ginput_container> 
< input id =input_15_92class =mediumtype =texttabindex =3value =name =input_92> 
< input type =buttonid =plot1value =Plot/>< br /> 
< / div> 
< div class =gfield_description>输入地址位置并按Plot按钮< / div> 
< / li> 
< li id =field_15_166class =gfield> 
< label class =gfield_labelfor =input_15_166>主要练习营业时间< / label> 
< div class =ginput_container> 
< input id =input_15_166class =mediumtype =texttabindex =4value =name =input_166> 
< / div> 
< div class =gfield_description>输入办公室开放时间< / div> 
< / li> 
< li id =field_15_167class =gfield> 
< label class =gfield_labelfor =input_15_167>主练习图经度< / label> 
< div class =ginput_container> 
< input id =input_15_167class =mediumtype =texttabindex =5value =name =input_167> 
< / div> 
< div class =gfield_description>输入经度坐标< / div> 
< / li> 
< li id =field_15_169class =gfield> 
< label class =gfield_labelfor =input_15_169>主练习图纬度< / label> 
< div class =ginput_container> 
< input id =input_15_169class =mediumtype =texttabindex =6value =name =input_169> 
< / div> 
< div class =gfield_description>输入纬度坐标< / div> 
< / li> 
  

谢谢

注意：我的Wordpress主题正在使用Google Maps API v3（如果有帮助的话）。

解决方案

基本上有两种方法可以解决这个问题：

1. 让用户输入地址并自己找出地理坐标。有关完整的功能集，请参阅 Geocoding API 的说明。




2. 或者在地图上绘制可拖动的标记并让用户将标记拖动到其位置。您可以在本帖子。




3. 或者你结合了两个应用程序。让用户输入他们的地址，如果地理编码结果不够好，他们可能会将标记拖动到正确的位置。 下面是Google的一个例子，正是这样。

I have a form and one of my inputs lets my user input their office location (address)

From this address I want to plot a google map on their profile. I would like them to supply the long's and lat's but they will have no idea how. Is there a way the user can populate the long and lat fields by entering an address into the address field and then pressing a plot button which will return the long and lats and input them into the appropriate fields.

My code so far is as follows (I made a JSFiddle to avoid putting a lot of code within this message)

http://jsfiddle.net/F2snX/

A snippet of 1 location is as follows (But better to see full jsfiddle example)

<li id="field_15_92" class="gfield">
<label class="gfield_label" for="input_15_92">Solicitor Practice Address</label>
    <div class="ginput_container">
        <input id="input_15_92" class="medium" type="text" tabindex="3" value="" name="input_92">
        <input type="button" id="plot1" value="Plot" /><br />
    </div>
<div class="gfield_description">Enter Address Location and Press Plot Button </div>
</li>
<li id="field_15_166" class="gfield">
<label class="gfield_label" for="input_15_166">Main Practice Opening Hours</label>
    <div class="ginput_container">
        <input id="input_15_166" class="medium" type="text" tabindex="4" value="" name="input_166">
    </div>
<div class="gfield_description">Enter Office Opening Hours</div>
</li>
<li id="field_15_167" class="gfield">
<label class="gfield_label" for="input_15_167">Main Practice Map Longitude </label>
    <div class="ginput_container">
        <input id="input_15_167" class="medium" type="text" tabindex="5" value="" name="input_167">
    </div>
<div class="gfield_description">Enter Longitude Coordinates</div>
</li>
<li id="field_15_169" class="gfield">
<label class="gfield_label" for="input_15_169">Main Practice Map Latitude</label>
    <div class="ginput_container">
        <input id="input_15_169" class="medium" type="text" tabindex="6" value="" name="input_169">
    </div>
<div class="gfield_description">Enter Latitude Coordinates</div>
</li>

Thanks

Note: My Wordpress theme is using Google Maps API v3 if that helps with anything.

解决方案

There are basically two ways how you can approach this problem:

1. Let the user enter an address and find out the geocoordinates yourself. See the description of the Geocoding API for a full feature set.

2. Or you draw a draggable marker on the map and let the user drag the marker to their location. You can find a good explanation in this posting.

3. Or you combine the two apporaches. Let the user enter their address, and if the geocoding result is somehow not sufficient, they may drag the marker to the correct location. Here is an example by Google that exactly does this.

这篇关于绘图按钮添加纬度和经度输入字段？地理编码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！