logo标签列表

仅向特定城市在谷歌地图中显示标签

google-mapsgoogle-maps-api-3
4
我在地图上连接了两点，现在我只想显示这两个点的标签，并隐藏其他所有标签。
我已经探索了Google Maps API，看看样式化地图如何使用。利用隐藏功能，我能够实现在不同粒度上的标签隐藏和显示，但我无法仅显示两个城市的标签。
例如，如果我连接了圣何塞和纽约的线路，则只应显示地图上的圣何塞和纽约标签，而其他所有标签都应该被隐藏起来。目前我发现我可以隐藏行政区级别的标签，但这也会隐藏圣何塞和纽约的标签。
这是我拥有的一些关于折线和隐藏一些功能的代码片段。 

<!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() {
 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: "on" }
     ]
 },
    {
      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>

我认为没有一种特别具体的方法。您可以创建带有信息窗口的两个标记。虽然不完全相同，但这可能是一个解决方案。 - MrUpsidown
隐藏所有标签。添加您想要标记的两个城市的标签。可能是Google Maps v3 Javascript：geojson覆盖城市和国家名称的重复。可能是Google地图隐藏较小的城市（当地）的重复。 - geocodezip
@geocodezip 这些帖子中并没有引用任何示例。如果你知道任何完整的示例，请告诉我。 - ATP
@geocodezip，您已引用以下示例。谢谢！ - ATP
1个回答
2

以下是与您的代码/折线相关的示例，来自Google Maps隐藏较小的城市（地方）：

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/npm/google-maps-utility-library-v3-infobox@1.1.14/dist/infobox.js"></script>
<div id="map-canvas"></div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接