谷歌地图上的两个标记只有一个函数调用

时间:2018-04-10 10:49:37

标签: javascript jquery google-maps google-maps-api-3

我有一个小形式,用户可以通过zip和street输入位置。

<form>
    <input  id="zipcode" placeholder="" type="tel" pattern="d*" />
    <input  id="street1" placeholder=""  />
</form>

在JS中,我在保留输入时启动脚本。

$("#street1")
.blur(function () {
    if ($("#street1")
        .val()
        .length != 0 && $("#zipcode")
            .val()
            .length != 0) {
        var body = $("html, body");
        body.stop()
            .animate({
                scrollTop: 350
            }, 500, 'swing', function () {
                var targetAddress = $("#zipcode")
                    .val() + "," + $("#street1")
                    .val();
                codeAddress(targetAddress);
            });
    }
});

function codeAddress(target) {
address = target;
geocoder2 = new google.maps.Geocoder();
geocoder2.geocode({
    'address': address
}, function (results, status) {
    if (status === 'OK') {
        map.setCenter(results[0].geometry.location);
        homemarker2 = new google.maps.Marker({
            position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
            map: map,
            icon: iconPosition,
            draggable: true,
            title: 'Fixed'
        });
    }
});
}

地图以正确的位置为中心,但不仅仅有一个而是两个标记设置到该位置。你能帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:2)

因为您在htmlbody上绑定了事件。

删除逗号$("html, body")将按预期工作,

$("#street1")
.blur(function () {
    if ($("#street1")
        .val()
        .length != 0 && $("#zipcode")
            .val()
            .length != 0) {
        var body = $("html body"); // here
        body.stop()
            .animate({
                scrollTop: 350
            }, 500, 'swing', function () {
                var targetAddress = $("#zipcode")
                    .val() + "," + $("#street1")
                    .val();
                codeAddress(targetAddress);
            });
    }
});