如何设置谷歌地图缩放以适​​应屏幕和＆amp;位置信息框标签取决于多边形的区域

Question

我正在使用谷歌地图的FusionTablesLayer和多边形来设置美国各州的层次。我在整合以下两件事时遇到了问题：

a）设置缩放属性，因此贴图将适合屏幕。我知道地图不接受十进制的缩放值。还有其他办法吗？

b）根据州的面积定位标签（即州名）。例如。加利福尼亚州标签应位于多边形上，而新泽西州标签应位于多边形区域下方。

预期输出：

当前状态：

我的代码：

var map;
var clientId = '{CLIENT_ID}';
var apiKey = '{API_KEY}';
var scopes = 'https://www.googleapis.com/auth/fusiontables';
var zoom = 4;
var labels = [];
var USAStates = '';
var infobox = {};
jQuery.get( "http://recruiters.wpsitesbuilder.com/wp-json/myplugin/v1/firms_data", function( data ) {
    USAStates = jQuery.parseJSON(data);
}).done(function( data ) {
    function initMap() {
        var latlng = new google.maps.LatLng(37.09024, -95.712891);
        var myOptions = {
            zoom: zoom,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true,
            disableDoubleClickZoom: false,
            draggable: true,
            keyboardShortcuts: true,
            panControl:true,
            zoomControl:false,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
            },
            mapTypeControl:false,
            scaleControl:false,
            scrollwheel: false,
            streetViewControl:false,
            overviewMapControl:true,
            rotateControl:false,
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
            }
        };
        var styles=[{featureType:"administrative",elementType:"all",stylers:[{hue:"#000000"},{lightness:-100},{visibility:"off"}]},{featureType:"landscape",elementType:"all",stylers:[{color:"#2c8ecd"},{visibility:"on"}]},{featureType:"landscape",elementType:"geometry",stylers:[{saturation:-100},{lightness:-3},{visibility:"on"},{color:"#2c8ecd"}]},{featureType:"landscape",elementType:"labels",stylers:[{hue:"#000000"},{saturation:-100},{lightness:-100},{visibility:"off"}]},{featureType:"poi",elementType:"all",stylers:[{hue:"#ff0000"},{saturation:-100},{lightness:-100},{visibility:"off"}]},{featureType:"road",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"road",elementType:"geometry",stylers:[{hue:"#ff0000"},{saturation:-100},{lightness:26},{visibility:"off"}]},{featureType:"road",elementType:"labels",stylers:[{hue:"#ffffff"},{saturation:-100},{lightness:100},{visibility:"off"}]},{featureType:"road.highway",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"road.highway.controlled_access",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"road.local",elementType:"all",stylers:[{hue:"#ffffff"},{saturation:-100},{lightness:100},{visibility:"on"}]},{featureType:"transit",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"transit",elementType:"geometry",stylers:[{visibility:"off"}]},{featureType:"transit",elementType:"labels",stylers:[{hue:"#ff0000"},{lightness:-100},{visibility:"off"}]},{featureType:"water",elementType:"geometry",stylers:[{saturation:-100},{lightness:100},{visibility:"on"},{color:"#2c8ecd"}]},{featureType:"water",elementType:"labels",stylers:[{hue:"#000000"},{saturation:-100},{lightness:-100},{visibility:"off"}]}];
        var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});
        var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});
        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        map.mapTypes.set('map_style', styledMap);
        map.setMapTypeId('map_style');
        var tableId = '17aT9Ud-YnGiXdXEJUyycH2ocUqreOeKGbzCkUw';
        var USAStateslayer = new google.maps.FusionTablesLayer({
            query: {
                select: 'geometry',
                from: tableId
            },
            options: {
                suppressInfoWindows: true
            },
            styles: [{
                polygonOptions: {
                    fillColor: '#ffffff',
                    fillOpacity: 1,
                    strokeColor: '#2c8ecd'
                }
            }],
            clickable: true
        });
        filterMap(USAStateslayer, tableId, map, USAStates);

        USAStateslayer.setMap(map);
        map.setCenter(latlng);

        jQuery.each(USAStates, function(key, value){
            var content = '<div class="infobox-content-container"><span class="state-name">'+value.state+'</span></div>';
            if(value.firms !== undefined) {
                content = '<div class="infobox-content-container"><span class="total-firms">'+value.firms+'</span><br /> Firms <br /> <span class="state-name">'+value.state+'</span></div>';
            }
            infobox = new InfoBox({
                content: content,
                boxStyle: {
                    border: "none",
                    textAlign: "center",
                    backgroundColor:"none",
                    fontSize: "8pt",
                    width: "50px",
                    color: '#000000',
                    'margin-top': "-25px"
                 },
                disableAutoPan: true,
                pane: "floatPane",
                pixelOffset: new google.maps.Size(-25, 0),
                position: new google.maps.LatLng(value.latitude,value.longitude),
                closeBoxURL: "",
                isHidden: false,
                enableEventPropagation: true
            });
            labels.push(infobox);
            labels[labels.length-1].open(map);
        });
    }

    // Filter the map based on checkbox selection.
      function filterMap(layer, tableId, map, USAStates) {

        layer.setOptions({styles:generateStyle(USAStates, map)});

      }

      // Generate a where clause from the checkboxes. If no boxes
      // are checked, return an empty string.
      function generateStyle(USAStates, map) {
        //default-style,gray
        var style=[{
           polygonOptions: {
                fillColor: '#ffffff',
                strokeWeight: 1,
                fillOpacity: 1,
                strokeColor: '#2c8ecd'
            }
        }];

       var styles={
         //open stores
         open:{polygonOptions: {
            fillColor: "#be2026"
          }},
        //closed stores
         closed:{polygonOptions: {
            fillColor: "#fff"
          }}
        };

        var selected={open:[],closed:[]};
        var stores = [];

        if(jQuery('#find-firms-container .selected-firms-list>span').length > 0) {
            jQuery('#find-firms-container .selected-firms-list>span').each(function(){
                var stateName = jQuery(this).text();
                stores.push(stateName);
            });
        }

        //populate the selected-object with the names of the stores
        jQuery.each(stores,function(i,o){
          var storeName = o.replace(/'/g, '\\\'');
            selected['open'].push(storeName);
        });
        //add a style for non-empty properties of the selected-object
        jQuery.each(selected,function(i,o){
           if(o.length){
             style.push(jQuery.extend(styles[i],{where:"'name' IN ('" + o.join("','") + "')"}));
           }
        });
        var i = 0;
        jQuery.each(USAStates, function(key, value){
            var color = '#000000';
            if(jQuery.inArray(value.state, selected.open) !== -1) {
               color = '#ffffff';
            }
            if(labels[i] !== undefined) {
                labels[i].boxStyle_.color= color;
                labels[i].open(map);
            }
            i++;
        });

        return style;
    }

    initMap();
});

Answer 1

不确定这是否有帮助，但在文档中它说明你应该明确设置#map样式的元素div的大小。

  

meta name =＆＃34; viewport＆＃34; content =＆＃34; initial-scale = 1.0，user-scalable = no＆＃34;

还有一个视口的元标记，其内容可以设置初始比例。也许玩初始比例会与缩放相互作用吗？

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>