谷歌地图API点击显示V3 JavaScript标记

完美的作品，但我会在KML文件显示assiociate传说的制造商，当它的“点击” ...

我想一般的命令，导致标记可超过500 ...

任何帮助？

的网址：http://tequila357.wix.com/test-projet#!map/c161y

感谢

<html> 
<head> 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 

<script type="text/javascript"> 

var map; 

// lets define some vars to make things easier later 
var kml = { 
    a: { 
     name: "MAP BELGIUM", 
     url: "https://maps.google.be/maps/ms?authuser=0&vps=2&hl=fr&ie=UTF8&msa=0&output=kml&msid=208899208399411894595.0004d24e3bd5bbd990f5d" 
    }, 
b: { 
     name: "GARDIENNES", 
     url: "https://maps.google.be/maps/ms?authuser=0&vps=3&hl=fr&ie=UTF8&msa=0&output=kml&msid=208899208399411894595.0004d21a429f0f00d5400" 
    }, 
    c: { 
     name: "CRECHES", 
     url: "https://maps.google.be/maps/ms?authuser=0&vps=2&hl=fr&ie=UTF8&msa=0&output=kml&msid=208899208399411894595.0004d22900ca6b246c6a1" 
    }, 
d: { 
     name: "CRECHES PRIV", 
     url: "https://maps.google.be/maps/ms?authuser=0&vps=2&hl=fr&ie=UTF8&msa=0&output=kml&msid=208899208399411894595.0004d24cf21e2a254a10c" 
    }, 
e: { 
     name: "MAGASINS STORES", 
     url: "https://maps.google.be/maps/ms?authuser=0&vps=2&hl=fr&ie=UTF8&msa=0&output=kml&msid=208899208399411894595.0004d24db929a46bae78c" 
    }, 
f: { 
     name: "BABYSITTERS", 
     url: "https://maps.google.be/maps/ms?authuser=0&vps=2&hl=fr&ie=UTF8&msa=0&output=kml&msid=208899208399411894595.0004d24dba905263481df" 
    }, 
// keep adding more if ye like 
}; 

// initialize our goo 
function initializeMap() { 
    var options = { 
     center: new google.maps.LatLng(50.5812, 4.5687), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), options); 

    createTogglers(); 
}; 

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

// the important function... kml[id].xxxxx refers back to the top 
function toggleKML(checked, id) { 

    if (checked) { 

     var layer = new google.maps.KmlLayer(kml[id].url, { 
      preserveViewport: true, 
      suppressInfoWindows: true 
     }); 
     // store kml as obj 
     kml[id].obj = layer; 
     kml[id].obj.setMap(map); 
    } 
    else { 
     kml[id].obj.setMap(null); 
     delete kml[id].obj; 
    } 

}; 

// create the controls dynamically because it's easier, really 
function createTogglers() { 

    var html = "<form><ul>"; 
    for (var prop in kml) { 
     html += "<li id=\"selector-" + prop + "\"><input type='checkbox' id='" + prop + "'" + 
     " onclick='highlight(this,\"selector-" + prop + "\"); toggleKML(this.checked, this.id)' \/>" + 
     kml[prop].name + "<\/li>"; 
    } 
    html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" + 
    "Remove all layers<\/a><\/li>" + 
    "<\/ul><\/form>"; 

    document.getElementById("toggle_box").innerHTML = html; 
}; 

// easy way to remove all objects 
function removeAll() { 
    for (var prop in kml) { 
     if (kml[prop].obj) { 
      kml[prop].obj.setMap(null); 
      delete kml[prop].obj; 
     } 

    } 
}; 


// Append Class on Select 
function highlight(box, listitem) { 
    var selected = 'selected'; 
    var normal = 'normal'; 
    document.getElementById(listitem).className = (box.checked ? selected: normal); 
}; 

function startup() { 
// for example, this toggles kml b on load and updates the menu selector 
var checkit = document.getElementById('a'); 
checkit.checked = true; 
toggleKML(checkit, 'a'); 
highlight(checkit, 'selector1'); 
} 

// test legen 

google.maps.event.addListener(map, 'click', function(event) { 

    marker = new google.maps.Marker({position: event.latLng, map: map}); 

}); 

// end legend 

</script> 

<style type="text/css"> 
.selected { font-weight: bold; } 
</style> 

</head> 
<body onload="startup()"> 
<div id="map_canvas" style="width: 100%; height: 700px;"></div> 
<div id="toggle_box" style="position: absolute; top: 100px; right: 20px; padding: 10px; background: #fff; z-index: 5; "></div> 
</body> 
</html>

来源

2013-01-02 ASBL Culture Loisirs

如果你正在寻找一个 “侧边栏”，这是目前不可能与KmlLayer。

您至少有两种选择：

进口KML到FusionTables，使用FusionTablesLayer会显示在地图上的标记/多边形，查询表中的onclick处理的侧边栏打开信息窗口。

example
使用第三方KML解析器像geoxml3或geoxml-v3

example using geoxml3

为了使信息窗口出现在点击，从初始化的代码删除此KmlLayer：

suppressInfoWindows: true

来源

2013-01-02 16:27:07 geocodezip

感谢您的快速回答。我不需要任何侧栏或菜单，就像你的例子。只需点击下面的图例：https：//google-developers.appspot.com/maps/documentation/javascript/v2/examples/geoxml-kml –

感谢您的快速回答。我不需要像你的例子中的任何边栏或菜单。只需点击如下图例出现： https://google-developers.appspot.com/maps/documentation/javascript/v2/examples/geoxml-kml。鼠标“手”正在改变传递槽标记，所以它可能会... –

我没有看到[该示例]上的任何图例（https://google-developers.appspot.com/maps/documentation/JavaScript的/ V2 /示例/ geoxml-KML）。 – geocodezip

谷歌地图API点击显示V3 JavaScript标记

回答

相关问题