需要在不初始化到特定位置的情况下拥有GMap

Question

我正在尝试实现一个绑定到输入字段的谷歌地图。

但我需要输入字段不具有初始值，并且地图最初设置为某个城市。这可能吗？输入字段的id为"gmap-address"。

<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
});
}

为了指定地图的中心，您需要使用纬度、经度坐标。如果您真的需要使用城市名称，您可以首先使用Geocoding API对城市进行地理编码，然后将地图的中心设置为地理编码器返回的坐标。我已经在以下JSFiddle中演示了如何使用德克萨斯州休斯顿作为地图最初设置的城市：

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

我希望这能有所帮助！