javascript - Google Maps API v3.0 保存对标记的引用

标签 javascript google-maps google-maps-api-3

我正在使用 Google Maps API v3.0 该 map 有多个标记(因此任何使用 1 个标记的示例都不是我想要的) 到目前为止一切进展顺利..但我不清楚如何在单击特定标记时保存对它的引用? (我在几个地方读过作为建议,但没有示例)

有两个单独的实例,我希望有一个直接目标/引用返回到特定标记来控制/更改行为/图像..等(无论如何)。

场景#1 示例: 1.) 当我点击一个标记时,我当前正在“弹跳它”并将其图标更改为不同的图像。如果我单击新标记..我想定位旧标记以停止弹跳/恢复为旧图标。我通过在“标记”数组上运行循环并停止所有标记上的所有动画来完成此操作...并将所有图标更改为旧(原始)图像。它有效..但我不想有运行循环的开销。展望 future ,我想将旧标记更改为第三个图标图像..(以显示它之前已与之交互)..所以我需要一种在单击标记后保存/设置对标记的引用的方法..这样我就可以再次瞄准它(直接)

场景 #2 示例: 1.) 我在 map 之外有一些“控件”(元素),我想用它们与 map 以及特定标记进行交互。

即:在 map 外部有一个标记/条目的图像..用户点击它..并且它将 map 滚动/平移到该特定标记(以及更改动画和图标图像)

这是我当前的点击监听器:

google.maps.event.addListener(addr[n], 'click', (function(marker, n) {
                    return function() {
                        infowindow.setContent(addr[n].title + "<br />" + addr[n].company + "<br />" + addr[n].workphone);
                        infowindow.open(map, addr[n]);

                        //increase z-index when marker has focus
                        addr[n].setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
}
                })(marker, n));

问: 单击 map 上的标记时,如何保存对标记的直接引用,以便在另一个函数中使用并在那里引用?

<小时/>

回复MuffinMan:

谢谢...不过我仍然不清楚,至少不知道它与我的项目有何关系。

我已经将东西保存到数组中了。 (上面的addr[n])

这是为我构建 addr[n] 数组的类方法:

 public static function GMapMarker($markerId, $memberObject, $addressObject){
        $marker = 'var m_'.$memberObject->Id.'_'.$addressObject->AddressNum.' = new google.maps.LatLng('.$addressObject->Lat.','.$addressObject->Lon.');
                        marker = new google.maps.Marker({
                            animation: google.maps.Animation.DROP,
                            position: m_'.$memberObject->Id.'_'.$addressObject->AddressNum.',
                            title:"'.addslashes($memberObject->Full_Name).'",
                            company:"'.addslashes($memberObject->Company).'",
                            icon:"marker_gd.php?m=' . $markerId . '",
                            markerid:"'.$markerId.'",
                            id:"'.addslashes($memberObject->Id).'",
                            addressnum:"'.addslashes($addressObject->AddressNum).'",
                            refid:"m_'.$memberObject->Id.'_'.$addressObject->AddressNum.'",
                            workphone:"'.addslashes($memberObject->Work_Phone).'",
                            zIndex: '. (100 - preg_replace('/\D/','', $markerId)) .'
                        });
                        addr.push(marker);';

        return $marker;
    }

我无法知道该特定标记在数组中的顺序/索引是什么。不过,我确实给出了唯一的名称,并且标记了纬度/经度坐标......

但我不清楚稍后如何使用它来定位标记?

最佳答案

这是我在实现中使用的内容:

var markers = [];

for (var index = 0; index < data.length; index++) {
    var latlng = new google.maps.LatLng(data[index].lat, data[index].lng);
    var marker = new google.maps.Marker({position: latlng, map: map, title: data[index].label, icon: 'images/dot.gif'});

    google.maps.event.addListener(marker, 'click', function() {
        markers.push(marker);  /* marker saved here for later reference*/
    });
}

markers[] 填充了您想要供以后使用的标记。例如。标记[0]。

您可以添加 JavaScript 支持的其他监听器来处理标记上的其他事件,例如拖动和悬停。

关于javascript - Google Maps API v3.0 保存对标记的引用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28975015/

相关文章:

javascript - 如何使用 Javascript 动态生成输入字段,然后使用它们的值?

ios - 如何在 iOS Swift 中的 GoogleMaps 中绘制 CurrentLocation(locationStart) 到 SearchedLocation(locationEnd) 之间的路线

Android - 如何按需获取当前用户坐标/位置?

javascript - Google js api动态为每个标记提供不同的标记图像

javascript - 谷歌地图 addListener 无法正常工作

javascript - 用es6学习js

javascript - 在 Angular js 中注销时清除 $scope

javascript - 更改链中的 css 属性 - JavaScript

xml - 将 KML 导入 Google map 后,点显示在南极洲

javascript - 将 Google map 标记置于其位置的中心