c# - 使用 Google map 作为商店定位器

标签 c# javascript html asp.net iframe

因此,我构建了一个简单的商店定位器,花了几个小时尝试使其正常工作,最后意识到问题是 Google map 不允许您对整个页面进行 iframe。有什么办法可以让它显示出来吗?或者有一种方法可以在没有 iframe 的情况下完成我正在做的事情?

理想情况下,如果没有页面的其余部分, map 本身就很好,但我找不到一种方法来使用不需要数据库或某种数据文件的 api 来完成它,而且也有太多为了跟上这一趋势,许多商店的位置一直在变化。

这是我到目前为止所拥有的。

标记:

    <%@ Page Title="HelixMix | Where To Buy" Language="C#" MasterPageFile="~/Site.master"
    AutoEventWireup="true" CodeFile="WhereToBuy.aspx.cs" Inherits="WhereToBuy" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript">
        function reloadFrame(Map) {
            document.getElementById(Map).contentDocument.location.reload(true);
        }
    </script>
    <script type="text/javascript">
        function selectStore() {
            document.write("Please select at least one store."); // Change location on page...
        }
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div id="Locator">
        Zip code:
        <asp:TextBox ID="TextBox1" placeholder="Zip code" runat="server"></asp:TextBox>
        <div class="personalSpace">Which store would you like to search for? Please choose only one.</div>
        <ul id="stores">
            <li>Store name 1:
                <asp:RadioButton ID="RadioButton1" runat="server" />
            </li>
            <li>Store name 2:
                <asp:RadioButton ID="RadioButton2" runat="server" />
            </li>
            <li>Store name 3:
                <asp:RadioButton ID="RadioButton3" runat="server" />
            </li>
            <li>Store name 4:
                <asp:RadioButton ID="RadioButton4" runat="server" />
            </li>
            <li>Store name 5:
                <asp:RadioButton ID="RadioButton5" runat="server" />
            </li>
        </ul>
        <asp:Button ID="Button1" runat="server" Text="Find locations" OnClick="Button1_Click" />
        <div>
            <iframe id="Map" runat="server"></iframe>
        </div>
    </div>
</asp:Content>

背后的代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;


public partial class WhereToBuy : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Map.Visible = false;
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        Map.Visible = true;
        string zipCode = TextBox1.Text;
        string SearchURL = "";
        int store = 0;

        if (RadioButton1.Checked)
        {
            store = 1;
        }
        if (RadioButton2.Checked)
        {
            store = 2;
        }
        if (RadioButton3.Checked)
        {
            store = 3;
        }
        if (RadioButton4.Checked)
        {
            store = 4;
        }
        if (RadioButton5.Checked)
        {
            store = 5;
        }

        switch (store)
        {
            case 1:
                SearchURL = "https://www.google.com/maps/preview#!q=gnc+near%3A+";
                break;
            case 2:
                SearchURL = "https://www.google.com/maps/preview#!q=gnc+near%3A+"; //Change store name
                break;
            case 3:
                SearchURL = "https://www.google.com/maps/preview#!q=gnc+near%3A+"; //Change store name
                break;
            case 4:
                SearchURL = "https://www.google.com/maps/preview#!q=gnc+near%3A+"; //Change store name
                break;
            case 5:
                SearchURL = "https://www.google.com/maps/preview#!q=gnc+near%3A+"; //Change store name
                break;
            default:
                Page.RegisterClientScriptBlock("Select store", "<script>\n selectStore(); \n </script>"); //Rewrite flow to not load iframe if this executes... Back to new search...
                break;
        }

        Map.Attributes.Add("src", SearchURL + zipCode);
        Page.RegisterClientScriptBlock("Reload", "<script>\n reloadFrame('Map'); \n </script>");
    }
}

最佳答案

关于文本搜索的 GM api 的引用,特别是“near”, https://developers.google.com/places/documentation/search#PlaceSearchRequests

如果您想在 map 上显示多个搜索结果,您可能需要以下内容。 Google Maps Multiple Search Results

祝你好运!

关于c# - 使用 Google map 作为商店定位器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18091951/

相关文章:

c# - NuGet 包管理器 : 'AutoMapper' already has a dependency defined for 'Microsoft.CSharp'

javascript - 使用 jQuery 或 PHP 将 CSS 应用于 html 文档中的单词/字母

html - 没有 JavaScript 的 HTML/CSS 中 Unicode/Emojis 的替代文本?

c# - 如何在饼图中的图例中设置不同的标签

c# - 何时不应在 C# 中使用新的并行循环函数

javascript - 在 recursive-readdir 中包含多个文件扩展名

javascript - 团队成员查询任务

jquery - 隐藏和显示页脚不断重复滚动

css - HTML5 设计的网站 - 在 Chrome 和 Opera 中查看时固定按钮不再保持固定

c# - 使用 .NET Core 在 Windows 上执行 cmd.exe 命令 (webpack) 并保留颜色和输出