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

时间:2012-10-19 11:22:27

标签: javascript wordpress google-maps google-maps-api-3 geocoding

我有一个表单,我的一个输入允许我的用户输入他们的办公地点(地址)

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

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

http://jsfiddle.net/F2snX/

1个位置的片段如下(但最好看看完整的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 个答案:

答案 0 :(得分:3)

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

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

  2. 或者您在地图上绘制一个可拖动的标记,然后让用户将标记拖动到它们的位置。您可以在this posting找到一个很好的解释。

  3. 或者您将两个apporaches结合起来。让用户输入他们的地址,如果地理编码结果不合适,他们可以将标记拖动到正确的位置。 Here is an example by Google正是这样做的。