setIcon 在 googlemap api v3 jquery mobile 上不会改变答案

【问题标题】：setIcon do not change on googlemap api v3 jquery mobilesetIcon 在 googlemap api v3 jquery mobile 上不会改变
【发布时间】：2013-09-13 00:10:37
【问题描述】：

我有一个用于移动设备的谷歌地图应用程序。我使用 jquery 移动脚本。当用户单击标记时，图标必须更改。谁没有变化是可见的。为了控制脚本，我临时构建了两个警报来检查图标是否已更改。警报显示正确的更改，但不显示地图。谁能告诉我我做错了什么？

var mobileDemo = { 'center': '52.3702157,4.8951679', 'zoom': 10 };
var marker;

$('#gps_map').live('pageinit', function() {
    demo.add('gps_map', function() {
        $('#map_canvas_2').gmap({center: mobileDemo.center, zoom: mobileDemo.zoom, zoomControl: true, disableDefaultUI:true, callback: function(map) {
            var self = this;
            var markers = new Array();
            downloadUrl("map_genxml.php?projectid=1&campid=23", function(data) {            

              var xml = data.responseXML;
              var tekst=[];
              var meetid=[];
              var icoon=[];
              markers = xml.documentElement.getElementsByTagName("marker"); 
              for (var i = 0; i < markers.length; i++) {
                tekst[i] = markers[i].getAttribute("tekst");
                meetid[i] = markers[i].getAttribute("meetid");
                icoon[i] = markers[i].getAttribute("icoon");
                var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
                if (icoon[i]=="groen") {
                  var icon = 'http://www.mijnmonitoring.nl/icons/green-dot.png';
                } else {
                  var icon = 'http://www.mijnmonitoring.nl/icons/grijs-dot.png';
                }
                marker = new google.maps.Marker({
                  position: point,
                  icon: icon,
                  bounds: true
                });
                bindInfoWindow(marker, tekst[i], meetid[i], i);
                $('#map_canvas_2').gmap('addMarker',marker).click(function() {
                });
              }
            });
        }});
    }).load('gps_map');
});

function bindInfoWindow(marker, info, meetid, i) {
    google.maps.event.addListener(marker, 'click', function() {
 alert(marker.getIcon());
                  marker.setIcon('http://www.mijnmonitoring.nl/icons/red-dot.png');
 alert(marker.getIcon());
                  document.getElementById('meetpunt').innerHTML=info;
                  document.getElementById('formulier').style.display='block';

    });
}

function downloadUrl(url, callback) {
    var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;

    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        request.onreadystatechange = doNothing;
        callback(request, request.status);
      }
    };

    request.open('GET', url, true);
    request.send(null);
}

function doNothing() {}

$('#gps_map').live('pageshow', function() {
    demo.add('gps_map', function() { $('#map_canvas_2').gmap('refresh'); }).load('gps_map');
});

【问题讨论】：

也许可以多解释一下您的 alrge 代码，或者尝试将其简化为更具体地描述问题的 sn-p ;)
亲爱的@Zaibis，我已经为它制作了测试站点：mijnmonitoring.nl/mobile/test.php#gps_map，所以你可以看到它是如何工作的。当您单击标记时，您会看到警报，但不会在地图上看到变化。这够清楚了吗？

标签： jquery jquery-mobile google-maps-api-3

【解决方案1】：

如果不能在本地运行页面，很难调试你的代码，如果你能创建一个 jsfiddle 会很有帮助。

但是，我相信以下解决方案适用于您的情况。将 bindInfoWindow 方法的内容替换为以下内容：

google.maps.event.addListener(marker, 'click', (function(marker) {
    return function() {
            marker.setIcon("http://www.mijnmonitoring.nl/icons/red-dot.png");
            document.getElementById('meetpunt').innerHTML=info;
            document.getElementById('formulier').style.display='block';
    }
})(marker));

我创建了一个工作示例，展示了如何更改地图的标记图标（grijs-dot.png、red-dot.png）：

<!doctype html>
<html lang="en">
   <head>
        <title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
        <script type="text/javascript">

            var cityList = [
                ['Chicago', 41.850033, -87.6500523, 1],
                ['Illinois', 40.797177,-89.406738, 2]
            ],
            demoCenter = new google.maps.LatLng(41,-87),
            map;

            function initialize()
            {
                map = new google.maps.Map(document.getElementById('map_canvas'), {
                   zoom: 7,
                   center: demoCenter,
                   mapTypeId: google.maps.MapTypeId.ROADMAP
                 });
            }

            function addMarkers()
            {
                var marker, 
                i,
                infowindow = new google.maps.InfoWindow();

                for (i = 0; i < cityList.length; i++) 
                {  
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
                        map: map,
                        icon: 'http://www.mijnmonitoring.nl/icons/grijs-dot.png',
                        title: cityList[i][0]
                    });

                    google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                            marker.setIcon("http://www.mijnmonitoring.nl/icons/red-dot.png");
                            infowindow.setContent(cityList[i][0]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
                }
            }
            $(document).on("pageinit", "#basic-map", function() {
                initialize();
                addMarkers();
            });

        </script>
    </head>
    <body>
        <div id="basic-map" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
                <a data-rel="back">Back</a>
            </div>
            <div data-role="content">   
                <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                    <div id="map_canvas" style="height:350px;"></div>
                </div>
            </div>
        </div>      
    </body>
</html>

我希望这会有所帮助。

【讨论】：

@JeanBoumans：另外，从$('#map_canvas_2').gmap('addMarker',marker).click(function() {}); 中删除.click(function() {});，因为这样你会覆盖点击事件处理程序..
亲爱的 Tolis，感谢您寻求解决方案。但仍然不能很好地发挥作用。您可以在与上述相同的超链接上进行尝试。我也做了一个jsfiddle。我是这个论坛的新手，是否有足够的链接或者我要在这个论坛上进行编辑？ [jsfiddle.net/dru9N/]
@JeanBoumans 您是否也从$('#map_canvas_2').gmap('addMarker',marker).click(function() {}); 中删除了.click(function() {});？请删除它并重试:)
@TolisEmmannouilidis 我没有看到该消息，但现在我已将其删除，但（我很抱歉）仍然无法正常运行。
我还按照您的建议重写了脚本的其余部分，现在运行良好。非常感谢。（但我还是不明白为什么我自己的脚本出错了）。