2

因此,最近对常规谷歌地图“嵌入”(iframe)代码缺乏可定制性感到有些失望;我已经开始修补 Google Maps API v3。真的,我想做的只是在地图上显示一个企业的标记,以便您可以单击它并转到 mapsgoogle.com 上的那个“地方”。

差不多了,我只想重新创建下面 iframe 代码的功能。我花了大约一个小时阅读文档,但仅将标记与“地点”相关联似乎非常复杂

这个地方

https://maps.google.com/maps?cid=1311411133662139490

标准嵌入_

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?cid=1311411133662139490&amp;ie=UTF8&amp;hq=&amp;hnear=&amp;t=m&amp;iwloc=A&amp;ll=41.097905,-73.405006&amp;spn=0.006295,0.006295&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?cid=1311411133662139490&amp;ie=UTF8&amp;hq=&amp;hnear=&amp;t=m&amp;iwloc=A&amp;ll=41.097905,-73.405006&amp;spn=0.006295,0.006295&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>

似乎 api 中没有使用cid.

详细说明

一般来说,我只会将它用于小型企业网站。我对常规的 iframe 嵌入和缺乏可定制性感到沮丧。本质上,我想要一个起点,我可以从中玩东西并大量自定义外观/感觉,但无法在与“地点”数据相关联的标记中放置 - 允许小弹出窗口, ETC..

老实说,在提出这个问题之前,我并没有真正做足够的研究——并且产生了一些误解。 我认为,我可能错了,API 仍然是我最终想要使用的,但如果我知道 Rick 的回答中的功能,我可能会解决这个问题,并在学习 gmaps API 上拖延更长时间。

4

3 回答 3

6

请允许我解释实现目标的一种选择。我使用 Google Maps API v3 提供的标记和 infoWindow 对象,您可以在我在链接中附加的文档中找到它们。随意跟随我创建的 jsFiddle:http: //jsfiddle.net/bgvYH/

首先,你想用它的选项来启动你的地图——我假设你知道下面代码片段中的不同变量代表什么:

var myLatlng = new google.maps.LatLng(41.097905,-73.405006);
  var myOptions = {
  zoom: 16,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

如果您想根据自己的喜好自定义地图,请查看您可以在 API 参考中设置的不同选项,您将在 myOptions 对象中设置这些选项(https://developers.google.com/maps /documentation/javascript/reference#MapOptions)。注意:我将地图的中心设置为餐厅的纬度/经度坐标 - 我取自您在 iframe 中提供的 URL ll=41.097905,-73.405006

现在您接下来要做的是确定要在 infoWindow 中显示的内容,因此餐厅信息:

var contentString = "<div id='content'>";
    contentString += "<div id='title'>Mr. Frosty's Deli and Grill</div>";
    contentString += "<div id='info'><p>10 1st Street</p><p>Norwalk, CT 06855</p><p>(203) 956-5767</p><p><a href='http://thebeachburger.com/'>thebeachburger.com‎&lt;/a></p></div></div>";

您甚至可能最终从数据库或 JSON 对象中提取这些信息,具体取决于您对该项目的深入程度(现在我将其作为静态 HTML)。

接下来我们初始化 infoWindow 对象并将 contentString 设置为 infoWindow 的 content 选项。您可以在此处自定义其他选项(就像地图选项一样,再次查看 InfoWindowOptions 的参考:https ://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions )

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

设置好 infoWindow 对象后,初始化标记对象 - 这会将气泡放置在地图上。再一次,您在初始化时设置标记的选项,就像您对地图对象和 infoWindow 对象所做的那样 - 您可以通过查看参考进一步自定义它(我认为那里甚至还有一个选项用于您可以在其中使用自定义图标的标记 - 您可以在这里获得非常有创意的东西)。

var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title:"Mr. Frosty's Deli and Grill"
});

最后,您需要将 Marker 和 infoWindow 绑定在一起 - 这样当用户单击标记时,信息就会弹出。这是通过使用事件侦听器来实现的,您可以在标记变量上侦听“单击”操作。阅读此文档以获取有关 google 地图https://developers.google.com/maps/documentation/javascript/events上的事件的信息。同样,通过 API 参考查看您可以在对象上监听的不同事件。

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

应该这样做,您应该有一个替代您包含的 iframe 的工作 - 除了现在您可以自定义地图以及您在其上执行的操作,无论您想要什么。在 jsFiddle 中,我还包含了一些样式,只是为了让 infoWindow 中的内容看起来不错。


Now, I want to let you know - I believe there is another option to what your looking for - but I have yet to experiment with this API. It is the Google Places API, which you'll have register for. But from what I read through the documents, I think you may be able to achieve what you want to do. Have a look at it ( https://developers.google.com/maps/documentation/places/ ), and see what's good.

于 2012-06-08T01:04:34.663 回答
1

看起来这是通过“我的地点”创建并公开的。如果您不想弄乱 API,那么这是您最好的选择。

访问 maps.google.com,点击“我的地点”和“创建地图”。自定义并获取嵌入代码。

于 2012-06-07T18:14:05.520 回答
0

如果地图不需要交互(除了点击操作),请使用静态地图。它只是一个图像,因此您可以将其包裹在一个精确指向您想要的位置的锚中。

于 2012-06-05T16:59:01.827 回答