2011 m. gegužės 30 d., pirmadienis

Google Maps: kaip vietoj GDirections pradžios ir pabaigos taškų įdėti savo paveiksliuką?

Sprendimas:
I did some research on how the real experts are doing it. They don't use the dir.load() function to draw the route. They draw it themselves.

I have added an example below of how they did it. I tested it this time and it is working.

Its unfortunate that the default icons can't be simply be replaced... Would have saved some people alot of time.

Anyway, hope it helps ^_^

var map;
google.load("maps", "2");
var dir;
var baseStartIcon;
var baseEndIcon;

function initialize(lat,lng)
{

//Initialize the Google maps
map = new google.maps.Map2(document.getElementById("mymap"));
map.setCenter(new google.maps.LatLng(0,0), 1,G_NORMAL_MAP);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

//Create new icon objects
baseStartIcon = new GIcon();
baseEndIcon = new GIcon();

//Set the images of the icons
baseStartIcon.image = "smile.png";
baseEndIcon.image = "smile.png";

//Set the size of the image and the shadow (in pixels, this should be the same size as the images you are using)
baseStartIcon.iconSize = new GSize(16, 16);
baseEndIcon.iconSize = new GSize(16, 16);

//Set the anchor point of the new icon (x,y)
baseStartIcon.iconAnchor = new GPoint(8, 8); // this would be at the center of the icon
baseEndIcon.iconAnchor = new GPoint(8, 8); // this would be at the center of the icon

//create a new GDirections object with no options
dir = new GDirections();

//add a load event to the GDirection object
GEvent.addListener(dir,"load", function() {

//Get the poly line from the GDirections object
var poly=dir.getPolyline();

//moves the map to center the begining point in the user's view
//and sets the zoom level
map.setCenter(poly.getVertex(0),5);//poly.getVertex(0): is the first point of the polyline, the startpoint, 5: is the zoom level

//draw the polyline on the map
map.addOverlay(poly);

//Draw the custom icons
//one at the beginning
map.addOverlay(new GMarker(poly.getVertex(0),baseStartIcon));

//and one at the end of the polyline
map.addOverlay(new GMarker(poly.getVertex(poly.getVertexCount()-1),baseEndIcon));

});

dir.loadFromWaypoints(["San Francisco","Los Angeles"],{getPolyline:true});

}

google.setOnLoadCallback(initialize);


Pagal: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_24170806.html

Komentarų nėra:

Rašyti komentarą