如何制作网站上列出的动态地图？ [英] How can i make a Dynamic Map listed in Website?

问题描述

在我的应用程序中，我有一个商店搜索表单。

In my application, I have a store search form.

当用户在商店附近搜索时，

它会生成一个列表。具有地图链接的位置。

When user search for near by stores,
It generates a list of locations with a map link.

当用户单击地图链接时，应该为该特定位置构建代码。

When user click on the map link, it should build a code for that specifics location.

任何人都可以建议我如何做到这一点。

Can any one suggest me how can i get this done.

我正试图像这样

I am trying to do soothing like this

 public ActionResult GoogleMap(string address)
    {
        StringBuilder map = new StringBuilder();
        map.Append("<h1>");
        map.Append(address);
        map.Append("</h1>");
        ViewBag.Address = map;
        return PartialView("_GoogleMap");
    }

更多详细信息：

---

I还没有任何可用于从Google API检索地图的代码。我想做的是可以将位置的字符串地址传递给我的操作方法，并且我想要构建可以显示地图块的标记。

More Details:

---

I don't have any working code yet for retrieving map from Google API. What i want to do is I can pass String Address of the location in to my action method and I want to Build Markup that can display the Map Block.

工作代码链接

---

这是一些有效的代码我希望这将为我要实现的目标提供更多细节

Working Code Link

---

Here is some working code I hope this will give more details of what I am trying to achieve

如果我可以使用将完成所有操作的所有标记来构建我的字符串生成器。

If i can built my string builder with all the markup that will do all.

感谢

推荐答案

我是靠自己完成的

我的脚本（GoogleMap.js）就是这样

my Script(GoogleMap.js) is like this

var ad1 = $("#ad1").val();
var ad2 = $("#ad2").val();
var address1 = ad1;
var address2 = ad2;
//var lat = $("#lat").val();
//var lng = $("#lng").val();
var map;
var map2;
var gdir;
var gdir2;
var geocoder = null;
var geocoder2 = null;
var addressMarker;
var addressMarker2;


function initialize() {
if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    gdir = new GDirections(map, document.getElementById("directions"));
    GEvent.addListener(gdir, "load", onGDirectionsLoad);
    GEvent.addListener(gdir, "error", handleErrors);

    setDirections(address2, address1, "en_US");
    // setDirections("San Francisco", "Mountain View", "en_US");
}
}

function setDirections(fromAddress, toAddress, locale) {
gdir.load("from: " + fromAddress + " to: " + toAddress,
            { "locale": locale });
}

我的视图就是这样

---

将此包含在您的API密钥中

My View is like this

---

include this with your API key

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=ABQIAAAAOdhD1B3BVBtgDtcx-d52URS1RRrijDm1gy4LClE7B_C-myLe1RRtDZ0LHqXIq8q0z4mVVysLOLUxtA"></script>


@Html.Raw("<h1>"+PharmacyLocation+"</h1>")
@Html.Hidden("Adrs1", PharmacyLocation, new { id = "ad1" })
@Html.Hidden("Adrs2", DistanceFrom, new { id = "ad2" })
@Html.Hidden("lat", lt, new { id = "lat" })
@Html.Hidden("lng", lg, new { id = "lng" })

<style type="text/css">
  body {
    font-family: Verdana, Arial, sans serif;
    font-size: 11px;
    margin: 2px;
  }
  table.directions th {
background-color:#EEEEEE;
  }

  img {
    color: #000000;
  }
  .directions
  {
  }
  .directions td
  {
      width:300px;
  }
 #directions
 {
  width: 300px; height: auto;
  float: left;

 }
 #map_canvas{ 
  width: 300px; height: 400px;
  float:right;
  margin-top: 16px;
 }
</style>
<script src="../../Scripts/GoogleMap.js" type="text/javascript"></script>
<script>
  $(document).ready(function () {
     initialize()
 });

 </script>
<table class="directions">
<tr><th>Directions</th><th>Map</th></tr>

<tr>
<td valign="top"><div id="directions"></div></td>
<td valign="top"><div id="map_canvas"></div></td>

</tr>
</table>
<script>
    $("#map_canvas").attr("style", "position: absolute; background-color: rgb(229, 227, 223); padding-top:25px;");
</script>

希望这对任何有需要的人都是有用的。

Hope this will be useful for anyone who is in need.

这篇关于如何制作网站上列出的动态地图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！