Change center of Google Map GeoChart

问题

I'm working with marine scientists and they take samples off the coast. I would like to change the center of the chart to be off the coast. I would like to give a latitude/longitude pair for the center of the chart, or two latitude/longitude pairs for a window/view of the map area, or specify multiple states like US-CT-NY. I'm hoping there is a hidden API like geochart.center = {lat: 89, long: -127}.

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['Lat', 'Long', 'Popularity'],

    [41.083333333276, -73.39999999978, 20.4 ],
    [41.083333333276, -73.39999999978, 20.6 ],
    [41.099550000113, -73.415400000078, 19.0 ]
  ]);

  var options = {title:'Temperature', region:'US-CT', resolution:'metros', width: 556, height: 347};
  var geochart = new google.visualization.GeoChart(
      document.getElementById('visualization'));
  geochart.draw(data, options);
}

http://code.google.com/apis/ajax/playground/?type=visualization#geo_chart

回答1:

Unfortunately there is no such option in the current version of the google geochart. However I can think of some CSS hacks that might work more or less. Something like:

#visualization {
width:550px;
overflow:hidden;
}
#visualization svg {
margin-left:-100px;
}

You would have to figure out what values would work for you.

I've used this method in the past to improve the 'crop' the API does in some of the areas.

It's far from perfect, but I think it's the only way to manipulate a bit the crop and center of the maps generated.

回答2:

I needed to do something similar, plus some other adjustments. I'd like to share my hackings in case it helps others...

First the html:

<div id="geo_outer"><div id="<?php $inner ?>"></div></div>

#geo_outer is the container which crops/frames the actual geochart container.

The geochart container was initially called "geo_inner" but I decided I wanted the option of a map of Australia & New Zealand (ANZ) and a map of just Australia (AUS) depending on if New Zealand was in the resultset from the database.

To enlarge the map and maximize geo_outer's available space, I merely increased the dimension of the inner div to something larger than the dimensions of #geo_outer and shifted it around until I had the wanted regions vertically and horizontally centered in #geo_outer. *by default, google's image tries to fill the dimensions of its container (inner) -- which means I don't need to fiddle with the geochart's width/height in the javascript options.

#geo_outer {width:600px;height:490px;overflow:hidden;}
#geo_innerAUS {
    width:1100px;
    height:1048px;
    margin-top:-202px;
    margin-left:-235px;
}
#geo_innerANZ {
    width:850px;
    height:748px;
    margin-top:-112px;
    margin-left:-205px;
}

This offered a better visual outcome, but I still didn't want to see all those unnecessary islands to the north and northeast. So, clip-path to the rescue. Now I'm not a natural hand at lining up the points, so I got started the easy way by highlighting the inner div via brower developer tools, screenshot, and dropped it into http://bennettfeely.com/clippy/ . I could roughly choose what kind of polygon I needed and drag dots around until things were right. (I did have to do some minor tweaking once I applied the polygon points to my page.)

Here is the css that added to the respective div's:

AUS: -webkit-clip-path:polygon(58% 21%, 71% 41%, 75% 66%, 22% 66%, 22% 24%); clip-path:polygon(58% 21%, 71% 41%, 75% 66%, 22% 66%, 22% 24%); ANZ: -webkit-clip-path:polygon(60% 18%, 97% 56%, 74% 80%, 26% 80%, 26% 22%); clip-path:polygon(60% 18%, 97% 56%, 74% 80%, 26% 80%, 26% 22%);

You can easily fine tune your polygon via browser developer tools if you use background-color:red; on inner's first child (div).

Finally, be sure not to trim too much away from the bottom if you want to include the legend. I really had to go digging through the DOM to find that little rascal. Here the css I used to move it into view:

#geo_innerAUS > div > div:nth-child(1) > div > svg > g > g:nth-child(3){transform:translate(350px,-350px);}
#geo_innerANZ > div > div:nth-child(1) > div > svg > g > g:nth-child(3){transform:translate(275px,-140px);}

p.s. Here is the javascript that I drop in before closing the body:

function drawGeoChart(){
    var data = google.visualization.arrayToDataTable([
        <?php echo $geo_jsdata; ?>
    ]);
    var options={
        region:'AU',
        displayMode:'regions',
        colorAxis:{colors: ['red','yellow','green']},
        resolution:'provinces'
    };
    var chart=new google.visualization.GeoChart($('#geo_outer>div:first-child')[0]);
        chart.draw(data,options);
}
google.charts.load("current",{packages:["geochart"]});
google.charts.setOnLoadCallback(drawGeoChart);

This worked perfectly on my phone and laptop. I suspect minimal trouble across most devices because my containers have dimensions in pixels and the clip-path is all percentages. When I zoomed my browser in and out, everything remained nice.

来源：https://stackoverflow.com/questions/12961972/change-center-of-google-map-geochart

标签

javascript

google-visualization