How to put Google Map labels on top?

问题

I am working with polylines in google map. Basically i am trying to draw a line on several roads using polyline.

Now those polylines are blocking(on top) road labels. I have changed the opacity level for better viewing but i really want Google map labels on top.

I have studied styling maps, but i havent found any suitable solutions. Is there a way to do it?

Thanks in advance.

回答1:

The tiles(which contain the ground, label, streets etc. ) are delivered as single images, not as layers, so there is no way to put anything between particular features that are shown in the tiles.

But there may be approaches.

Let's assume you have 2 (synchronized) maps, 1 complete map and 1 map where you only display the labels.

When you place the map with the labels on top of the other map it would be able to get the desired effect(which does not mean that I would suggest to it it, I just like to avoid to say "impossible")

Demo: http://jsfiddle.net/cs9M6/

回答2:

There's a cleaner way to achieve this using a single map and a StyledMapType.

// Create an overlay to display map labels only
var labelsMapType = new google.maps.StyledMapType([{
    // Hide all map features by default
    stylers: [{
        visibility: 'off'
    }]
}, {
    // then turn the label feature on
    elementType: 'labels',
    stylers: [{
        visibility: 'on'
    }]
}], {
    name: 'Labels'
});

// Add to the map's overlay collection
map.overlayMapTypes.push(labelsMapType);

来源：https://stackoverflow.com/questions/24217771/how-to-put-google-map-labels-on-top

标签

javascript

google-maps

google-maps-api-3

polyline