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 来做到这一点（如果你点击地图，你只会得到 infowindows）。

有两种选择：

  1. 使用geoxml3或geoxml-v3等第三方解析器在客户端解析和显示 kml，然后您可以保留对单个对象的引用并在外部触发对它们的点击。如果您有很多地标或复杂的 kml，这不是一个好的选择。

使用 geoxml3 的示例

  1. 将你的kml导入FusionTables并使用FusionTablesLayer显示，然后查询表格信息放入信息窗口

使用 FusionTablesLayer 的示例

于 2012-08-02T11:29:38.487 回答