2015-04-26 10 views
3

У меня есть полилинии, соединяющие две точки на карте. Я хочу отображать метки только для этих двух точек и скрывать все остальные ярлыки.Отображать наклейки только для определенных городов в Картах Google

Я изучил API Карт Google, чтобы узнать, как работают Стилированные карты. Используя скрытые функции, я мог бы скрыть и отобразить ярлыки с разной детализацией, но то, чего я не смог добиться, отображает только две метки города.

Например, если у меня есть линия, соединяющая Сан-Хосе и Нью-Йорк, на картах должны отображаться только метки Сан-Хосе и Нью-Йорка, а все остальные ярлыки скрыты. В настоящее время я вижу, что я могу скрыть ярлыки на уровне 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>

+0

Я не думаю, что есть способ, чтобы быть, что конкретно. Вы можете создать два маркера с инфо-окнами. Не совсем то же самое, но это может быть решением. – MrUpsidown

+0

Скрыть все ярлыки. Добавьте ярлыки для двух городов, которые вы хотите пометить. Возможный дубликат [Google Maps v3 Javascript: geojson накладывает названия городов и стран] (http://stackoverflow.com/questions/28681818/google-maps-v3-javascript-geojson-overlays-city-and-country-names). Возможный дубликат [Google maps hide small cities (localites)] (http://stackoverflow.com/questions/29382866/google-maps-hide-smaller-cities-localites) – geocodezip

+0

@geocodezip В этих сообщениях нет примеров. Если вы знаете, каких-либо полных примеров, не могли бы вы сообщить мне об этом. –

ответ

2

Пример из Google maps hide smaller cities (localites) с кодом/полилиний:

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 Google Maps предоставил его :) –

Смежные вопросы