информационное окно слоя kml

Я изо всех сил пытаюсь найти способ стилизовать информационные окна на этой карте. Я попытался подавить информационное окно, установив подавлять InfoWindows: true, но это, похоже, не сработало. Любые идеи будут оценены по достоинству. Я прочитал много документов Google и много других сообщений здесь и не могу найти решение.

     <script>

var geocoder;
var map; 
var marker;
var layers = [];

function initialize() {
geocoder = new google.maps.Geocoder ();
var latlng = new google.maps.LatLng (51.505288, -0.191544);
var myOptions = {
  zoom: 15,
  disableDefaultUI: true,
  styles: [
        {
           stylers: [

  ]
},

{
  featureType: "poi.park",
  stylers: [
      { color: "#aecfae" },
    { saturation: 0 },
    { lightness: 0 },
    { visibility: "simplified" }



  ]
  },

  {
  featureType: "landscape",
  stylers: [
      { color: "#ffffff" },
    { saturation: 0 },
    { lightness: 0 },
    { visibility: "simplified" }
  ]
},

{
  featureType: "road.highway",
  elementType: "labels",
  stylers: [
    { color: "transparent" },
    { visibility: "off" },

  ]
},

{
  featureType: "water",
  elementType: "geometry.fill",
  stylers: [
    { color: "#a5bfdd" },
    { visibility: "on" },

  ]
},

{
  featureType: "road",
  elementType: "labels",
  stylers: [
    { color: "transparent" },
    { visibility: "off" },

  ]
},

  {
  featureType: "road",
  elementType: "geometry",
  stylers: [
      { color: "#e0e0e0" },
    { saturation: 0 },
    { lightness: 0 },
    { visibility: "simplified" }
  ]
}],
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
    }
  map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

  marker = new google.maps.Marker({map:map});

     layers[0] = new google.maps.KmlLayer('http://www.cid-dev.co.uk/vicarage-phase-2/kml/VicarageGate.kml', {preserveViewport: true});

    for (var i = 0; i < layers.length; i++) {
    layers[i].setMap(map);


  }

  layers[1] = new google.maps.KmlLayer('http://www.cid-dev.co.uk/vicarage-phase-2/kml/PrimarySchools-1.kml',
         {preserveViewport: true});
  layers[2] = new google.maps.KmlLayer('http://www.cid-dev.co.uk/vicarage-phase-2/kml/SecondarySchools-1.kml', {preserveViewport: true});
  layers[3] = new google.maps.KmlLayer('http://www.cid-dev.co.uk/vicarage-phase-2/kml/Culture-6.kml', {preserveViewport: true});
  layers[4] = new google.maps.KmlLayer('http://www.cid-dev.co.uk/vicarage-phase-2/kml/Hotels-2.kml', {preserveViewport: false});
   layers[5] = new google.maps.KmlLayer('http://www.cid-dev.co.uk/vicarage-phase-2/kml/Shopping.kml', {preserveViewport: false});
   layers[6] = new google.maps.KmlLayer('http://www.cid-dev.co.uk/vicarage-phase-2/kml/Restaurants.kml', {preserveViewport: false});
  for (var i = 1; i < layers.length; i++) {
    layers[i].setMap(null);


  }
    }
function codeAddress () {
    var address = document.getElementById ("address").value;
    geocoder.geocode ( { 'address': address}, function(results, status)  {
    if (status == google.maps.GeocoderStatus.OK)  {
        map.setCenter(results [0].geometry.location);
        marker.setPosition(results [0].geometry.location);
        map.setZoom(15);
        } 
    else {
        alert("Geocode was not successful for the following reason: " + status);
            }
}); 
}

function toggleLayer(i) {
  if(layers[i].getMap() === null) {
    layers[i].setMap(map);
  }
  else {
    layers[i].setMap(null);
  }






}


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






    </script>



    <div id="map_canvas" style="position:absolute; width:100%; height:100%; top:0px; left:0px; right:0px; bottom:0px; z-index:100; background-color:#000;"></div>

google-maps-api-3 kml infowindow
person Rob B    schedule 20.02.2013    source источник
comment
Как вы использовали подавляющую инфовиндовс? Я не вижу этого в вашем опубликованном коде.   -  person geocodezip    schedule 20.02.2013
comment
Мне работает.   -  person geocodezip    schedule 20.02.2013
comment
Извините, geocodezip, я взял это из этого кода, я просто использовал {suppressInfoWindows: true}. Информационные окна работают, когда я не подавляю их, но я хочу подавить их, чтобы вместо этого отображать стилизованное информационное окно, если это имеет смысл? Вместо информационного окна, предоставляемого Google API с их стилем   -  person Rob B    schedule 21.02.2013
comment
Таким образом, ваш вопрос заключается не в том, как мне подавить существующие информационные окна, а в том, как добавить пользовательские информационные окна?   -  person geocodezip    schedule 21.02.2013
comment
возможный дубликат Карты Google: как создать пользовательское окно InfoWindow?   -  person geocodezip    schedule 21.02.2013

Ответы (2)


arrow_upward
0
arrow_downward

Отключите автоматическое создание информационного окна и используйте событие щелчка для ручной обработки данных.

Вот пример удаления атрибута target="_blank" из ссылок информационного окна: http://people.missouristate.edu/chadkillingsworth/mapsexamples/removekmllinktargets.js

person Chad Killingsworth    schedule 20.02.2013
comment
Привет, Чад, спасибо за всю твою тяжелую работу. Я специализируюсь на HTML и PHP, и мои знания Jquery/Javascript находятся в зачаточном состоянии. Как мне интегрировать ваш код в мой, чтобы получить желаемый эффект переключения, но отображать пользовательские информационные окна css? - С уважением, Роб. - person Rob B; 21.02.2013
comment
Та же концепция, вы просто подставите свой пользовательский код информационного окна в код прослушивателя события «щелчок» (вместо моего CommonInfoWindow). Вы можете попробовать класс InfoBubble из служебной библиотеки Google Maps: google-maps-utility-library-v3.googlecode.com/svn/trunk/ - person Chad Killingsworth; 22.02.2013

arrow_upward
0
arrow_downward

Вы можете попробовать добавить такой метод ко всем своим маркерам.

// generalized click handler
function addClickHandler(item, content, position) {
  google.maps.event.addListener(item, 'click', function () {
    infoWindow.close();
    infoWindow.setContent(content);
    infoWindow.setPosition(position);
    infoWindow.open(map);
  });
}

Когда я оформляю с помощью KML, все, что передается в теге ‹[CDATA, форматируется. Таким образом, добавление в cdata разрешено.

Также вот пример из GOOGLE

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html

person user2524908    schedule 02.12.2013