如何修复带有文字的Google地图标记图标

时间:2016-11-20 04:13:43

标签: google-maps google-maps-api-3 google-maps-markers

您好我正在使用谷歌地图标记图标和文字使用谷歌图表API https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bbT|27.b|f4b605|0f3276

在我的地图中,如果文字太长,图标不固定如何修复它 enter image description here

这是我的js代码:

<script type="text/javascript">
                /* <![CDATA[ */
                    var CITY_MAP_CENTER_LAT = -6.3757701;
                    var CITY_MAP_CENTER_LNG = 105.7814325;
                    var CITY_MAP_ZOOMING_FACT = 9;
                    var infowindow;

                    /**
                    * Data for the markers consisting of a name, a LatLng and a pin image, message box content for
                    * the order in which these markers should display on top of each
                    * other.
                    */
                    var markers = {
            'jalanluarkota':[
                            {
            'name':'KOLELET - RANGKASBITUNG',
            'location': [-6.338283,106.257433],
            'message':'<a href="http://localhost:7777/simonitoring/laporan/laporanruasjalandetail/1" class=ptitle>KOLELET - RANGKASBITUNG</a><br/><span class=ptiming>Status: Jalan Luar Kota</span></br><span class=ptiming>Panjang Ruas (Km): 5.30</span></br><span class=ptiming>Paket Pekerjaan: 1</span>',
                            'icons':'https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bbT|1|f4b605|0f3276'
                            },
            ]};

                        var map = null;
                        var mgr = null;
                        var mc  = null;
                        var markerClusterer = null;
                        var showMarketManager = false;

                        if(CITY_MAP_CENTER_LAT=='')
                        {
                        var CITY_MAP_CENTER_LAT = 34;
                        }
                        if(CITY_MAP_CENTER_LNG=='')
                        {
                        var CITY_MAP_CENTER_LNG = 0;
                        }
                        if(CITY_MAP_CENTER_LAT!='' && CITY_MAP_CENTER_LNG!='' && CITY_MAP_ZOOMING_FACT =='')
                        {
                        var CITY_MAP_ZOOMING_FACT = 9;
                        }
                        else if(CITY_MAP_ZOOMING_FACT == '')
                        {
                        var CITY_MAP_ZOOMING_FACT = 3;
                        }
                        var PIN_POINT_ICON_HEIGHT = 37;
                        var PIN_POINT_ICON_WIDTH = 32;

                        if(MAP_DISABLE_SCROLL_WHEEL_FLAG)
                        {
                        var MAP_DISABLE_SCROLL_WHEEL_FLAG = 'No';
                        }

                        function setCategoryVisiblity( category, visible ) {
                        var i;

                        if ( mgr && category in markers ) {
                        for( i = 0; i < markers[category].length; i += 1 ) {
                        if ( visible ) {
                        mgr.addMarker( markers[category][i], 0 );
                        } else {
                        mgr.removeMarker( markers[category][i], 0 );
                        }
                        }
                        mgr.refresh();
                        }
                        }

                        function initialize() {
                        var myOptions = {
                        zoom: CITY_MAP_ZOOMING_FACT,
                        center: new google.maps.LatLng(CITY_MAP_CENTER_LAT, CITY_MAP_CENTER_LNG),
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                        }
                        map = new google.maps.Map(document.getElementById("map_luarkota"),myOptions);
                        mgr = new MarkerManager( map );
                        google.maps.event.addListener(mgr, 'loaded', function() {
                        if (markers) {
                        var k = 0;
                        for (var level in markers) {
                        google.maps.event.addDomListener( document.getElementById( level ), 'click', function() {
                        setCategoryVisiblity( this.id, this.checked );
                        });
                        for (var i = 0; i < markers[level].length; i++) {
                        var details = markers[level][i];
                        var image = new google.maps.MarkerImage(details.icons,new google.maps.Size(PIN_POINT_ICON_WIDTH, PIN_POINT_ICON_HEIGHT));
                        var myLatLng = new google.maps.LatLng(details.location[0], details.location[1]);
                        markers[level][i] = new google.maps.Marker({
                        title: details.name,
                        position: myLatLng,
                        icon: image,
                        clickable: true,
                        draggable: false,
                        flat: true
                        });
                        attachMessage(markers[level][i], details.message);
                        }
                        mgr.addMarkers( markers[level], 0 );
                        }
                        mgr.refresh();
                        }
                        });

                        // but that message is not within the marker's instance data
                        function attachMessage(marker, msg) {
                        var myEventListener = google.maps.event.addListener(marker, 'click', function() {
                        if (infowindow) infowindow.close();
                        infowindow = new google.maps.InfoWindow({
                        content: String(msg)
                        });
                        infowindow.open(map,marker);
                        });
                        }
                        }

                        google.maps.event.addDomListener(window, 'load', initialize);

                    /* ]]> */
            </script>

如何解决这个问题...

0 个答案:

没有答案