我正在制作一个使用 Google Maps API 的位置 map 。期望的结果是:
- 包含多个位置的 map (已完成、已测试、可按需要运行)。
- 自定义引脚(已完成、经过测试、按需要工作)。
---我无法弄清楚的事情---
- 信息窗口中的自定义内容(点击图钉,信息窗口将打开,其中包含姓名、地址等内容。)
- 位置列表中的链接,用于定位 map 并打开信息窗口。
JavaScript 到目前为止:
function initialize() { var myOptions = { zoom: 11, center: new google.maps.LatLng(-33.802544,151.20203), mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); setMarkers(map, lianaraine); } var lianaLocations = [ ['1', -33.750829,151.24086, 1], ['2', -33.846405,151.211677, 2], ['3', -33.876321,151.241171, 3], ['4', -33.871511,151.159599, 4], ['5', -33.901535,151.161743, 5], ['5', -33.676461,151.304244, 6] ]; function setMarkers(map, locations) { var image = new google.maps.MarkerImage('images/icon_mapPin.png', new google.maps.Size(30, 40), new google.maps.Point(0,0), new google.maps.Point(0, 40)); var shadow = new google.maps.MarkerImage('images/icon_mapPin_shadow.png', new google.maps.Size(26, 20), new google.maps.Point(0,0), new google.maps.Point(-13,21)); var shape = { coord: [1, 1, 1, 40, 30, 40, 30 , 1], type: 'poly' }; for (var i = 0; i < locations.length; i++) { var liana = locations[i]; var myLatLng = new google.maps.LatLng(liana[1], liana[2]); var marker = new google.maps.Marker({ position: myLatLng, map: map, shadow: shadow, icon: image, shape: shape, title: liana[0], zIndex: liana[3] }); } }
我正在使用 V3...如果这很重要?
我知道我还差得很远。任何帮助或指导将不胜感激。
提前致谢。
@rr Five
最佳答案
因此,您想要做的是拥有一个信息窗口,但它为每个标记获取不同的内容。即内容及其位置会随着用户点击而发生变化。因此,在创建标记的循环中,您还需要创建信息窗口。但是,您需要将其分离到另一个函数中,否则您最终会遇到每个信息窗口仅包含最后一个标记的内容的情况。
function setMarkers(map, locations) {
...
var infowindow = new google.maps.InfoWindow({
content: ''
});
for (var i = 0; i < locations.length; i++) {
var liana = locations[i];
var myLatLng = new google.maps.LatLng(liana[1], liana[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: liana[0],
zIndex: liana[3]
});
// add an event listener for this marker
bindInfoWindow(marker, map, infowindow, "<p>" + liana[0] + "</p>");
}
}
function bindInfoWindow(marker, map, infowindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
});
}
我不确定您从哪里获取地址详细信息 - 在我的示例中,我只是使用您传递给“title”属性的数组的相同部分,然后将其显示在信息窗口中。可能您必须使用 Geocoder service查找每个 latLng 的地址,这可能是数组中的附加列。
更新:如果您需要一个正常的链接触发器,就像您单击了标记一样,您需要做的是将标记放在一个数组中(使其成为一个全局变量,在创建标记后将其插入数组中)。单击链接会调用 JavaScript 函数,并传入一个数字来标识要使用数组中的哪个元素。然后您“触发”对该标记的点击,例如
<a href="#" onclick="showWindow(0); return false">One</a>
<a href="#" onclick="showWindow(1); return false">Two</a>
function showWindow(id) {
google.maps.event.trigger(markersArray[id], 'click');
}
关于javascript - 自定义信息窗口内容 > Google map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8200069/