在点击asp.net MVC时隐藏嵌入谷歌地图上的标记

Question

如下图所示 每当我选择任何序列号时，我只想显示所选序列号的标记。

默认情况下，我正在查看此

此外，搜索功能位于单独的局部视图中，该视图在图表视图中调用，并且在图表的布局中调用地图，贝娄是两者的代码

@using (Html.BeginForm("MultiGraph", "Home", FormMethod.Get))
{


    <div class="form-inline">
        @Html.DropDownList("search", null, "Select Serial Number", new { @class = "form-control", @style = "width:20%" })

        <input type='text' name="start_date" id="startTime" class="form-control" placeholder="Start Date" autocomplete="off" />
        <input type='text' name="End_date" id="endTime" class="form-control" placeholder="End Date" autocomplete="off" />
        <input id="recall" type="submit" value="Show Chart" class="btn btn-success" autocomplete="off"/>
        <a href="@Url.Action("Index","Home")">
            <img src="~/Image/back-button.png" alt="Go Back" title="Go Back" >

        </a>
        @*<input type="button" value="Back" class="btn btn-success" onclick="@Html.ActionLink("Index","Home")"/>*@
        @*<button class="btn btn-success form-control" onclick="" name="Back" value="Back"></button>*@
    </div>}

现在将此局部视图传递到图表视图

 <div style="font-family:'Times New Roman' ; font-size:large" align="center">

    @Html.Partial("_Search")

</div>

Bellow是嵌入谷歌地图的代码

<td style="text-align:center; width:22%; font-size:large; background-color:#C8E6C9; color:black">


                <iframe src="https://www.google.com/maps/d/u/0/embed?mid=1-VlXsvMWMr8EotfMcIwYKt-1SrI" width="320" height="350" style="margin-top:-383px"></iframe> </td>

怎么做我不知道 任何帮助都将受到高度赞赏

Answer 1

你在做什么？

您正在显示带有网址的静态图片

https://www.google.com/maps/d/u/0/embed?mid=1-VlXsvMWMr8EotfMcIwYKt-1SrI

代码中的

key=AIzaSyAa9-cVfW-usm6ebJTQBGYEsE2MrDWCIHU

Google我的地图

此静态图像由Google My Maps生成，https://support.google.com/mymaps/?hl=en#topic=3188329是一个带有图形界面的工具，允许用户创建个性化地图以便稍后检查。此工具无意为您尝试执行的应用程序生成动态URL，因为必须手动生成每个URL。

有关Google我的地图的详细信息，您可以查看以下网址 Google Static Maps API

Google Static Maps API

您的问题的解决方案位于其他地方。如果您想要显示静态图像，可以使用https://maps.googleapis.com/maps/api/staticmap?center=Williamsburg,Brooklyn,NY&zoom=13&size=400x400&markers=color:blue%7Clabel:S%7C11211%7C11206%7C11222&key=AIzaSyAa9-cVfW-usm6ebJTQBGYEsE2MrDWCIHU。

此API允许您生成动态URL，然后返回静态图像。 这项工作的一个例子是

https://developers.google.com/maps/documentation/static-maps/intro#Markers

在这个例子中，我将中心指定为“Williamsburg，Brooklyn，NY”，我创建了一个缩放为13，大小为400x400像素的图像。 此外，该图像还有三个蓝色标记。

请记住创建自己的API_KEY并在自己的项目中使用它。此参数将允许您控制发出的请求数和其他信息。

在此示例中，我使用的是StackOverflow API密钥<iframe src="CREATED_URL_HERE" style="margin-top:-383px"></iframe>，但您应该创建自己的密钥。

静态地图是一项重要的网络服务，您可以在以下链接中详细了解它 {{3}}

解决方案

您的问题的解决方案将涉及以下步骤：

1. 检查用户选择的序列号
2. 在您的应用程序中创建一个与该序列号的位置匹配的URL（记住创建一个宽度和高度值为width =“320”height =“350”的图像）
3. 将创建的网址放在let myStringContainsOnlyOneCharacter = mySting.rangeOfComposedCharacterSequence(at: myString.startIndex) == mySting.characters.indices
中
4. 瞧瞧！一切正常！

有它，希望它有所帮助！