Question

我正在尝试实现绑定到输入字段的Google地图。

但是我需要输入字段不要有初始值，并且要将地图初始设置为某个城市。那可能吗？输入字段有id＆＃34; gmap-address＆＃34;。

<div class="section">
    <input name="gmap-address" class="form-control" type="text" id="gmap-address" style="font-size:2em;height:3em;"/>
</div>

<input name="gmap-lat" type="text" id="gmap-lat"/>
<input name="gmap-long" type="text" id="gmap-long"/>
<input name="us9-city" type="text" id="us9-city"/>
<input name="us9-state" type="text" id="us9-state"/>
<input name="us9-zip" type="text" id="us9-zip"/>
<input name="us9-street1" type="text" id="us9-street1"/>
<div id="gmap" style="width: 60%; height: 500px; margin:0 auto; padding-top:5%;"></div>

<script>
    function init(lat, long){
        jQuery('#gmap').locationpicker({
            location: {
                latitude: lat,
                longitude: long
            },
            radius: 300,
            onchanged: function (currentLocation, radius, isMarkerDropped) {
                var addressComponents = jQuery(this).locationpicker('map').location.addressComponents;
                updateControls(addressComponents);
            },
            oninitialized: function(component) {
                var addressComponents = jQuery(component).locationpicker('map').location.addressComponents;
                updateControls(addressComponents);
            },
            inputBinding: {
                latitudeInput: jQuery('#gmap-lat'),
                longitudeInput: jQuery('#gmap-long'),
                locationNameInput: jQuery('#gmap-address')
            },
            markerInCenter: true,
            enableAutocomplete: true,
            addressFormat: 'postal_code',
            scrollwheel: false
        });
    }
    function updateControls(addressComponents){
        jQuery('#us9-street1').val(addressComponents.addressLine1);
        jQuery('#us9-city').val(addressComponents.city);
        jQuery('#us9-state').val(addressComponents.district);
        jQuery('#us9-zip').val(addressComponents.postalCode);
        jQuery('#us9-country').val(addressComponents.country);
    }

</script>

Answer 1

查看代码，输入字段最初没有任何值。

至于将地图设置为最初设置为某个城市：您可以在启动地图时执行此操作：

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }

要指定地图的中心，您需要使用纬度，经度坐标。如果您确实需要使用城市名称，可以先使用地理编码API对城市进行地理编码，然后将地图中心设置为地理编码器返回的坐标。我已经演示了如何在以下JSFiddle中使用Houston，TX作为地图最初设置为的城市：

https://jsfiddle.net/3qoub0nv/1/

我希望这有帮助！

需要在没有初始化到特定位置的情况下使用GMap

1 个答案: