Question

我尝试将KML文件多边形添加到已使用各自标记创建的地图中，没有明显的结果。可能吗？对我来说，它只能以这种或那种方式工作。 URL KML文件位于帖子的末尾。

＆＃13;

var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
    content: ''
});

// Our markers
markers1 = [
    ['0', 'CLI23456', -18.498682, -70.294426, 'as'],
    ['1', 'CLI12345', -18.499508, -70.295250, 'ap'],
    ['2', 'CLI78912', -18.497622, -70.293671, 'as'],
    ['3', 'CLI54321', -18.472946, -70.295662, 'pvp']
];

/**
 * Function to init map
 */

function initialize() {
    var center = new google.maps.LatLng(-18.476202, -70.307236);
    var mapOptions = {
        zoom: 13,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    for (i = 0; i < markers1.length; i++) {
        addMarker(markers1[i]);
    }
}

/**
 * Function to add marker to map
 */

function addMarker(marker) {
    var category = marker[4];
    var title = marker[1];
    var pos = new google.maps.LatLng(marker[2], marker[3]);
    var content = marker[1];

    marker1 = new google.maps.Marker({
        title: title,
        position: pos,
        category: category,
        map: map
    });

    gmarkers1.push(marker1);

    // Marker click listener
    google.maps.event.addListener(marker1, 'click', (function (marker1, content) {
        return function () {
            console.log('Gmarker 1 gets pushed');
            infowindow.setContent(content);
            infowindow.open(map, marker1);
            map.panTo(this.getPosition());
            map.setZoom(13);
        }
    })(marker1, content));
}

/**
 * Function to filter markers by category
 */

filterMarkers = function (category) {
    for (i = 0; i < markers1.length; i++) {
        marker = gmarkers1[i];
        // If is same category or category not picked
        if (marker.category == category || category.length === 0) {
            marker.setVisible(true);
        }
        // Categories don't match 
        else {
            marker.setVisible(false);
        }
    }
}

// Init map
initialize();

＆＃13;

#map-canvas {
    width: 500px;
    height: 500px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map-canvas"></div>
<select id="type" onchange="filterMarkers(this.value);">
    <option value="">Seleccionar categoría</option>
    <option value="as">AS</option>
    <option value="ap">AP</option>
    <option value="pvp">PVP</option>
</select>

＆＃13;

KML文件多边形：My KML file polygons

Answer 1

你应该使用kmlLayer

var map;

function initialize() {
    var center = new google.maps.LatLng(-18.476202, -70.307236);
    var mapOptions = {
        zoom: 13,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    for (i = 0; i < markers1.length; i++) {
        addMarker(markers1[i]);
    }


    var mykmlLayer = new google.maps.KmlLayer({
          url: 'http://redeslibres.cl/documentos/kml/SECTOR_AS.kml',
          map: map
    });
}

Answer 2

原生Google Maps Javascript KML渲染器为KmlLayer。

var kmlLayer = new google.maps.KmlLayer({
  url: 'http://redeslibres.cl/documentos/kml/SECTOR_AS.kml',
  map: map
});

防止＆＃34;自动缩放＆＃34;要适合KML，请使用preserveViewport: true选项。

var kmlLayer = new google.maps.KmlLayer({
  url: 'http://redeslibres.cl/documentos/kml/SECTOR_AS.kml',
  map: map,
  preserveViewport: true // prevent zoom from changing to fit KML
});

代码段

＆＃13;

var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
  content: ''
});

// Our markers
markers1 = [
  ['0', 'CLI23456', -18.498682, -70.294426, 'as'],
  ['1', 'CLI12345', -18.499508, -70.295250, 'ap'],
  ['2', 'CLI78912', -18.497622, -70.293671, 'as'],
  ['3', 'CLI54321', -18.472946, -70.295662, 'pvp']
];

/**
 * Function to init map
 */
function initialize() {
  var center = new google.maps.LatLng(-18.476202, -70.307236);
  var mapOptions = {
    zoom: 13,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var kmlLayer = new google.maps.KmlLayer({
    url: 'http://redeslibres.cl/documentos/kml/SECTOR_AS.kml',
    map: map,
    preserveViewport: true // prevent zoom from changing to fit KML
  });

  for (i = 0; i < markers1.length; i++) {
    addMarker(markers1[i]);
  }
}

/**
 * Function to add marker to map
 */
function addMarker(marker) {
  var category = marker[4];
  var title = marker[1];
  var pos = new google.maps.LatLng(marker[2], marker[3]);
  var content = marker[1];
  var marker1 = new google.maps.Marker({
    title: title,
    position: pos,
    category: category,
    map: map
  });
  gmarkers1.push(marker1);

  // Marker click listener
  google.maps.event.addListener(marker1, 'click', (function(marker1, content) {
    return function() {
      console.log('Gmarker 1 gets pushed');
      infowindow.setContent(content);
      infowindow.open(map, marker1);
      map.panTo(this.getPosition());
      map.setZoom(13);
    }
  })(marker1, content));
}

/**
 * Function to filter markers by category
 */
filterMarkers = function(category) {
  for (i = 0; i < markers1.length; i++) {
    marker = gmarkers1[i];
    // If is same category or category not picked
    if (marker.category == category || category.length === 0) {
      marker.setVisible(true);
    }
    // Categories don't match 
    else {
      marker.setVisible(false);
    }
  }
}

// Init map
initialize();

＆＃13;

#map-canvas {
  width: 500px;
  height: 500px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map-canvas"></div>
<select id="type" onchange="filterMarkers(this.value);">
  <option value="">Seleccionar categoría</option>
  <option value="as">AS</option>
  <option value="ap">AP</option>
  <option value="pvp">PVP</option>
</select>

＆＃13;

添加KML文件以映射已创建的api v3

2 个答案: