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

Question

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

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

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

我愿意使用 Kendo ASP.NET 来完成这个。

Answer 1

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

为此，您需要添加一个 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);
    }
});

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

A better way to create a pin point on the map

.net

c#

asp.net-mvc

kendo-ui

kendo-asp.net-mvc