Стайлинг кмл с css в гугл картах v3? - PullRequest
Новая
       25

Стайлинг кмл с css в гугл картах v3?

3 голосов
/ 07 декабря 2011

Я использую Google Maps API v3 для загрузки некоторых данных из файла kml. Я хочу стилизовать данные описания, когда они отображаются в информационном окне, в соответствии с моей веб-страницей.

Сейчас я пытаюсь установить стиль: 

style="margin-left:-20px;border:2px dotted #897823; et-a;"

... внутри тега описания метки Kml, но он неправильно отображает ее.

Я вижу, что firebug просто показывает положительные значения полей и отступов. Он полностью игнорирует отрицательные значения маржи. Итак, мне было интересно, есть ли какие-либо ограничения в использовании атрибутов стиля CSS для файлов kml? 

<placemark>
 <name><![CDATA[First Office Address]]></name>
    <description>
      <![CDATA[
        First Line Information<br> 
        California addresss<br>
        Peak valley<br> 
        <div class="cInfo">Telephone<br>
        Office 9089YUHJT General: (2457TYGFR</div>
      ]]>
    </description>
    <Point>
      <coordinates>-420.2300,137.5332200,0</coordinates>    
    </Point>
</placemark>

1 Ответ

11 голосов
/ 12 декабря 2011

Проблема, с которой вы столкнулись, связана с очисткой контента в API.Очистка содержимого - это мера безопасности, предотвращающая выполнение вредоносного кода.

При очистке содержимого описания всплывающей подсказки удаляется следующий код:

  • JavaScript
  • CSS
  • <iframe> теги
  • <embed> теги
  • <object> теги

Если вы посмотрите на разметку вВ отладчике вы увидите, что на самом деле получаете что-то вроде следующего: 

<div style="font-family: Arial,sans-serif; font-size: small;">
    <div id="iw_kml">
      First Line Information<br> 
      California addresss<br>
      Peak valley<br> 
      <div>Telephone<br>Office 9089YUHJT General: (2457TYGFR</div> 
    </div>
</div>

Вы не говорите, как открываете информационные окна, но что-то вроде следующего должно работать для вас.По сути, вы подавляете информационное окно по умолчанию, а затем создаете свое собственное. 

function initialize() {
    var myLatlng = new google.maps.LatLng(0, 0);
    var myOptions = {
        zoom: 12,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(
        document.getElementById("map_canvas"),
        myOptions
    );

    var layer = new google.maps.KmlLayer(
        'http://www.yourserver.com/some.kml', {
            // prevent default behaviour
            suppressInfoWindows: true, 
            map: map
        }
    );

    // bind the event handler
    google.maps.event.addListener(layer, 'click', function(kmlEvent) {
        showInfoWindow(kmlEvent.featureData.description);
    });

    // show a custom info window
    function showInfoWindow(text) {
        // build your window using whatever, styles, embeds or scripts
        // you like. Anything included here will bypass content scrubbing
        var content = "<div style='margin-left:-20px;border:2px dotted #897823;'>" + text + "</div>";
        var infowindow = new google.maps.InfoWindow({
            content: content
        })
    }
}

Очевидно, вы можете заменить style='...' на class='whatever', что позволит вам определить стиль CSS во внешнем файле.

...