隐藏兴趣点谷歌地图除了我的位置

Question

我正在使用 Google Map API V3，我注意到这里有很多标记，即使我不需要它们。所以我想隐藏除我以外的所有其他位置或不丢失我的位置标题。

下面是我的代码

HTML

<div id="map"></div>

Javascript

var map;
function initMap() {
    var myLocation = { lat: 52.5750833, lng: -0.2412917 };
    map = new google.maps.Map( document.getElementById('map'), {
        center: myLocation,
        zoom: 19,
        mapTypeControl: false
    }); 
}

我已经使用了这个代码。这对我有帮助，但它也删除了名为“皇家广场”的位置标题

var noPoi = [
    {
        featureType: "poi",
        elementType: "labels",
        stylers: [
            { 
                visibility: "off" 
            }
        ]   
    }
];
map.setOptions({styles: noPoi});

Answer 1

如果您只需要“您的”标记。移除所有 POI 标记，为要出现的地点 (POI) 添加一个标记。

概念证明小提琴

代码片段：

function initMap() {
  var infowindow = new google.maps.InfoWindow();
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -33.8688,
      lng: 151.2195
    },
    zoom: 18
  });

  var RoyalSq = new google.maps.Marker({
    placeId: "ChIJvfdyRztP4DsRfSKksTGiGWs",
    position: {
      lat: 21.232947,
      lng: 72.864397
    },
    map: map
  });
  RoyalSq.addListener('click', function(evt) {
    infowindow.setContent('<div class="poi-info-window gm-style"> <div jstcache="2"> <div class="title full-width" >Royal Square</div> <div class="address"> <div class="address-line full-width">Uttran</div><div class="address-line full-width" >Surat, Gujarat 394105</div><div class="address-line full-width">India</div> </div> </div> <div style="display:none"></div> <div class="view-link"> <a target="_blank" href="https://maps.google.com/maps?ll=21.233067,72.864432&amp;z=20&amp;t=m&amp;hl=en-US&amp;gl=US&amp;mapclient=apiv3&amp;cid=7717377770793476733"> <span> View on Google Maps </span> </a> </div> </div>');
    infowindow.open(map, RoyalSq);
  })
  google.maps.event.trigger(RoyalSq, 'click');
  map.setCenter(RoyalSq.getPosition());
  var noPoi = [{
    featureType: "poi",
    elementType: "labels",

    stylers: [{
      visibility: "off"
    }]
  }];

  map.setOptions({
    styles: noPoi
  });
}

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.controls {
  background-color: #fff;
  border-radius: 2px;
  border: 1px solid transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  height: 29px;
  margin-left: 17px;
  margin-top: 10px;
  outline: none;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 400px;
}

.controls:focus {
  border-color: #4d90fe;
}

.title {
  font-weight: bold;
}

#infowindow-content {
  display: none;
}

#map #infowindow-content {
  display: inline;
}

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" async defer></script>