javascript - 无法让地理编码器与文本框谷歌地图 API 一起使用

Question

我浏览了这个网站，但找不到明确的答案。首先我是一个 javascript 菜鸟。

我正在尝试设置一个谷歌地图，它从文本框中获取输入，然后在两个不同的文本框中输出纬度/经度。 .

我想做三件事。

1. 当我点击“地理编码”按钮时，使用文本框(名为 izipcode)作为地理编码的输入。
2. 当我将标记拖动到新位置时，必须使用新的纬度/经度更新文本框。截至目前，我可以在正确的框中获取纬度/经度，但一旦移动标记就无法更新它们。
3. 我只想使用一个标记，现在当我单击它时，它只会不断创建新标记。 顺便说一句，我的公司正在使用 Apache Wicket，这就是为什么我有一个单独的 JS 文件。

这是我的 HTML。

<wicket:extend>
    <div class="message_err" wicket:id="feedback">[feedback panel]</div>
    <div class="title" wicket:id="merchantstore.title"/>
    <form style="margin-top: 1em;" wicket:id="form">
        <fieldset>
            <table>
            <thead></thead>
                <tbody>

                     <tr>
                        <td><label for="iname"><wicket:message key="label.merchantstore.address">Address</wicket:message> <em>*</em></label></td>
                        <td><input id="iname" type="text" class="text" wicket:id="merchantstore.address" /></td>
                    </tr>

                    <tr>
                        <td><label for="icountry"><wicket:message key="label.merchantstore.countrycode">Country</wicket:message> <em>*</em></label></td>
                        <td><input id="icountry" type="text" class="text" wicket:id="merchantstore.countrycode" /></td>
                    </tr>
                      <tr>
                        <td><label for="icity"><wicket:message key="label.merchantstore.city">City</wicket:message> <em>*</em></label></td>
                        <td><input id="icity" type="text" class="text" wicket:id="merchantstore.city" /></td>
                    </tr>
                    <

                    <tr>
                        <td><label for="izipcode"><wicket:message key="label.merchantstore.zipcode">Zip code</wicket:message> <em>*</em></label></td>
                        <td><input id="izipcode" type="text" class="text" wicket:id="merchantstore.zipcode" value="" /></td>

                       <td><input type="button" class="geocode" onclick="codeAddress()" wicket:message="value:button.geocode" /></td></tr>

                      <tr>
                        <td><label for="ilatitude"><wicket:message key="label.merchantstore.latitude">Latitude</wicket:message></label></td>
                        <td><input id="ilatitude" type="text" class="text" wicket:id="merchantstore.latitude" /></td>
                    </tr>  
                <tr>
                        <td><label for="ilongitude"><wicket:message key="label.merchantstore.longitude">Longitude</wicket:message></label></td>
                        <td><input id="ilongitude" type="text" class="text" wicket:id="merchantstore.longitude" /></td>
                    </tr>



                    <td><div id="gmap" style="width: 512px; height:512px; margin-left: auto; margin-right: auto; margin-top: 50px;"></div></td>                     
                </tbody>
            </table>

        </fieldset>
        <p>
            <input type="submit" class="submit fixedbutton" wicket:message="value:button.save"/>
            <input type="button" class="fixedbutton" wicket:message="value:button.cancel" wicket:id="actionCancel" />
        </p>
    </form>



</wicket:extend>

这是我的 JS 文件。

function contactMap() {

    var myLatlng = new google.maps.LatLng(0,0);

    var mapOptions = {
        zoom: 1,
        minZoom: 1,
        center: myLatlng,
        disableDefaultUI: false,
        navigationControl: false,
        mapTypeControl: false,
        scrollwheel: true,

        // styles: styles,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var geocoder

    geocoder = new google.maps.Geocoder();      
    function codeAddress(){
                var Address=document.getElementById("izipcode").value;
                geocoder.geocode({ 'izipcode': address }, function(results, status){if (status == google.maps.GeocoderStatus.OK){
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                    map: map,
                    draggable:true,
                    position: results[0].geometry.location  });         

                }
                else
                    {
                    alert("Geocode is niet gelukt" + status);
                    };
                }) 
            }

    var map = new google.maps.Map(document.getElementById('gmap'), mapOptions);
    google.maps.event.trigger(map, 'resize');
    map.setZoom( map.getZoom() );


    google.maps.event.addListener(map, "click", function(event) {
        // get lat/lon of click
        var clickLat = event.latLng.lat();
        var clickLon = event.latLng.lng();

        // show in input box 
        document.getElementById("ilatitude").value = clickLat.toFixed(15);
        document.getElementById("ilongitude").value = clickLon.toFixed(15);

          var marker = new google.maps.Marker({
                position: new google.maps.LatLng(clickLat,clickLon),
                map: map,
                draggable: true,
             });
    });

    // keep googlemap responsive - center on resize
    google.maps.event.addDomListener(window, 'resize', function() {
        map.setCenter(myLatlng);
    });

};

function showMap(initWhat) {
    var script      = document.createElement('script');
    script.type     = 'text/javascript';
    script.src      = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&callback='+initWhat;
    document.body.appendChild(script);
}
    $( document ).ready(function() {

        // INIT CONTACT, NLY IF #contactMap EXISRS
        if(jQuery("#gmap").length > 0) {
            showMap('contactMap');
        }

});

Answer 1

似乎有几个问题......

我改变的第一件事是标记， 如果标记已经存在，您应该更新其位置，而不是每次都创建一个新标记。您可能想要清除该地址，或更新为新地址，或保持原样，由您决定。
http://jsfiddle.net/s9e7uj3p/
第53-62行:

    if (marker==null){
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(clickLat,clickLon),
            map: map,
            draggable: true,
         });
    } else {
        var myLatlng = new google.maps.LatLng(clickLat,clickLon);
        marker.setPosition(myLatlng);
    }

然后，由于范围的原因，您的按钮无法访问您的 codeAddress 函数。您应该将其移出或将其分配给 contactMap 函数之外的引用。

codeAddress = function codeAddress(){
            var Address=document.getElemen......
            ......

根据文档，您应该传递一个具有名为“地址”字段的对象。因此，无论您如何调用 izipcode，您仍然会传递字符串 address。
https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingRequests

            geocoder.geocode({ 'address': Address }, function(results, status){
                if (status == go......

正如之前所说，您想要更新，而不是创建一个新标记(如果存在)。同样适用于地理编码给您回电时。此外，您还应该更新 Lat Lng 文本框。

所以你的代码应该是这样的:

http://jsfiddle.net/s9e7uj3p/1/

最后，您还应该添加一个拖动时的监听器。

http://jsfiddle.net/s9e7uj3p/2/