Google Geocode不在MVC项目中工作

时间:2018-02-13 18:54:16

标签: javascript google-maps google-geocoder

我正在尝试从数据库中调用值(位置)。已使用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>
}

1 个答案:

答案 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>