Google maps 放置标记时显示KML的信息窗口_Google Maps_Google Maps Api 3

Google maps 放置标记时显示KML的信息窗口

google-maps google-maps-api-3

Google maps 放置标记时显示KML的信息窗口,google-maps,google-maps-api-3,Google Maps,Google Maps Api 3,我试图在对地址进行地理编码后放置标记时显示一个信息窗口（显示多边形的KML描述）。除了信息窗口，我所有的东西都在工作。我现在可以显示“Hello World”，但我想知道是否有一种方法可以从标记所在的多边形调用“description”信息 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalabl

我试图在对地址进行地理编码后放置标记时显示一个信息窗口（显示多边形的KML描述）。除了信息窗口，我所有的东西都在工作。我现在可以显示“Hello World”，但我想知道是否有一种方法可以从标记所在的多边形调用“description”信息

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


html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{高度：100%}
函数detectBrowser（）{
var useragent=navigator.useragent；
var mapdiv=document.getElementById（“映射画布”）；
if（useragent.indexOf（'iPhone'）！=-1 | | useragent.indexOf（'Android'）！=-1）{
mapdiv.style.width='100%'；
mapdiv.style.height='100%'；
}否则{
mapdiv.style.width='600px'；
mapdiv.style.height='800px'；
}}
函数初始化（）{
geocoder=新的google.maps.geocoder（）；
var latlng=新的google.maps.latlng（34.59704151614417，-85.77713012695312）；
变量映射选项={
泛控制：错误，
动物控制：对，
mapTypeControl:false，
scaleControl:false，
街景控制：错误，
overviewMapControl:错误，
中心：拉特林，
缩放：10，
MapTypeId:[google.maps.MapTypeId.ROADMAP，'map_style']
};
var styleArray=[
{
特色类型：“景观”，
样式：[
{hue:#ffbb00}，
{饱和：-23}，
{亮度：2}
]
},{
特征类型：“poi”，
样式：[
{hue:#ff0055}，
{饱和：-31}
]
},{
特色类型：“道路”，
样式：[
{hue:#0033ff}，
{饱和：-42}，
{亮度：11}，
{重量：0.9}
]
},{
特色类型：“水”，
样式：[
{hue:#003bff}，
{亮度：12}，
{饱和度：25}
]
},{
}
];
var styledMap=new google.maps.StyledMapType（styleArray，
{name:“样式化映射”}）；
map=new google.maps.map（document.getElementById（“map_canvas”），
地图选项）；
var nyLayer=new google.maps.KmlLayer（'http://www.farmerstel.com/map/FTCFIBER.kml',{
地图：地图，
保存视口：true
});
nyLayer.setMap（map）；
map.mapTypes.set（'map\u style'，styledMap）；
setMapTypeId（'map_style'）；
}
var地理编码器；
var映射；
//检查地理定位支持
if（导航器.地理位置）{
//使用方法getCurrentPosition获取坐标
navigator.geolocation.getCurrentPosition（函数（位置）{
//相应地访问它们
赛特中心地图（34.496937，-85.839958）；
});
}
函数代码地址（）{
var address=document.getElementById（“地址”）.value；
var bounds=map.getBounds（）；
geocoder.geocode（{'address'：address，'bounds'：bounds}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location），
map.setZoom（15）；
marker=新的google.maps.marker({
地图：地图，
可拖动：错误，
动画：google.maps.animation.DROP，
位置：结果[0]。几何体。位置
});
//创建InfoWindow对象
var infowindow=new google.maps.infowindow({
内容：“你好，世界”
});
信息窗口。打开（地图、标记）；
}否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
});
}

目前，使用Kmlayer无法做到这一点（只有在单击地图时才能获得信息窗口）

有两种选择：

使用第三方解析器（如或）在客户机中解析和显示kml，然后可以保留对单个对象的引用并在外部触发对它们的单击。如果你有很多地方标记或复杂的kml，这不是一个好的选择

将kml导入FusionTables并使用FusionTablesLayer显示它，然后在表中查询要放入信息窗口的信息

谢谢。我以前在上看过这个例子，发现当地理编码地址是完美的时，它做了什么，但我一直在努力寻找它的源代码，因为我不是一个程序员，并且很难完成基本的事情。你知道“votemap侧边栏”示例或你向我展示的第一个示例的源代码位置吗？大多数浏览器都有查看源代码的功能，可以让你查看HTML源代码。我所有示例的代码都与HTML内联（外部javascript库/实用程序除外）。在现代浏览器中，您通常可以在工具下找到视图源代码，在我当前使用的Firefox版本中，它是tools:webdeveloper:Page source.Duh！我没有想到它在源代码中是可见的。我不知道我在想什么。我试着复制你的源代码，并简单地替换KML的源代码以使其加载，但没有显示多边形。你能告诉我我做错了什么吗？编辑我想如果我能展示我目前所拥有的东西会有所帮助。我看到了多边形，看起来很有用（如果我对地址进行地理编码并单击多边形，我会得到两个信息窗口，我不喜欢这样，但这可能是你想要的）。对不起，我昨晚没能发帖。我发现文件的扩展名必须是XML而不是KML。非常感谢你的帮助。我也不喜欢这两个infowindows，但这就是它在示例中的工作方式，我试图阻止这种情况发生，但没有任何效果。