Question

我需要创建一张地图。但是缩放和居中/标记等参数必须来自表单（从输入中选择中心/标记进行缩放）。挑战是控制台说setZoom：不是数字。但是当我按数字跳过设置缩放时，选择它可以工作，但在第二次提交点击后出现标记。 HTML

    <div class="form">
    <form>
        <div id="locationForm" class="form-group">
            <label for="address">Enter the location where you want to check the weather</label>
            <input id="address" type="text" class="form-control" placeholder="location">
        </div>
        <div id="zoomForm" class="form-group">
            <label for="zoom">Choose Zoom</label>
            <select id="zoom" class="form-control">
                <option value="1">World</option>
                <option value="3">Landmass/continent</option>
                <option value="10">City</option>
            </select>    
    <div id="required">
</div>
<button id="submit" type="submit" class="btn btn-default" value="Geocode">Submit</button>
    </form>
</div>

地图

function initMap(zoom, address) {

    map = new google.maps.Map(document.getElementById('map'), {
        zoom: zoom,
        center: new google.maps.LatLng(52, 20)
    });

    google.maps.event.addListener(map, 'idle', checkIfDataRequested);

    map.data.addListener('click', function (event) {
        infowindow.setContent(
            "<img src=" + event.feature.getProperty("icon") + ">"
            + "<br /><strong>" + event.feature.getProperty("city") + "</strong>"
            + "<br />" + event.feature.getProperty("temperature") + "&deg;C"
            + "<br />" + event.feature.getProperty("weather")
        );
        infowindow.setOptions({
            position: {
                lat: event.latLng.lat(),
                lng: event.latLng.lng()
            },
            pixelOffset: {
                width: 0,
                height: -15
            }
        });
        infowindow.open(map);
    });
    var geocoder = new google.maps.Geocoder();

    document.getElementById('submit').addEventListener('click', function () {
        geocodeAddress(geocoder, map);
    });

    function geocodeAddress(geocoder, resultsMap) {
        var address = document.getElementById('address').value;
        geocoder.geocode({'address': address}, function (results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                resultsMap.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: resultsMap,
                    position: results[0].geometry.location
                });
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }

}

验证

$('#submit').click(function () {
    event.preventDefault();
    $('p').remove();
    // if (Validation()) {
        var yourZoom = ($('#zoom')[0].value),
            yourAddress = $('#address')[0].value;

        google.maps.event.addDomListener(window, 'load', initMap(yourZoom, yourAddress));
  // }
});

Answer 1

请永远记住你使用jquery的时间。

这可能因数据类型而异，因此请在需要时转换为int，如下所示： -

parseInt($('#zoom')[0].value);

这将解决您的问题。

谷歌地图缩放＆amp;中心挑战

1 个答案: