如何使用谷歌地圖實用程序庫單擊顯示彈出文本?

[英]How to display popover text on click with google maps utility library?


I am working on an app which uses google maps to display the location of certain types of crimes that have been committed in a given area.

我正在開發一個應用程序,該應用程序使用谷歌地圖顯示在特定區域內已經犯下的某些類型的犯罪的位置。

I wanted to be able to use Font Awesome icons as markers on the map, and I was able to use the google maps utility library (v3) to do this based off of this answer.

我希望能夠在地圖上使用Font Awesome圖標作為標記,並且我能夠使用google maps實用程序庫(v3)根據此答案執行此操作。

However, in using this method, specifically the MarkerWithLabel class, I cannot figure out how to properly display the content popover when clicking on my icon markers. I looked through the source code for this class but do not see any parameters which allow for this functionality.

但是,在使用此方法,特別是MarkerWithLabel類時,我無法弄清楚如何在單擊我的圖標標記時正確顯示內容彈出窗口。我瀏覽了這個類的源代碼,但沒有看到任何允許這個功能的參數。

I tried to make my Fontawesome Icon markers into buttons which toggle a popover but that did not work and no errors were shown in the console. So I then tried making the icon marker button toggle a modal. However, strangely, I am only able to toggle the modal when I click and drag the icon across the map, rather than simply on click. I would rather not allow the icon markers to be draggable but this is the only way I have been able to figure out how to toggle the modal.

我試圖將我的Fontawesome Icon標記放入按鈕中,這些按鈕可以切換彈出窗口但是沒有用,並且控制台中沒有顯示錯誤。所以我然后嘗試使用圖標標記按鈕切換模態。然而,奇怪的是,當我單擊並在地圖上拖動圖標時,我只能切換模態,而不是簡單地單擊。我寧願不允許圖標標記可拖動,但這是我能夠弄清楚如何切換模態的唯一方法。

Here is the google maps utility library I am referencing:

這是我引用的谷歌地圖實用程序庫:

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

And here is my code:

這是我的代碼:

<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>

Does anyone know why I cannot toggle the modal on click? Maybe there is a better way to do this? I simply want to be able to display some marker specific text once a user clicks on an icon marker on the map, whether that is with a popover or modal or similar method.

有誰知道為什么我不能在點擊時切換模態?也許有更好的方法來做到這一點?我只是希望能夠在用戶點擊地圖上的圖標標記時顯示一些特定於標記的文本,無論是使用彈出窗口還是模態或類似方法。

1 个解决方案

#1


0  

So I was basically looking for a way to implement the InfoWindow class functionality but with the google maps utility library. The class I was looking for was InfoBox.

所以我基本上是在尋找一種方法來實現InfoWindow類功能,但是使用谷歌地圖實用程序庫。我正在尋找的課程是InfoBox。

Here is an example of how to use it.

以下是如何使用它的示例。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/03/10/e8346b3b41aec3ff5e49d0455a501c59.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com