簡單的Google地圖顯示在ASP.NET MVC的位置信息頁面上

正在完成這項工作的公司在美國各地有很多終端或地點。終端管理員可以訪問管理頁面，讓他們專門爲他們的位置輸入詳細信息，包括他們的街道地址，城市，州，郵編，電話號碼，電子郵件地址等。當這些顯示在公共頁面上時，地圖需要顯示在地址旁邊的一個塊中。地址被連接成可以在谷歌地圖上搜索的內容，並且需要顯示。不幸的是，經過幾天的工作，這些教程和技術文檔似乎總是讓我陷入死衚衕，導致一些問題。我有最新的代碼是把所需的代碼插入到HTML輔助函數用下面的代碼的嘗試：在前端視圖簡單的Google地圖顯示在ASP.NET MVC的位置信息頁面上

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地圖標記的帖子。有沒有一個簡單的實現，只是抓住一個地址，並顯示嵌入式谷歌地圖，沒有我不能遵守的所有開銷和要求。或者我應該拋棄Google，並嘗試與MapQuest合作（這是否已經存在？），Yahoo Maps或Bing？任何建議，將不勝感激。

來源

2014-09-18 stephenbayer

據我所知，只有擁有與主機名匹配的正確API密鑰，Google Maps API才能正常工作。解決這個問題的方法之一是在頁面中有一個指向您控制的固定域的iframe，爲此您創建一個有效的API密鑰。這樣，不管終端管理器查看的頁面的URL如何，包含iframe（包含谷歌地圖代碼）的頁面將始終來自具有有效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」然後可以通過簡單的控制和處理的渲染（不需要使用HTML擴展方法，儘管你可以如果你喜歡）。該控制器可以是這樣的：

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

的「GoogleMap的」的看法是這樣的（僅src屬性爲簡潔指定）：

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

來源

2014-09-19 14:37:15

有一個簡單的實現僅僅霎那一個地址和顯示一個嵌入式谷歌地圖，沒有所有的開銷和要求，我不能遵守。

this考慮

基本上，這是使一個標記用於在谷歌的位置的代碼映射

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

來源

2015-08-02 23:52:38

簡單的Google地圖顯示在ASP.NET MVC的位置信息頁面上

回答

相關問題