绘制按钮以将纬度和经度添加到输入字段？地理编码

Posted 2023-05-08

【中文标题】绘制按钮以将纬度和经度添加到输入字段？地理编码

【英文标题】：Plot Button to Add Latitude and Longitude to input fields? Geocode

【发布时间】：2012-10-10 00:08:27

【问题描述】：

我有一个表格，其中一个输入让我的用户输入他们的办公室位置（地址）

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

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

http://jsfiddle.net/F2snX/

1 个位置的 sn-p 如下（但最好查看完整的 jsfiddle 示例）

<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>

谢谢

注意：如果有任何帮助，我的 Wordpress 主题正在使用 Google Maps API v3。

【参考方案1】：

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

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

或者您在地图上绘制一个可拖动的标记，让用户将标记拖动到他们的位置。你可以在this posting找到一个很好的解释。

或者你将这两种方法结合起来。让用户输入他们的地址，如果地理编码结果不充分，他们可以将标记拖到正确的位置。 Here is an example by Google 正是这样做的。

【讨论】：

感谢您的提示。虽然我希望我可以让他们在第一个字段中输入地址，然后按 plot 会绘制 long 和 lat。我使用 woo 主题列表，当在后端添加位置时，它就是这样做的。输入地址，按 plot 并为您填写所有字段。所以我知道它可以做到，只是不确定具体如何......再次感谢，我会看看我是否能做到第 2 点

查看上面添加的示例 - 但不是在 dragend 处理程序中打开 infoWindow，而是更新表单字段。

太棒了，这看起来像我所追求的，你对信息窗口的建议很有意义。但是我仍然不确定（/足够技术）知道如何基于此填充输入字段。你认为你可以推荐一些代码吗？