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

【问题标题】：Google Maps Engine API - KML Layers Obstructing New Markers EventGoogle Maps Engine API - KML 图层阻碍新标记事件
【发布时间】：2015-06-24 16:16:56
【问题描述】：

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

我的问题是我只有美国一个州的 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 的代码 sn-p 小部件。

【问题讨论】：

似乎是 signed_in=true 导致了 SO 问题。

标签： javascript google-maps google-maps-api-3 google-maps-markers dom-events

【解决方案1】：

将 KmlLayer 可点击选项设置为 false

clickable boolean 如果为 true，则图层接收鼠标事件。默认值为 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>

【讨论】：