Question

正在完成工作的公司在美国各地都有许多终端或地点。终端管理员可以访问管理页面，让他们专门为他们的位置输入详细信息，包括他们的街道地址，城市，州，邮政编码，电话号码，电子邮件地址等。当这些显示在面向公众的页面上时，地图需要显示在地址旁边的块中。该地址被连接成可以在谷歌地图上搜索的东西，这需要显示。不幸的是，经过几天的研究，教程和技术文档似乎总是让我陷入死胡同，导致一些问题。我所拥有的最新代码是尝试将必要的代码放入HTML帮助函数中，代码如下：

    public static MvcHtmlString GoogleMapFor(this HtmlHelper htmlHelper, string address, int width = 450, int height = 250)
    {
        var url = new UrlHelper(htmlHelper.ViewContext.RequestContext);

        bool isSecure = HttpContext.Current.Request.IsSecureConnection;
        const string GOOGLE_MAP_DOMAIN = "maps.google.com";
        const string GOOGLE_MAP_ACTION = "/maps/embed/v1/place";
        string googleApiKey = ConfigurationManager.AppSettings["GoogleMapAPIKey"];

        var tag = new TagBuilder("iframe");
        tag.MergeAttribute("width", width.ToString());
        tag.MergeAttribute("height", width.ToString());
        tag.MergeAttribute("style", "border: 0");
        tag.MergeAttribute("frameborder", "0");
        tag.MergeAttribute("scrolling", "no");
        tag.MergeAttribute("marginheight", "0");
        tag.MergeAttribute("marginwidth", "0");

        var googleMapKeys = new Dictionary<string, string>
        {
            {"key", googleApiKey},
            {"q", address},
        };

        string googleMapUrl = String.Format (
                                                @"{0}://{1}{2}?{3}", 
                                                isSecure ? "https" : "http",
                                                GOOGLE_MAP_DOMAIN,
                                                GOOGLE_MAP_ACTION,
                                                googleMapKeys.Select(x => String.Format("{0}{1}{2}", url.Encode(x.Key), "=",  url.Encode(x.Value))).Join("&")
                                            );

        tag.MergeAttribute("src", googleMapUrl);
        return MvcHtmlString.Create(tag.ToString());
    }

在前端视图上的

，我使用以下代码：

<div class="sub-form" style="width: 49%; border: 1px solid #4b6c9e; border-left:none; height: 6.5em; float: left;">
    <dl class="dl-horizontal">
        <dd style="float: left; width: 100%; padding: 0;">
            Location
        </dd>
        <dt>
            @Html.GoogleMapFor("1601 Harbor Bay Parkway Alameda CA 94502");    
        </dt>
    </dl>
</div>

首先，google api密钥注册页面会询问请求来自哪个域。如果不是不可能的话，这将是困难的，因为所有终端都可以使用自定义URL并且经常这样做。这些是由当地管理人员设立的，我作为开发人员，无法控制这些甚至知道各个地区将使用哪些域名。

目前，我在本地运行该站点，并且没有SSL证书，并且大多数面向公众的服务器都没有SSL证书。我遇到的最新一期是嵌入式地图似乎不支持非安全页面，因为我在前端而不是我想看到的地图上收到此错误：

The Google Maps API server rejected your request. Requests to this API must be over SSL.

当我无法通过常规搜索技术找到解决方案时，我今天早上的大部分时间都在SO上浏览google-maps标记的帖子。是否有一个简单的实现，只是抓取一个地址并显示一个嵌入式谷歌地图，没有我无法满足的所有开销和要求。或者我应该抛弃Google，并尝试使用MapQuest（这甚至存在吗？），Yahoo Maps还是Bing？任何建议，将不胜感激。

Answer 1

据我了解，只有拥有与主机名匹配的正确API密钥，Google Maps API才能正常运行。解决此问题的一种方法是在页面中使用iframe指向您控制下的固定域，为此创建有效的API密钥。这样，无论终端管理员查看的网页的网址如何，包含iframe（包含Google地图代码）的网页都将始终来自具有有效API密钥的主机名。

所以你的页面代码看起来像这样：

<div class="sub-form" style="width: 49%; border: 1px solid #4b6c9e; border-left:none; height: 6.5em; float: left;">
   <dl class="dl-horizontal">
      <dd style="float: left; width: 100%; padding: 0;">
        Location
      </dd>
      <dt>
        <iframe src="//yourdomain.com/yourmapspage?address=1601 Harbor Bay Parkway Alameda CA 94502"></iframe>    
      </dt>
   </dl>
</div>

提供`/ yourmapspage＆＃39;然后可以通过一个简单的控制器和渲染来处理（不需要使用html扩展方法，尽管如果你愿意，也可以使用）。控制器可能如下所示：

public ActionResult GoogleMapPage(string address)
{
    var mapUrl; //build map URL here
    var mapViewModel = new MapViewModel { Address = address, MapUrl = mapUrl };
    return View("GoogleMap", mapViewModel);
}

Google地图＆＃39;视图将是这样的（仅为简洁指定src属性）：

@model MapViewModel
<div>
    <iframe src="@(Model.MapUrl + "&q=" + Model.Address)"></iframe>
</div>

Answer 2

是否有一个简单的实现只是抓住一个地址和显示嵌入式Google地图而不需要任何管理费用我无法遵守的要求。

考虑this

基本上这是为谷歌地图上的位置呈现标记的代码

@(
    Html.GoogleMap()
        .Name("map")
        .Center(c => c.Address("Florida, USA"))
        .Markers(m => m.Add())
)

简单的Google地图显示在ASP.NET MVC中的位置信息页面上

2 个答案: