2015-04-26 94 views
3

我有連接地圖上兩點的多段線。 我只想爲這兩點顯示標籤,並隱藏所有其他標籤。僅在Google地圖中顯示特定城市的標籤

我已經探索了Google Maps API以瞭解Styled Maps的工作原理。使用隱藏功能,我可以隱藏和顯示不同粒度的標籤,但是我無法實現只顯示兩個城市標籤。例如,如果我有一條線連接聖何塞和紐約,那麼只有聖何塞和紐約的標籤應該顯示在地圖上,其他所有標籤都隱藏起來。目前我所看到的是,我可以將標籤隱藏在administrative.province層面,但它也隱藏了聖何塞和紐約的標籤。

下面是我對摺線和隱藏某些功能的一段代碼。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <title>Simple Polylines</title> 
 
    <style> 
 
     html, body, #map-canvas { 
 
     height: 100%; 
 
     margin: 0px; 
 
     padding: 0px 
 
     } 
 
    </style> 
 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> 
 
    <script> 
 

 
function initialize() { 
 
\t var MY_MAPTYPE_ID = 'custom_style'; 
 
//var MY_MAPTYPE_ID = google.maps.MapTypeId.ROADMAP; 
 
    var featureOpts = [ 
 
    { 
 
     stylers: [ 
 
    //  { hue: '#890000' }, 
 
     { visibility: 'on' } 
 
     ] 
 
    }, 
 
    { 
 
     elementType: 'labels', 
 
     stylers: [ 
 
     { visibility: 'off' } 
 
     ] 
 
    }, 
 
\t { 
 
\t  featureType: "administrative.country", 
 
\t  elementType: "labels", 
 
\t  stylers: [ 
 
\t \t { visibility: "off" } 
 
\t  ] 
 
\t }, 
 
\t { 
 
\t  featureType: "administrative.locality", 
 
\t  elementType: "labels", 
 
\t  stylers: [ 
 
\t \t { visibility: "on" } 
 
\t  ] 
 
\t }, 
 
    { 
 
     featureType: 'road', 
 
     stylers: [ 
 
     { color: '#00FF00' }, 
 
     { visibility: 'off' } 
 
     ] 
 
    } 
 
    ]; 
 

 

 
    var mapOptions = { 
 
    zoom: 3, 
 
    center: new google.maps.LatLng(0, -180), 
 
    mapTypeControlOptions: { 
 
     mapTypeIds: [google.maps.MapTypeId.TERRAIN, MY_MAPTYPE_ID] 
 
    }, 
 
    mapTypeId: MY_MAPTYPE_ID 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById('map-canvas'), 
 
     mapOptions); 
 

 
    var styledMapOptions = { 
 
    name: 'Custom Style' 
 
    }; 
 

 
    var flightPlanCoordinates = [ 
 
    new google.maps.LatLng(40.7127, -74.0059), 
 
    new google.maps.LatLng(-27.46758, 153.027892) 
 
    ]; 
 
    var flightPlanCoordinates1 = [ 
 
    new google.maps.LatLng(50.7127, -74.0059), 
 
    new google.maps.LatLng(-27.46758, 153.027892) 
 
    ]; 
 

 
    var flightArray = []; 
 
    flightArray.push(flightPlanCoordinates); 
 
    flightArray.push(flightPlanCoordinates1); 
 

 
    var colorArray = []; 
 
    colorArray.push('#FF0000'); 
 
    colorArray.push('#00FF00'); 
 

 

 
// Code for displaying the polylines in the browser 
 
    for(var i=0; i < flightArray.length; i++) { 
 
    
 
    var flightPath = new google.maps.Polyline({ 
 
    path: flightArray[i], 
 
    geodesic: true, 
 
    strokeColor: colorArray[i], 
 
    strokeOpacity: 1.0, 
 
    strokeWeight: 1 
 
    }); 
 
    var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions); 
 
    map.mapTypes.set(MY_MAPTYPE_ID, customMapType); 
 
    flightPath.setMap(map); 
 

 

 
    } 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 
    </script> 
 
    </head> 
 
    <body> 
 
    <div id="map-canvas"></div> 
 
    </body> 
 
</html>
Google maps hide smaller cities (localites)與您的代碼/折線

+0

我不認爲有一種方法可以是特定的。您可以使用infowindows創建兩個標記。不盡相同,但這可能是一個解決方案。 – MrUpsidown

+0

