0

住所のジオコーディング後にマーカーを配置すると、情報ウィンドウ (ポリゴンの KML 記述を表示) を表示しようとしています。情報ウィンドウ以外はすべて機能しています。現在、「Hello World」を表示するために持っていますが、マーカーが配置されているポリゴンから「説明」情報を呼び出す方法があるかどうか疑問に思っています。

    <!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>
4

1 に答える 1

1

現在、KmlLayer を使用してこれを行う方法はありません (マップをクリックすると、情報ウィンドウのみが表示されます)。

次の 2 つのオプションがあります。

  1. geoxml3やgeoxml-v3などのサード パーティのパーサーを使用してクライアントで kml を解析および表示すると、個々のオブジェクトへの参照を保持し、それらのクリックを外部からトリガーできます。多くの目印や複雑な kml がある場合は、適切な選択ではありません。

geoxml3 を使用した例

  1. kml を FusionTables にインポートし、FusionTablesLayer を使用して表示し、テーブルにクエリを実行して情報ウィンドウに入力します

FusionTablesLayer を使用した例

于 2012-08-02T11:29:38.487 に答える