Question

我正在尝试将我的模型中的地址绑定到Google地图上的标记。地图应显示使用模型的完整地址确定的标记。在地图旁边，我想显示标记的lat和lng的值。用户应该能够拖放标记和lat＆amp;的值。 lng应该更新。我使用jsFiddle作为从这个网站引用的开始，但我不能让它工作。我用标记指向模型的地址成功创建了地图。不幸的是，我在添加knockout来绑定它时遇到错误：

未捕获错误：无法解析绑定。
消息：ReferenceError：lat未定义;
绑定值：值：lat

这是观点：

@model GoogleMapTest.Models.Restaurant
@{
    ViewBag.Title = "Index";
}
<div id="panel">
<input id="address" value="">

<p data-bind="with: selectedPoint">
   Name: <b>@Model.Name</b>
   <br />
   Lat: <span data-bind="text: lat"></span>
   <br />
   Long: <span data-bind="text: long"></span>
</p>
</div>

<div id="map-canvas"></div>

这是剧本：

@section scripts {
<script type="text/javascript">
    var geocoder;
    var map;
    var orignalLat;
    var originalLong;

    $(function () {
        var stringAddress = '@Model.Address1' + ", " + '@Model.City' + ", " + '@Model.StateProv' + ", " + '@Model.Zip' + ", " + '@Model.Country';
        $("#address").val(stringAddress);
        geocoder = new google.maps.Geocoder();
        var mapOptions = {
            zoom: 16
        }
        google.maps.event.addDomListener(window, 'load', codeAddress(stringAddress));
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    });

    function codeAddress(address) {
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {

                orignalLat = results[0].geometry.location.lat();
                originalLong = results[0].geometry.location.lng();
                map.setCenter(results[0].geometry.location);

                viewModel.selectedPoint(new point('', orignalLat, originalLong));

            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }

        });
    }

    function point( name, lat, long) {
        this.name = name;
        this.lat = ko.observable(lat);
        this.long = ko.observable(long);

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, long),
            title: name,
            map: map,
            draggable: true
        });

        //if you need the position while dragging
        google.maps.event.addListener(marker, 'drag', function () {
            var pos = marker.getPosition();
            this.lat(pos.lat());
            this.long(pos.lng());
        }.bind(this));

        //if you just need to update it when the user is done dragging
        google.maps.event.addListener(marker, 'dragend', function () {
            var pos = marker.getPosition();
            this.lat(pos.lat());
            this.long(pos.lng());
        }.bind(this));
    }

    var viewModel = {
        selectedPoint: ko.observable(new point('', 10, 10))

    };

    ko.applyBindings(viewModel);       
</script>
}

非常感谢任何帮助或建议。

编辑工作解决方案...

Answer 1

您的viewModel由一系列点组成，但您的标记直接绑定到根viewModel上不存在的lat和lng属性。所以这就是你得到错误的原因，但如何修复它更有趣。

我实际上不确定你要做什么，而且基于此修复是不同的。您想要在用户选择一个点时显示一个标记吗？或者你是否希望每个点从一开始就在地图上有一个标记？

如果您想要所有点的标记，请更改标记以绑定到所有点：

<p data-bind="foreach: points">
    Name: <b>@Model.Name</b>
    <br />
    Lat: <span data-bind="text: lat"></span>
    <br />
    Long: <span data-bind="text: long"></span>
</p>

或者......如果您只想要一个标记，我会先向您的viewModel添加一个“selectedPoint”

var viewModel = {
    selectedPoint: new point('', 0, 0),
    points: (removed)
};

然后在你的标记中，将lat和lng绑定在选定的点上

<p data-bind="with: selectedPoint">
    Name: <b>@Model.Name</b>
    <br />
    Lat: <span data-bind="text: lat"></span>
    <br />
    Long: <span data-bind="text: long"></span>
</p>

MVC4淘汰Googlemap绑定错误

1 个答案: