隐藏 INFO 窗口标记并动态显示答案

【问题标题】：hide INFO window marker and show it dynamically隐藏 INFO 窗口标记并动态显示
【发布时间】：2016-03-16 10:26:49
【问题描述】：

我正在使用这个插件 cordova-plugin-googlemaps 虽然问题不受限制我的结果数组，包括名称、地址和经纬度。我用 for 循环将标记放在地图上。点击标记打开信息窗口。

但我想要的是通过单击列表视图项目来打开特定的标记信息窗口。

我正在发布一些代码以获得微妙的想法。

for (; i < noOfData; ++i) {
                (function(n) {
                    setTimeout(function() {
                        var position = new plugin.google.maps.LatLng(resultList[n].latitude, resultList[n].longitude);
                        markers.push(position);
                        $rootScope.map.addMarker({
                            'position': position,
                            'title': resultList[n].name,
                            'index': n,
                            'snippet': resultList[n].address,
                            "styles": {
                                'text-align': 'center',
                                'font-style': 'italic',
                                'color': 'red'
                            },
                            disableAutoPan: false
                        }, function(marker) {
                            $scope.listResults = resultList;
                            if ((+n + 1) == noOfData) {
                                var latLngBounds = new plugin.google.maps.LatLngBounds(markers);
                                console.log(hashCodeArrayOfMarkers.toString());
                                $rootScope.map.animateCamera({
                                    'target': latLngBounds,
                                    'zoom': 15,
                                    'duration': 1000 // 1 seconds
                                });
                            }
                            marker.addEventListener(plugin.google.maps.event.MARKER_CLICK, function() {
                                var indexOfMarkerClicked = marker.get("index");
                                marker.showInfoWindow();
                                $scope.clickList(indexOfMarkerClicked);
                                marker.showInfoWindow();
                                marker.getPosition(function(latLng) {
                                    $rootScope.map.animateCamera({
                                        'target': latLng,
                                        // 'zoom': 16,
                                        'duration': 400
                                    });
                                });
                            });
                        });
                    }, 0 + (0 * n));
                })(i);
            }

我想从项目单击列表中获得相同的结果。我可以将相机移动到标记，因为我有 latLng，但我想打开 lat lng 上存在的相同标记的信息窗口。请帮帮我。

【问题讨论】：

您可以简单地触发点击 .tigger() api.jquery.com/trigger 您必须将列表与标记同步
谢谢。我希望你不介意访问github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Marker。他们暂时没有触发功能。而且我还有一系列标记。我从 addEventListener 打开特定标记的 info_window。有什么办法可以使用键值或类似的东西。如果你能帮忙就太好了。
列表和标记是从同一个数据集中生成的吗？
是的，它们是从同一个数据集生成的。 onMarkerClick 我得到了索引值。使用索引值，我在弹出窗口中显示来自同一数据集的详细信息
如果它们是从同一数据集生成的，则列表索引等于标记。所以只需点击 List index .index() .eq() 拿这个索引触发 onMarkerClick(indexFromList)

标签： javascript cordova google-maps

【解决方案1】：

    Dynamic Marker in Cordova    


    <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <script type="text/javascript" src="cordova.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
            <script type="text/javascript">
            var map;

             var data = [];

             var lat,long,snippet,title;

           document.addEventListener("deviceready", function() {

           var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                       console.log("this.responseText==="+this.responseText);
                       var parse = JSON.parse(this.responseText);

                       var invv = parse.info;

                        console.log("invv=="+invv);

                       var count = invv.length;

                       console.log("count=="+count);

                       var i;

                       for(i = 0 ;i < count ; i++){

                     lat = invv[i].lat;

                      long = invv[i].long;

                       snippet = invv[i].snippet;

                       title = invv[i].title;

                      console.log("title==="+title);

                        data.push({
                      "title" : title,
                      "position": new plugin.google.maps.LatLng(lat,long),

                      });

                       }



                      console.log("data one==="+JSON.stringify(data));

                      sw(JSON.stringify(data));

                    }
                };
                xmlhttp.open("GET", "http://192.168.1.100/tuts_rest/latlong.php", true);
                xmlhttp.send();



          console.log("data two==="+JSON.stringify(data));


          var mapDiv = document.getElementById("map_canvas");

          const GOOGLE = new plugin.google.maps.LatLng(-33.890542, 151.274856);
          var map = plugin.google.maps.Map.getMap(mapDiv, {
            'camera': {
              'latLng': GOOGLE,
              'zoom': 17
            }
          });

        function sw(a){

        map.addEventListener(plugin.google.maps.event.MAP_READY, function() {


            console.log("data==="+a);

             var obj = JSON.parse(a);

             console.log("obj==="+obj);

             var nn = obj.length;

             console.log("nn==="+nn);



        for(var i = 0; i < obj.length;i++){

        addMarkers(obj, function(markers) {
        console.log("a==="+obj);
        console.log("hellooooo");
        console.log(markers[markers.length - 1]);
          markers[markers.length - 1].showInfoWindow();
        });

        }


        function addMarkers(data, callback) {
          var markers = [];
          function onMarkerAdded(marker) {

          console.log("marker==="+JSON.stringify(markers));

            markers.push(marker);
            if (markers.length === data.length) {
              callback(markers);
            }
          }
          data.forEach(function(markerOptions) {
            map.addMarker(markerOptions, onMarkerAdded);
          });

        }
           });



        }



        });

            </script>
        </head>
        <body>
        <h3>PhoneGap-GoogleMaps-Plugin</h3>
        <div style="width:100%;height:400px" id="map_canvas"></div>
        <button id="button">Full Screen</button>
        </body>
        </html>


        JSON Response 

 {"status":1,"info":[{"lat":"-33.890542","long":"151.274856","snippet":"Hello"},{"lat":"-33.923036","long":" 151.259052","snippet":"Hello"}]}


    PHP Code

    <?php
        // Include confi.php
        include_once('config.php');



            $qur = mysql_query("select * from `latlong`");
            $result =array();
            while($r = mysql_fetch_array($qur)){
                extract($r);
                $result[] = array("lat" => $lat, "long" => $long, 'snippet' => $snippet ,'title' => $title); 
            }
            $json = array("status" => 1, "info" => $result);

        @mysql_close($conn);

        /* Output header */
        header('Content-type: application/json');
        echo json_encode($json);
        ?>

    Config.PHP

    <?php
    $conn = mysql_connect("localhost", "root", "");
    mysql_select_db('tuts_rest', $conn);
    ?>

【讨论】：

您可以提高您的答案的质量，方法是解释它的工作原理或原因。在这种情况下，您所做的与 OP 有何不同。它有助于解释而不仅仅是显示。