隱藏所有標籤。爲您想要標記的兩個城市添加標籤。 [Google Maps v3 Javascript:geojson覆蓋城市和國家名稱]的可能重複(http://stackoverflow.com/questions/28681818/google-maps-v3-javascript-geojson-overlays-city-and-country-names)。可能的[Google地圖隱藏小城市(localites)]的重複](http://stackoverflow.com/questions/29382866/google-maps-hide-smaller-cities-localites) – geocodezip

+0

@geocodezip這些帖子中沒有引用任何示例。如果你知道任何完整的例子,你能否讓我知道。 –

回答

2

例子:

function initialize() { 
 
    var MY_MAPTYPE_ID = 'custom_style'; 
 
    //var MY_MAPTYPE_ID = google.maps.MapTypeId.ROADMAP; 
 
    var featureOpts = [{ 
 
    stylers: [ 
 
     //  { hue: '#890000' }, 
 
     { 
 
     visibility: 'on' 
 
     } 
 
    ] 
 
    }, { 
 
    elementType: 'labels', 
 
    stylers: [{ 
 
     visibility: 'off' 
 
    }] 
 
    }, { 
 
    featureType: "administrative.country", 
 
    elementType: "labels", 
 
    stylers: [{ 
 
     visibility: "off" 
 
    }] 
 
    }, { 
 
    featureType: "administrative.locality", 
 
    elementType: "labels", 
 
    stylers: [{ 
 
     visibility: "off" 
 
    }] 
 
    }, { 
 
    featureType: 'road', 
 
    stylers: [{ 
 
     color: '#00FF00' 
 
    }, { 
 
     visibility: 'off' 
 
    }] 
 
    }]; 
 

 

 
    var mapOptions = { 
 
    zoom: 3, 
 
    center: new google.maps.LatLng(0, -180), 
 
    mapTypeControlOptions: { 
 
     mapTypeIds: [google.maps.MapTypeId.TERRAIN, MY_MAPTYPE_ID] 
 
    }, 
 
    mapTypeId: MY_MAPTYPE_ID 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById('map-canvas'), 
 
    mapOptions); 
 

 
    var styledMapOptions = { 
 
    name: 'Custom Style' 
 
    }; 
 

 
    var flightPlanCoordinates = [ 
 
    new google.maps.LatLng(40.7127, -74.0059), 
 
    new google.maps.LatLng(-27.46758, 153.027892) 
 
    ]; 
 
    var flightPlanCoordinates1 = [ 
 
    new google.maps.LatLng(50.7127, -74.0059), 
 
    new google.maps.LatLng(-27.46758, 153.027892) 
 
    ]; 
 

 
    var flightArray = []; 
 
    flightArray.push(flightPlanCoordinates); 
 
    flightArray.push(flightPlanCoordinates1); 
 

 
    var colorArray = []; 
 
    colorArray.push('#FF0000'); 
 
    colorArray.push('#00FF00'); 
 

 

 
    // Code for displaying the polylines in the browser 
 
    for (var i = 0; i < flightArray.length; i++) { 
 

 
    var flightPath = new google.maps.Polyline({ 
 
     path: flightArray[i], 
 
     geodesic: true, 
 
     strokeColor: colorArray[i], 
 
     strokeOpacity: 1.0, 
 
     strokeWeight: 1 
 
    }); 
 
    var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions); 
 
    map.mapTypes.set(MY_MAPTYPE_ID, customMapType); 
 
    flightPath.setMap(map); 
 
    } 
 
    var citiesJSON = { 
 
    geonames: [{ 
 
     lat: 40.7127, 
 
     lng: -74.0059, 
 
     name: "New York" 
 
    }, { 
 
     lat: -27.46758, 
 
     lng: 153.027892, 
 
     name: "Brisbane" 
 
    }, { 
 
     lat: 50.7127, 
 
     lng: -74.0059, 
 
     name: "Quebec" 
 
    }] 
 
    }; 
 
    var mapLabels = []; 
 
    for (var i = 0; i < citiesJSON.geonames.length; i++) { 
 
    var myOptions = { 
 
     content: citiesJSON.geonames[i].name, 
 
     boxStyle: { 
 
     border: "none", 
 
     textAlign: "center", 
 
     fontSize: "8pt", 
 
     width: "100px" 
 
     }, 
 
     disableAutoPan: true, 
 
     pixelOffset: new google.maps.Size(-50, 0), 
 
     position: new google.maps.LatLng(citiesJSON.geonames[i].lat, 
 
     citiesJSON.geonames[i].lng), 
 
     closeBoxURL: "", 
 
     isHidden: false, 
 
     pane: "mapPane", 
 
     enableEventPropagation: true 
 
    }; 
 

 
    var ibLabel = new InfoBox(myOptions); 
 
    ibLabel.open(map); 
 
    mapLabels.push(ibLabel); 
 
    var marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(citiesJSON.geonames[i].lat, 
 
     citiesJSON.geonames[i].lng), 
 
     map: map, 
 
     icon: { 
 
     path: google.maps.SymbolPath.CIRCLE, 
 
     scale: 2 
 
     } 
 
    }); 
 
    } 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);
html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> 
 
<div id="map-canvas"></div>

+0

真棒,它完美的作品!謝謝,很多@geocodezip。我們有一個額外的費用,包括另一個JS,我希望谷歌地圖API本身提供它:) –

相關問題