在放置标记时显示用于KML的InfoWindow

当地理编码地址后放置标记时，我试图显示infowindow（显示KML描述的多边形）。除了infowindow之外，我有一切工作。我现在有它显示的“Hello World”，但我不知道是否有一种方法来调用该标记位于多边形“说明”信息。在放置标记时显示用于KML的InfoWindow

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map_canvas { height: 100% } 
    </style> 
    <script type="text/javascript" 
     src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAd0xb3vfvpGxZphXuVQ8UVWsACtitEd64&sensor=true"> 
    </script> 
    <script type="text/javascript"> 
    function detectBrowser() { 
     var useragent = navigator.userAgent; 
     var mapdiv = document.getElementById("map_canvas"); 

     if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) { 
      mapdiv.style.width = '100%'; 
      mapdiv.style.height = '100%'; 
     } else { 
      mapdiv.style.width = '600px'; 
      mapdiv.style.height = '800px'; 
     }} 

     function initialize() { 
     geocoder = new google.maps.Geocoder(); 
     var latlng = new google.maps.LatLng(34.59704151614417, -85.77713012695312); 
     var mapOptions = { 
      panControl: false, 
      zoomControl: true, 
      mapTypeControl: false, 
      scaleControl: false, 
      streetViewControl: false, 
      overviewMapControl: false, 
      center: latlng, 
      zoom: 10, 
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] 
     }; 

    var styleArray = [ 
     { 
     featureType: "landscape", 
     stylers: [ 
      { hue: "#ffbb00" }, 
      { saturation: -23 }, 
      { lightness: 2 } 
     ] 
     },{ 
     featureType: "poi", 
     stylers: [ 
      { hue: "#ff0055" }, 
      { saturation: -31 } 
     ] 
     },{ 
     featureType: "road", 
     stylers: [ 
      { hue: "#0033ff" }, 
      { saturation: -42 }, 
      { lightness: 11 }, 
      { weight: 0.9 } 
     ] 
     },{ 
     featureType: "water", 
     stylers: [ 
      { hue: "#003bff" }, 
      { lightness: 12 }, 
      { saturation: 25 } 
     ] 
     },{ 
     } 
    ]; 

    var styledMap = new google.maps.StyledMapType(styleArray, 
    {name: "Styled Map"}); 

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

     var nyLayer = new google.maps.KmlLayer('http://www.farmerstel.com/map/FTCFIBER.kml',{ 
         map: map, 
         preserveViewport: true 
        }); 
     nyLayer.setMap(map); 

     map.mapTypes.set('map_style', styledMap); 
     map.setMapTypeId('map_style'); 

     } 

    var geocoder; 
    var map; 

    // Check for geolocation support 
    if (navigator.geolocation) { 
    // Use method getCurrentPosition to get coordinates 
    navigator.geolocation.getCurrentPosition(function (position) { 
     // Access them accordingly 
     map.setCenter(34.496937, -85.839958); 
    }); 
    } 

    function codeAddress() { 
    var address = document.getElementById("address").value; 
    var bounds = map.getBounds(); 
    geocoder.geocode({ 'address': address, 'bounds': bounds}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location), 
     map.setZoom(15); 
     marker = new google.maps.Marker({ 
      map:map, 
      draggable:false, 
      animation: google.maps.Animation.DROP, 
      position: results[0].geometry.location 
     }); 
     // Creating an InfoWindow object 
     var infowindow = new google.maps.InfoWindow({ 
      content: 'Hello World' 
     }); 
     infowindow.open(map,marker); 
     } else { 
     alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
    } 

    </script> 
    </head> 
    <body onload="initialize()"> 
    <div> 
     <input id="address" type="textbox" size="80" value="144 McCurdy Ave North"> 
     <input type="button" value="Submit" onclick="codeAddress()"> 
    </div> 
    <div id="map_canvas" style="width:100%; height:95%"></div> 
    </body> 
</html>

来源

2012-08-01 Alan Akins

目前还没有任何使用KmlLayer的方法（如果您点击地图，您只能获得infowindows）。

有两种选择：

使用第三方解析器像geoxml3或geoxml-v3解析，并在客户端显示的KML，那么你就可以保持各个对象和触发点击引用它们的外部。如果您有很多地标或复杂的kml，不是一个好的选择。

example using geoxml3

导入您的KML到FusionTables和使用FusionTablesLayer会显示出来，然后查询表，把在信息窗口

example using FusionTablesLayer

来源

2012-08-02 11:29:38 geocodezip

谢谢你的信息。我之前曾在http://www.geocodezip.com/geoxml3_test/votemap_sidebar.html看过这个例子，并发现它在对一个地址进行地理编码时是完美的，但我一直在试图找到它的源代码，因为我不是程序员，并且很难完成基本的事情。您是否知道该“投票地图边栏”示例的源代码位置或您向我展示的第一个示例？ – 2012-08-02 13:30:51

大多数浏览器都具有查看源功能，可让您查看HTML源代码。我所有示例的代码都与HTML内联（除了外部JavaScript库/实用程序）。在现代浏览器中，您通常可以在工具下找到视图源，在我目前使用的Firefox版本中，它是Tools：Web开发人员：Page Source。 – geocodezip 2012-08-02 14:03:04

杜！我没有想到它可以在源代码中看到。我不知道我在想什么。我曾尝试复制您的源代码，并简单地替换KML的源代码以使其加载，但没有显示多边形。你能告诉我我做错了什么吗？ *编辑*我想这将有助于，如果我显示我到目前为止。 http://farmerstel.com/map/map.html – 2012-08-02 15:29:01

在放置标记时显示用于KML的InfoWindow

回答

相关问题