在地图上创建定位点的更好方法

Question

我想创建一个表单，用户可以在其中输入地址信息。 一开始，表单只会显示文本框和以某个点为中心的地图。

当用户输入信息并重新打开表单时，我希望创建一个针点来指出该位置（如果有）。

我搜索了自己，不确定什么是最好的方法。

我愿意使用 Kendo ASP.NET 来完成这项工作。

Answer 1

我假设您有一个为您提供地理数据的数据库/网络服务，并且您使用用户提供的地址进行查找。

为此，您需要添加一个Marker 类型的图层并将其绑定到提供坐标的数据源。见Binding markers to remote data。

@(Html.Kendo().Map()
    .Name("map")
    .Center(30.268107, -97.744821)
    .Zoom(15)
    .Layers(layers =>
    {
        layers.Add()
            .Type(MapLayerType.Tile)
            .UrlTemplate("http://tile2.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png")
            .Subdomains("a", "b", "c")
            .Attribution("&copy; <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>." +
                         "Tiles courtesy of <a href='http://www.opencyclemap.org/'>Andy Allan</a>");

        layers.Add()
            .Type(MapLayerType.Marker)
            .DataSource(dataSource => dataSource
                  .Read(read => read.Action("_StoreLocations", "Map"))
            )
            .LocationField("LatLng")
            .TitleField("Title");
    })
)

当用户输入他的地址信息时，您可以使用 ajax 请求来调用您的控制器并检索数据：

$.ajax({
    type: "POST",
    url: '@Url.Action("_StoreLocations", "Map")',
    contentType: "application/json; charset=utf-8",
    dataType: 'json',
    data: { addressInfo: info },
    success: function (result) {
        $("#map").data("kendoMap").layers[1].dataSource.data(result);
    }
});