Google Maps Engine API - KML 层阻碍新标记事件

Question

我目前正在构建一个小部件，它允许某人查看美国人口密度的 kml 热图，然后 select 该地图上的某个区域并将市场放到该位置。然后用户输入一个数字并创建一个英里半径以向用户显示他们覆盖了多少区域。

我的问题是我只有美国一个州的 63 个 .kml 文件。我知道我可以删除 xml <name> 和 <description> 以防止在单击时弹出名称，但我看不到那么多 .kml 文件的实用性。

是否有编程解决方案或 API 解决方案来防止仅 kml 图层可点击？

   var citymap = {};

   citymap['chicago'] = {
     center: new google.maps.LatLng(41.878113, -87.629798),
     value: 2714856
   };
   citymap['newyork'] = {
     center: new google.maps.LatLng(40.714352, -74.005973),
     value: 8405837
   };
   citymap['losangeles'] = {
     center: new google.maps.LatLng(34.052234, -118.243684),
     value: 3857799
   };
   citymap['vancouver'] = {
     center: new google.maps.LatLng(49.25, -123.1),
     value: 603502
   };

   var cityCircle;

   function initialize() {
     // Create the map.
     var mapOptions = {
       zoom: 8,
       center: new google.maps.LatLng(34.7361, -92.3311),
       mapTypeId: google.maps.MapTypeId.TERRAIN
     };

     var map = new google.maps.Map(document.getElementById('map-canvas'),
       mapOptions);

     // Construct the circle for each value in citymap.
     // Note: We scale the area of the circle based on the population.
     for (var city in citymap) {
       var populationOptions = {
         strokeColor: '#FF0000',
         strokeOpacity: 0.8,
         strokeWeight: 2,
         fillColor: '#FF0000',
         fillOpacity: 0.35,
         map: map,
         center: citymap[city].center,
         radius: Math.sqrt(citymap[city].value) * 100
       };
       // Add the circle for this city to the map.
       cityCircle = new google.maps.Circle(populationOptions);
     }

     var ctaLayer = new google.maps.KmlLayer({
       url: 'http://www.census.gov/main/kml/countysubs_z6/AR/05003.xml'
     });
     ctaLayer.setMap(map);

     google.maps.event.addListener(map, 'click', function(e) {
       placeMarker(e.latLng, map);
     });
   }

   function placeMarker(position, map) {
     var marker = new google.maps.Marker({
       position: position,
       map: map
     });
     map.panTo(position);
   }

   google.maps.event.addDomListener(window, 'load', initialize);

      html,
      body,
      #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

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

酌情说明：Google API 不适用于 Stack Overflow 的代码片段小部件。

Answer 1

将 KmlLayer 可点击选项设置为 false

clickable boolean If true, the layer receives mouse events. Default value is true.

var citymap = {};

   citymap['chicago'] = {
     center: new google.maps.LatLng(41.878113, -87.629798),
     value: 2714856
   };
   citymap['newyork'] = {
     center: new google.maps.LatLng(40.714352, -74.005973),
     value: 8405837
   };
   citymap['losangeles'] = {
     center: new google.maps.LatLng(34.052234, -118.243684),
     value: 3857799
   };
   citymap['vancouver'] = {
     center: new google.maps.LatLng(49.25, -123.1),
     value: 603502
   };

   var cityCircle;

   function initialize() {
     // Create the map.
     var mapOptions = {
       zoom: 8,
       center: new google.maps.LatLng(34.7361, -92.3311),
       mapTypeId: google.maps.MapTypeId.TERRAIN
     };

     var map = new google.maps.Map(document.getElementById('map-canvas'),
       mapOptions);

     // Construct the circle for each value in citymap.
     // Note: We scale the area of the circle based on the population.
     for (var city in citymap) {
       var populationOptions = {
         strokeColor: '#FF0000',
         strokeOpacity: 0.8,
         strokeWeight: 2,
         fillColor: '#FF0000',
         fillOpacity: 0.35,
         map: map,
         center: citymap[city].center,
         radius: Math.sqrt(citymap[city].value) * 100
       };
       // Add the circle for this city to the map.
       cityCircle = new google.maps.Circle(populationOptions);
     }

     var ctaLayer = new google.maps.KmlLayer({
       url: 'http://www.census.gov/main/kml/countysubs_z6/AR/05003.xml',
       clickable: false
     });
     ctaLayer.setMap(map);

     google.maps.event.addListener(map, 'click', function(e) {
       placeMarker(e.latLng, map);
     });
   }

   function placeMarker(position, map) {
     var marker = new google.maps.Marker({
       position: position,
       map: map
     });
     map.panTo(position);
   }

   google.maps.event.addDomListener(window, 'load', initialize);

html,
      body,
      #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

<script src="https://maps.googleapis.com/maps/api/js"></script>

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