Expanding Overlay Marker on Google Maps?

问题

I can draw overlay items onto google maps just fine, an image that looks like:

______
|    |
______
  \/

Where the "/" part is the "pin" that marks the lat/lon on the map and a picture in the middle of it. My question is, is there any way to expand this when the user clicks on it? I'll of course have to change this to some kind of dialog or layout and change it when it gets clicked.

I want to have it smaller like that with just an image when not clicked on, but when it is clicked on it expands over like a second to:

--------------------------------------
| <image>                  <buttons> |
|                          <buttons> |
| <some info here>                   |
|                                    |
--------------------------------------
                 \/

Is this possible?

回答1:

Use this...

Balloons without icons: https://github.com/jgilfelt/android-mapviewballoons#readme
Balloons with icons (extends Jeff Gilfelt's project): https://github.com/galex/android-mapviewballoons

回答2:

Create a custom overlay, and in the onAdd override, create a custom div that has your required content layout.

myOverlay.prototype.onAdd = function(){
  var div = document.createElement('DIV');
  div.style.position = 'absolute';  // so we can position it later.
  // populate the div
  this.div_ = div;
  this.getPanes().overlayLayer.appendChild(div);
}

Now in the draw override you decide where to place it on the map. In the draw you could draw the marker initially with an click event handler that sets visibility on the div.

myOverlay.prototype.draw = function(){
  var div = this.div_;
  //populate div with content as required.
  div.style.left = //calculate location based on width / height and centre 
  div.style.top = // ditto
}

来源：https://stackoverflow.com/questions/3286983/expanding-overlay-marker-on-google-maps

标签

android

google-maps

overlay