我正在尝试从数据库中调用值(位置)。已使用Google商家信息自动填充功能输入该值。我成功地称之为价值。但是,我想要做的是使用此值在页面加载时显示地图上的位置 - 但我不知何故失败 - 任何想法?
更新的SNIPPET
<div id="errandPreviewLocationArea" class="manageArea row">
<div id="errandPreviewLocationDisplay" class="errandomDisplay col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-10">
@Html.DisplayFor(m => m.Location)
@Html.HiddenFor(m => m.Location, new { @id = "errandPreviewLocationDisplayValue", @class = "manageDisplay" })
</div>
<div id="errandPreviewMapDisplay" class="errandomDisplay col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-10">
</div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('errandPreviewMapDisplay'), {
zoom: 11,
center: { lat: 47.3666700, lng: 8.5500000 }
});
var geocoder = new google.maps.Geocoder();
var address = document.getElementById('errandPreviewLocationDisplayValue').value;
window.alert(address); // I get the value here, everything beyond this point does not work
geocoder.geocode({ address : address }, function (results, status) {
if (status === '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);
}
});
};
</script>
</div>
</div>
<div id="errandPreviewButtonSection" class="manageSection">
<div id="errandPreviewButtonArea" class="manageArea row">
<button id="errandPreviewButton" class="manageButton col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-10" type="submit">
Submit
</button>
</div>
</div>
}
</section>
<div id="errandPreviewReturnToMenuSection" class="manageReturnToMenuSection">
@Html.ActionLink("Return to Menu", "Index", "", htmlAttributes: new { @id = "errandPreviewReturnToMenuButton", @class = "manageReturnToMenuButton" })
</div>
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCy75bDy97SpW9gb-9SFWS-xevm7oT0SoU&callback=initMap">
</script>
}
答案 0 :(得分:0)
好的我通过将resultsMap更改为map来实现它:
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('errandPreviewMapDisplay'), {
zoom: 11,
center: { lat: 47.3666700, lng: 8.5500000 }
});
var geocoder = new google.maps.Geocoder();
var address = document.getElementById('errandPreviewLocationDisplayValue').value;
window.alert(address); // I get the value here, everything beyond this point does not work
geocoder.geocode({ address : address }, function (results, status) {
window.alert(status);
if (status === 'OK') {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
};
</script>