Google Maps Engine API - 阻止新标记事件的KML图层

时间:2015-04-17 17:12:52

标签: javascript google-maps google-maps-api-3 javascript-events google-maps-markers

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

我的问题是我在美国只有一个州拥有63个.kml文件。我知道我可以删除xml并防止名称在单击时弹出,但是我看不出那些对于许多.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无法与stackoverflow的代码段小部件配合使用。

1 个答案:

答案 0 :(得分:1)

KmlLayer可点击选项设为false

  

clickable boolean如果为true,则图层接收鼠标事件。默认值为true。

&#13;
&#13;
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);
&#13;
html,
      body,
      #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
&#13;
<script src="https://maps.googleapis.com/maps/api/js"></script>

  <div id="map-canvas"></div>
&#13;
&#13;
&#13;