2013-02-20 74 views
0

我竭力要找到一种方法,这种样式地图上的信息窗口。我试图通过设置suppressInfoWindows:true来压制infowindow,但这似乎不起作用。任何想法都会被大量赞赏。我已阅读了很多Google文档以及其他许多帖子,但无法找到解决方案。KML图层的信息窗口

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

你是如何使用suppressInfoWindows的例子吗?我在你的发布代码中没有看到它。 – geocodezip 2013-02-20 18:24:30

+0

它[对我的作品(http://www.geocodezip.com/v3_simpleMap_SO_infowindow.html)。 – geocodezip 2013-02-20 18:30:45

+0

对不起geocodezip,我把它的这个代码,我只是用{suppressInfoWindows:真}。该信息窗口工作的时候,我不压制他们,但我想抑制他们为了显示一个信息窗口的风格,而不是如果这是有道理的?而不是Google API提供的infowindow风格 – 2013-02-21 09:59:22

回答

0

禁止自动生成信息窗口,并使用click事件手动处理数据。

下面是被去除的信息窗口的链接target="_blank"属性的例子:http://people.missouristate.edu/chadkillingsworth/mapsexamples/removekmllinktargets.js

+0

乍得您好,感谢为你所有的辛勤工作。我专注于HTML和PHP,而我的Jquery/Javascript知识还处于起步阶段。我怎么会去你的代码集成到矿井,得到所需的切换效果,但显示自定义的CSS信息窗口? - 亲切的问候,罗布。 – 2013-02-21 10:01:59

+0

同样的概念,你只需在'click'事件监听器代码(而不是我的CommonInfoWindow)中替换你的自定义信息窗口代码即可。您可以尝试Google地图实用程序库的InfoBubble类:http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/ – 2013-02-22 16:10:36

0

你可以尝试添加这样的方法把所有的标记。

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