导致链接在地图上平移并打开标记 [英] Causing links to pan to and open markers in map

问题描述

JS小提琴：
http://jsfiddle.net/megatimes/NVDLf/7/

我有一张从数组中创建多个标记的地图。
在地图下方有一些链接，点击时，我想让地图平移到各自的标记，然后打开信息窗口。

鉴于我不想将链接本身作为创建标记的循环的一部分，我该怎么做？

我相当肯定这是一个范围问题，因为地图下方的链接打开位置数组中的最后一项，但我似乎无法弄清楚解决它。

谢谢

  var locations = [
 [
位置1，
215 West Girard Avenue 19123，
39.9695601，
-75.1395161
，
 [
位置2，
5360 Old York Road 19141，
40.034038，
-75.145223
，
 [
位置3，
1350 W Girard Avenue 19123，
39.9713524，
-75.1590360

]; 
 
 
 var map = new google.maps.Map（document.getElementById（'map'），{
 zoom：12，
 center：new google.maps .LatLng（39.9995601，-75.1395161），
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}）; 
 
 var infowindow = new google.maps.InfoWindow（）; 
 
 var marker，i; 
 
（i = 0; i< locations.length; i ++）{
 marker = new google.maps.Marker（{
 position：new google.maps.LatLng （位置[i] [2]，位置[i] [3]），
 map：map 
}）; 
 
 google.maps.event.addListener（marker，'click'，（function（marker，i）{
 return function（）{
 infowindow.setContent（locations [i ] [b]）; 
 infowindow.open（map，marker）; 
} 
}）（marker，i））; 
 
 
 $ b $（function（）{
 $（'＃locations h3 a'）。each（function（）{
 $（this ）.on（'click'，function（）{
 google.maps.event.trigger（marker，'click'）; 
}）
}）; 
}） ; 
 
< div id =mapstyle =width：500px; height：400px;>< / div> 
< div id =locations> 
< h3>< a href =＃>位置1< / a>< / h3> 
< p>任意内容约1< / p> 
 
< h3>< a href =＃>位置2< / a>< / h3> 
< p>任意内容约2< / p> 
 
< h3>< a href =＃>位置3< / a>< / h3> 
< p>任意内容约3< / p> 
< / div> 
  

解决方案

你可以这样做：

http://jsfiddle.net/6vjwd/2 / embedded / result /

使用createMarker函数将infowindow与标记相关联：

函数createMarker（latlng，html）
 {
 var marker = new google.maps.Marker（{
 position：latlng，
 map ：map 
}）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.setContent（html）; 
 infowindow.open（map，marker）; 
}）; 
返回标记; 
} 
  

全局数组允许它们从HTML点击监听器中引用。 / p>

外部链接取决于了解位置的顺序。或者，如果你想用name来查找它们，你可以使用associative数组，名称作为索引。

通过名称索引标记：

http://jsfiddle.net/ 6nqj8 / 1 / embedded / result /

JS Fiddle: http://jsfiddle.net/megatimes/NVDLf/7/

I have a map which is creating multiple markers from an array. Below the map are some links which, when clicked, I'd like to cause the map to pan to its respective marker, and open the info window.

Given that I don't want to generate the links themselves as part of the loop that creates the markers, how can I do this?

I'm fairly certain this is a scope issue since the links below the map each open the last item in the locations array but I can't seem to figure out how to get around it.

Thanks

var locations = [
    [
    "Location 1",
     "215 West Girard Avenue 19123",
    "39.9695601",
    "-75.1395161"
    ],
    [
    "Location 2",
    "5360 Old York Road 19141",
    "40.034038",
    "-75.145223"
    ],
    [
    "Location 3",
    "1350 W Girard Avenue 19123",
    "39.9713524",
    "-75.1590360"
    ]
    ];


var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: new google.maps.LatLng(39.9995601, -75.1395161),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][2], locations[i][3]),
        map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}


$(function() {
    $('#locations h3 a').each(function() {
        $(this).on('click', function() {
            google.maps.event.trigger(marker, 'click');    
        })    
      });    
}); 

<div id="map" style="width: 500px; height: 400px;"></div>
<div id="locations">
    <h3><a href="#">Location 1</a></h3>
    <p>Arbitrary content about 1</p>

    <h3><a href="#">Location 2</a></h3>
    <p>Arbitrary content about 2</p>

    <h3><a href="#">Location 3</a></h3>
    <p>Arbitrary content about 3</p>
</div>

解决方案

You can do something like this:

http://jsfiddle.net/6vjwd/2/embedded/result/

uses a createMarker function to associate the infowindow with the marker:

function createMarker(latlng, html)
{
var marker = new google.maps.Marker({
    position: latlng,
    map: map
});

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

And a global array to allow them to be referenced from HTML click listeners.

The external links depend on knowing the order of the locations. Or if you want to look them up by "name" you could use an "associative" array, with the name as the index.

Indexing the markers by name:

http://jsfiddle.net/6nqj8/1/embedded/result/

这篇关于导致链接在地图上平移并打开标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！