Google Maps API V3：KML加上附加标记不缩放以适合两者

Question

我有一个kml文件，可以在Google地图中加载。在同一页面上，我有一个文本框，用户可以在其中输入他们的位置，这将添加一个标记，这也适用。

我遇到麻烦的是，如果用户输入的位置超出kml文件的范围，地图将不会缩放以包含kml和新标记。

如果我有preserveViewport = false，它将缩放以适应kml。如果它是真的，它将缩放以适应新的标记。

$(document).ready(function() { 
    var mapOptions = { 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    var ctaLayer = new google.maps.KmlLayer('KMLLOCATION', { preserveViewport: false }); 
    ctaLayer.setMap(map); 

    var marker = new google.maps.Marker({ position: new google.maps.LatLng(LAT, LONG), map: map, title: 'You are here', clickable: false, icon: '/media/youarehere.png' }); 

    var bounds = new google.maps.LatLngBounds(); 
    var ll = new google.maps.LatLng(LAT, LONG); 
    bounds.extend(ll); 
    map.fitBounds(bounds); 
}); 

编辑

感谢geocodezip指着我在正确的方向。这是我更新的代码，工作。

$(document).ready(function() { 
    var mapOptions = { 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    var layer = new google.maps.KmlLayer('KMLLOCATION', { map: map, preserveViewport: true }); 

    var marker = new google.maps.Marker({ position: new google.maps.LatLng(LAT, LONG), map: map, title: 'You are here', clickable: false, icon: '/media/youarehere.png' }); 

    google.maps.event.addListener(layer, 'defaultviewport_changed', function() { 
    var bounds = layer.getDefaultViewport(); 
    var ll = new google.maps.LatLng(LAT, LONG); 
    bounds.extend(ll); 
    map.fitBounds(bounds); 
    }); 
}); 

Answer 1

你需要得到边界的KML（getDefaultViewport() on the KmlLayer），extend that with the additional marker然后调用使用“扩展”范围对象（preservViewport设置为true fitBounds所以地图上没有缩放的默认视口KmlLayer）。

Answer 2

若要添加到此，如果您包含多个kml并想缩放所有kml，这为我工作。

var bounds = null; 
google.maps.event.addListener(layer, 'defaultviewport_changed', function() { 
    if (bounds == null) 
     bounds = layer.getDefaultViewport(); 
    else 
     bounds.union(layer.getDefaultViewport()); 

     map.fitBounds(bounds); 

}); 

Answer 3

经过多次试验和错误，这是我想出了。您需要包含图表加载器https://www.gstatic.com/charts/loader.js和geoxml3 https://github.com/geocodezip/geoxml3/blob/master/kmz/geoxml3.js。该地图查看国家代码排序的融合表，其中几何表示国家边界，然后绘制地图的边界并放大地图。如果你想另一个标记添加到它只是使用bounds.extend(someLatLngClassInstanceOrLiteral)

google.charts.load('current', { 
    'packages': ['table'] 
}); 
google.charts.setOnLoadCallback(zoomMap); 

function zoomMap(){ 

    var map = new google.maps.Map(document.querySelectorAll('.single-map-selector')[0], { 
     center: new google.maps.LatLng(30, 0), 
     zoom: 2, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     disableDefaultUI: true, 
     scrollwheel: false, 
     draggable: false, 
    }); 

    var CountriesServed = ['US', 'CA', 'AU']; 

    var jointCountriesArray = CountriesServed.map(function(val, index){ 
     if(index < CountriesServed.length - 1){ 
      return '\'' + val + '\', '; 
     } 
     else{ 
      return '\'' + val + '\''; 
     } 
    }); 
    jointCountriesArray = jointCountriesArray.join(''); 

    var world_geometry = new google.maps.FusionTablesLayer({ 
     query: { 
      select: 'geometry', 
      from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk', 
      where: "ISO_2DIGIT IN (" + jointCountriesArray + ")", 
     }, 
     heatmap: { 
      enabled: false 
     }, 
     suppressInfoWindows: true, 
     map: map, 
     options: { 
      styleId: 2, 
      templateId: 2 
     }, 
    }); 

    var queryText = encodeURIComponent("select geometry from 1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk where 'ISO_2DIGIT' in (" + jointCountriesArray + ")"); 

    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText); 

    query.send(handleQuery); 

    function handleQuery(response){ 
     if (!response) { 
      console.log('no response'); 
      return; 
     } 
     if (response.isError()) { 
      console.log('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
      return; 
     } 
     FTresponse = response; 

     numRows = FTresponse.getDataTable().getNumberOfRows(); 

     var coordinates = []; 
     var bounds = new google.maps.LatLngBounds(); 

     for(var i = 0; i < numRows; i++) { 

      var kml = FTresponse.getDataTable().getValue(i,0); 

      var coordEls = geoXML3.xmlParse(kml).querySelectorAll('coordinates'); 
      var coordinateString = ''; 

      for(var j = 0; j < coordEls.length; j++){ 
       coordinateString += coordEls[j].innerHTML + ' '; 
      } 

      var unpairedCoordinates = coordinateString.split(',').map(function(val,index, arr){ 
       if(val == '0.0'){ 
        arr.splice(index,1); 
       } 
       else{ 
        return val.replace('0.0 ', ''); 
       } 
      }); 
      for(var k = 0; k < unpairedCoordinates.length; k++){ 
       if((k == 0 || k % 2 == 0) && k < unpairedCoordinates.length - 2){ 
        // is even or zero and we're not at the end of the array 
        // in the coordinates element the latlngs are flipped 
        bounds.extend({ 
         lat : parseFloat(unpairedCoordinates[k+1]), 
         lng : parseFloat(unpairedCoordinates[k]) 
        }); 
       } 
      } 

     } 

     map.fitBounds(bounds, -300); 
     map.setCenter(bounds.getCenter()); 

     //// uncomment if you want to see the rectangle of the bounds 
     // var rect = new google.maps.Rectangle({ 
     // strokeColor: '#FFFFFF', 
     // strokeOpacity: 0.8, 
     // strokeWeight: 2, 
     // fillColor: '#FFFFFF', 
     // fillOpacity: 0.35, 
     // map: map, 
     // bounds: bounds 
     // }); 
    } 
}