Question

我正在开发一款应用程序，该应用程序使用谷歌地图显示在特定区域内已经犯下的某些类型的犯罪的位置。

我希望能够在地图上使用Font Awesome图标作为标记，并且我能够使用Google地图实用程序库（v3）基于此answer执行此操作。

但是，在使用此方法，特别是MarkerWithLabel类时，我无法弄清楚如何在单击我的图标标记时正确显示内容弹出窗口。我查看了此类的source code，但没有看到任何允许此功能的参数。

我尝试将我的Fontawesome Icon标记设置为按钮，这些按钮切换弹出窗口但是没有效果且控制台中没有显示错误。所以我然后尝试使图标标记按钮切换模态。然而，奇怪的是，当我单击并在地图上拖动图标时，我只能切换模态，而不是简单地单击。我宁愿不允许图标标记可拖动，但这是我能够弄清楚如何切换模态的唯一方法。

以下是我引用的Google地图实用程序库：

<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>

这是我的代码：

<h1>Safety Map</h1>
<div id="map-canvas" class="map"></div>

<div class="modal fade modal-small " tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="mySmallModalLabel">Modal title</h4>
            </div> <!-- .modal-header -->

            <div class="modal-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, quasi voluptas nostrum culpa sunt laboriosam corporis perspiciatis animi rem unde. Nihil, doloribus soluta possimus non asperiores eius natus quaerat porro.</p>
            </div> <!-- .modal-body -->

            <div class="modal-footer">
                <button type="button" class="btn btn-ar btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-ar btn-primary">Save changes</button>
            </div> <!-- .modal-footer -->
        </div> <!-- .modal-content -->
    </div> <!-- .modal-dialog -->
</div>

<script>
    function initialize() {
        var crimes = <?php echo json_encode($crimes); ?>;
        var count = crimes.length;

        var mapCoordinates = new google.maps.LatLng( 50, 50 );
        var myOptions = {
                            zoom: 14,
                            center: mapCoordinates,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };

       var map = new google.maps.Map( document.getElementById( 'map-canvas' ), myOptions );

        for(x = 0; x < count; x++)
        {
            var coordinates = new google.maps.LatLng( crimes[x].lat, crimes[x].lng );
            marker = new MarkerWithLabel({
                title: crimes[x].type, //tooltip
                draggable: true,       //I'd rather not have this set to true
                clickable: true,
                position: coordinates,
                icon: ' ',
                map: map,
                labelContent: '<button type="button" data-toggle="modal" data-target=".modal-small" class="btn btn-transparent fa fa-ambulance" style="color:rgba(144,15,15,0.8);"></button>',                  
                labelClass: "labels" // the CSS class for the label
            });

            marker.setMap( map );
        }
    }

    initialize();

</script>

有谁知道为什么我不能在点击时切换模态？也许有更好的方法来做到这一点？我只是希望能够在用户点击地图上的图标标记时显示一些特定于标记的文本，无论是使用弹出窗口还是模态或类似方法。

Answer 1

所以我基本上在寻找一种方法来实现InfoWindow class功能，但使用谷歌地图实用程序库。我正在寻找的课程是InfoBox。

Here is an example如何使用它。

如何使用谷歌地图实用程序库单击显示弹出文本？

1 个答案: