使用 KML 文件时如何显示信息框

Question

function initMap() {
    var myLatLng = {lat: 19.0760, lng: 72.8777};    
    var map = new google.maps.Map(document.getElementById('map-canvas'), {        
        center: new google.maps.LatLng(22.4913, 78.9000),
        zoom:5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
    });         
    var geocoder = new google.maps.Geocoder();
    var geoXml = new geoXML3.parser({
        map: map, 
        zoom: false,
        suppressInfoWindows: true, 
        preserveViewport: true       
    });
    geoXml.parse('India_KML.kml');     
    var json = [
      {
        "name": "Kayaking it in Kerala",
        "lat": 11.372230617418888,
        "lng": 76.00253776872557,
        "location" : "TAMIL NADU, INDIA",
        "sports": "Kayaking",
        "vendor": "Goodwave Adventure",
        "price" : "2000",
        "image" : "http://advensure.dev/img/vendors/MG_3438.jpg",
        "url" : "http://advensure.dev/",
        "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
      },
      {
        "name": "Wildwater kayaking on the Kaveri",
        "lat": 12.372230617418888,
        "lng": 78.00253776872557,
        "location" : "KERALA, INDIA",
        "sports": "Kayaking",
        "Vendor": "Goodwave Adventure",
        "price" : "2000",
        "image" : "http://advensure.dev/img/vendors/MG_3438-500x333.jpg",
        "url" : "http://advensure.dev/",
        "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)."
      },
      {
        "name": "Kayaking it in Kerala 2",
        "lat": 11.372230617418888,
        "lng": 75.00253776872557,
        "location" : "KERALA, INDIA",
        "sports": "Kayaking",
        "vendor": "Goodwave Adventure",
        "price" : "3000",
        "image" : "http://advensure.dev/img/vendors/MG_3438.jpg",
        "url" : "http://advensure.dev/",
        "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
      }
    ]   
    var icon = {
        url: "/img/marker/location-pointer.png", // url
        scaledSize: new google.maps.Size(40, 40), // scaled size
        origin: new google.maps.Point(0,0), // origin
        anchor: new google.maps.Point(0, 0) // anchor
    };
    var infoBox;
    var boxOptions = {
        disableAutoPan: true,                
        alignBottom: true,
        boxStyle: {
            whiteSpace: "wrap",
            width: "420px",            
            padding: "5px",
            backgroundColor: "white"
        },
        closeBoxURL: "",
        maxWidth: 0,  // no max
        pane: "floatPane",
        pixelOffset: new google.maps.Size(-95, -10), 
        infoBoxClearance: new google.maps.Size(1, 1),        
        contextmenu: true
    };    
    var ibContent = '';    
    for (var i = 0, length = json.length; i < length; i++) {
        var data = json[i],
        latLng = new google.maps.LatLng(data.lat, data.lng); 

        // Creating a marker and putting it on the map
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            icon: icon,
            title: data.name
        });
        // google.maps.event.addListener(marker, "click", function(e) {
        //     infoBox.setContent(data.description);
        //     infoBox.open(map, marker);
        // });
        infoBox  = new InfoBox(boxOptions); 
        ibContent =
        '<div class="infobox">' +
            '<div class="row">' +
                '<div class="col-lg-12">' +
                    '<div class="header">' +                    
                        '<h5>' + data.location + '</h5>' +
                    '</div>' +
                '</div>' +
                '<div class="col-lg-6">' +
                    '<div class="marker-image">' +                    
                        '<img src="' + data.image +  '" class="img-responsive">'+                            
                    '</div>' +
                '</div>' +
                '<div class="col-lg-6">' +
                    '<div class="date">' +                    
                        
                    '</div>' +
                '</div>' +
                '<div class="col-lg-12">' +
                    '<div class="marker-description">' +
                        '<h5>' + data.name + '</h5>' +                    
                        '<h6>' + data.sports + '</h6>' +
                        '<h6>' + data.vendor + '</h6>' +
                        '<h6><i class="fa fa-inr"></i>&nbsp;' + data.price + '</h6>' +
                        '<p>' + data.description + '</p>' +
                        '<a class="btn btn-midnight" href="' + data.url + '">View</a>' +
                    '</div>' +
                '</div>' +
            '</div>' +
        '</div>';   
        google.maps.event.addListener(marker, "click", (function(marker,data) {
            return function(e) {
                infoBox.setContent(ibContent);
                infoBox.open(map, marker);
            }
        })(marker, data));
    }    
    google.maps.event.addDomListener(window, "resize", function() {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });          
}
google.maps.event.addDomListener(window, 'load', initMap);

#map-canvas {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  /* zoom:0.8;  */
}

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?region=IN&libraries=places"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map-canvas"></div>
<script>
</script>

function initMap() {
    var myLatLng = {lat: 19.0760, lng: 72.8777};    
    var map = new google.maps.Map(document.getElementById('map-canvas'), {        
        center: new google.maps.LatLng(22.4913, 78.9000),
        zoom:5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
    });         
    var geocoder = new google.maps.Geocoder();
    var geoXml = new geoXML3.parser({
        map: map, 
        zoom: false,
        suppressInfoWindows: true, 
        preserveViewport: true       
    });
    geoXml.parse('India_KML.kml');     
    var json = [
      {
        "name": "Kayaking it in Kerala",
        "lat": 11.372230617418888,
        "lng": 76.00253776872557,
        "location" : "TAMIL NADU, INDIA",
        "sports": "Kayaking",
        "vendor": "Goodwave Adventure",
        "price" : "2000",
        "image" : "http://abc.dev/img/vendors/MG_3438.jpg",
        "url" : "http://abc.dev/",
        "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
      },
      {
        "name": "Wildwater kayaking on the Kaveri",
        "lat": 12.372230617418888,
        "lng": 78.00253776872557,
        "location" : "KERALA, INDIA",
        "sports": "Kayaking",
        "Vendor": "Goodwave Adventure",
        "price" : "2000",
        "image" : "http://abc.dev/img/vendors/MG_3438-500x333.jpg",
        "url" : "http://abc.dev/",
        "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)."
      },
      {
        "name": "Kayaking it in Kerala 2",
        "lat": 11.372230617418888,
        "lng": 75.00253776872557,
        "location" : "KERALA, INDIA",
        "sports": "Kayaking",
        "vendor": "Goodwave Adventure",
        "price" : "3000",
        "image" : "http://abc.dev/img/vendors/MG_3438.jpg",
        "url" : "http://abc.dev/",
        "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
      }
    ]   
    var icon = {
        url: "/img/marker/location-pointer.png", // url
        scaledSize: new google.maps.Size(40, 40), // scaled size
        origin: new google.maps.Point(0,0), // origin
        anchor: new google.maps.Point(0, 0) // anchor
    };
    var infoBox;
    var boxOptions = {
        disableAutoPan: true,                
        alignBottom: true,
        boxStyle: {
            whiteSpace: "wrap",
            width: "420px",            
            padding: "5px",
            backgroundColor: "white"
        },
        closeBoxURL: "",
        maxWidth: 0,  // no max
        pane: "floatPane",
        pixelOffset: new google.maps.Size(-95, -10), 
        infoBoxClearance: new google.maps.Size(1, 1),        
        contextmenu: true
    };    
    var ibContent = '';    
    for (var i = 0, length = json.length; i < length; i++) {
        var data = json[i],
        latLng = new google.maps.LatLng(data.lat, data.lng); 

        // Creating a marker and putting it on the map
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            icon: icon,
            title: data.name
        });
        // google.maps.event.addListener(marker, "click", function(e) {
        //     infoBox.setContent(data.description);
        //     infoBox.open(map, marker);
        // });
        infoBox  = new InfoBox(boxOptions); 
        ibContent =
        '<div class="infobox">' +
            '<div class="row">' +
                '<div class="col-lg-12">' +
                    '<div class="header">' +                    
                        '<h5>' + data.location + '</h5>' +
                    '</div>' +
                '</div>' +
                '<div class="col-lg-6">' +
                    '<div class="marker-image">' +                    
                        '<img src="' + data.image +  '" class="img-responsive">'+                            
                    '</div>' +
                '</div>' +
                '<div class="col-lg-6">' +
                    '<div class="date">' +                    
                        
                    '</div>' +
                '</div>' +
                '<div class="col-lg-12">' +
                    '<div class="marker-description">' +
                        '<h5>' + data.name + '</h5>' +                    
                        '<h6>' + data.sports + '</h6>' +
                        '<h6>' + data.vendor + '</h6>' +
                        '<h6><i class="fa fa-inr"></i>&nbsp;' + data.price + '</h6>' +
                        '<p>' + data.description + '</p>' +
                        '<a class="btn btn-midnight" href="' + data.url + '">View</a>' +
                    '</div>' +
                '</div>' +
            '</div>' +
        '</div>';   
        google.maps.event.addListener(marker, "click", (function(marker,data) {
            return function(e) {
                infoBox.setContent(ibContent);
                infoBox.open(map, marker);
            }
        })(marker, data));
    }    
    google.maps.event.addDomListener(window, "resize", function() {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });          
}
google.maps.event.addDomListener(window, 'load', initMap);

#map-canvas {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  /* zoom:0.8;  */
}

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?region=IN&libraries=places"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map-canvas"></div>
<script>
</script>

我使用 KML 文件只是为了掩盖世界其他地区并仅显示我的国家，我添加了多个标记现在我想在单击标记时添加信息框，但它不起作用。

这是我的KML File

下面是我的代码

function initMap() {
    var myLatLng = {lat: 19.0760, lng: 72.8777};    
    var map = new google.maps.Map(document.getElementById('map-canvas'), {        
        center: new google.maps.LatLng(22.4913, 78.9000),
        zoom:5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
    });         
    var geocoder = new google.maps.Geocoder();
    var geoXml = new geoXML3.parser({
        map: map, 
        zoom: false,
        suppressInfoWindows: true, 
        preserveViewport: true       
    });
    geoXml.parse('India_KML.kml');     
    var json = [
      {
        "title": "Dive goa",
        "lat": 11.372230617418888,
        "lng": 76.00253776872557,
        "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
      },
      {
        "title": "Dive Goa2",
        "lat": 12.372230617418888,
        "lng": 78.00253776872557,
        "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)."
      },
      {
        "title": "Dive Goa3",
        "lat": 11.372230617418888,
        "lng": 75.00253776872557,
        "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
      }
    ]           
    var infoBox;
    var boxOptions = {
        disableAutoPan: true,                
        alignBottom: true,
        boxStyle: {
            whiteSpace: "nowrap",
            width: "230px",
            padding: "5px",
            backgroundColor: "white"
        },
        closeBoxURL: "",
        maxWidth: 0,  // no max
        pane: "floatPane",
        pixelOffset: new google.maps.Size(-95, -10), 
        infoBoxClearance: new google.maps.Size(1, 1),        
        contextmenu: true
    };
    infoBox  = new InfoBox(boxOptions);    
    for (var i = 0, length = json.length; i < length; i++) {
        var data = json[i],
        latLng = new google.maps.LatLng(data.lat, data.lng); 

        // Creating a marker and putting it on the map
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,                
            title: data.title
        });
        google.maps.event.addListener(marker, "click", function(e) {
            infoBox.setContent(data.description);
            infoBox.open(map, marker);
        });
    }    
    google.maps.event.addDomListener(window, "resize", function() {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });          
}

#map-canvas { 
  height: 100%; 
  width: 100%; 
  position:absolute; 
  top: 0; 
  left: 0; 
  z-index: 0;
  zoom:0.8;  
}

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?region=IN&libraries=places"></script>

<div id="map-canvas"></div>	

Answer 1

这与您的 KML 掩码无关。 您有一个 CSS 设置破坏了标记点击侦听器 (zoom: 0.8)，将其删除，然后信息框会在点击时出现（尽管它们存在内容和格式问题）。

您还需要在标记单击事件函数中使用函数闭包（或者您只在最后一个标记上获取信息框）：

    google.maps.event.addListener(marker, "click", (function(marker,data) {
      return function(e) {
        infoBox.setContent(data.description);
        infoBox.open(map, marker);
    }})(marker, data));

工作代码 sn-p（不带掩码）：

function initMap() {
  var myLatLng = {
    lat: 19.0760,
    lng: 72.8777
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(22.4913, 78.9000),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
  });
  var geocoder = new google.maps.Geocoder();
  /* var geoXml = new geoXML3.parser({
      map: map, 
      zoom: false,
      suppressInfoWindows: true, 
      preserveViewport: true       
  }); */
  // geoXml.parse('India_KML.kml');     
  var json = [{
    "title": "Dive goa",
    "lat": 11.372230617418888,
    "lng": 76.00253776872557,
    "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
  }, {
    "title": "Dive Goa2",
    "lat": 12.372230617418888,
    "lng": 78.00253776872557,
    "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)."
  }, {
    "title": "Dive Goa3",
    "lat": 11.372230617418888,
    "lng": 75.00253776872557,
    "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
  }]
  var infoBox;
  var boxOptions = {
    disableAutoPan: true,
    alignBottom: true,
    boxStyle: {
      whiteSpace: "wrap",
      width: "230px",
      padding: "5px",
      backgroundColor: "white"
    },
    closeBoxURL: "",
    maxWidth: 0, // no max
    pane: "floatPane",
    pixelOffset: new google.maps.Size(-95, -10),
    infoBoxClearance: new google.maps.Size(1, 1),
    contextmenu: true
  };
  infoBox = new InfoBox(boxOptions);
  for (var i = 0, length = json.length; i < length; i++) {
    var data = json[i],
      latLng = new google.maps.LatLng(data.lat, data.lng);

    // Creating a marker and putting it on the map
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      title: data.title
    });
    google.maps.event.addListener(marker, "click", (function(marker, data) {
      return function(e) {
        var ibContent = '<div class="infobox">' + '<div class="row">' + '<div class="col-lg-12">' + '<div class="marker-description">' + '<p>' + data.description + '</p>' + '</div>' + '</div>' + '</div>' + '</div>';
        infoBox.setContent(ibContent);
        infoBox.open(map, marker);
      }
    })(marker, data));
  }
  google.maps.event.addListener(map, "click", function() {
    infoBox.close();
  });
  google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
  });
}
google.maps.event.addDomListener(window, 'load', initMap);

#map-canvas {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  /* zoom:0.8;  */
}

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?region=IN&libraries=places"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map-canvas"></div>
<script>
</script>