在放置標記時顯示用於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

回答

相關問題