Google Maps-一个地方已经有一个标记,我该如何使用它代替lat和lng标记

时间:2018-08-22 23:03:46

标签: google-maps google-maps-api-3

该地点(Casa Moda Tailors)已经在Google地图上。

如何在Google地图上使用其标记,而不是指定lat和lng并使其标记非常接近Casa moda Tailors标记?

我希望红色大号上下颠倒液滴标记显示Casa Moda Tailors,而不是lat和lng标记。

目前我都在我的Google地图上。我只需要Casa Moda Tailors标记,不需要lat&lng标记。

我尝试注释掉有效的lat和lng标记。但是,Casa Moda Tailors没有大的红色标记,只有一个小的黑色标记。

如何使深色的Casa Moda Tailors小标记显示为大的红色标记?

(我是Google Maps的新手,所以不确定我是否正确提出了我的问题?)

1 个答案:

答案 0 :(得分:1)

您不能隐藏单个POI标记。您可以全部隐藏它们,不确定是否适合您的用例。要全部隐藏它们,请向地图添加样式:

  styles: [{
    featureType: "poi",
    elementType: "labels",
    stylers: [{
      visibility: "off"
    }]
  }]

如果要在POI的位置放置标记,请使用Places Service PlaceId finder获取其PlaceId(或从POI标记的click事件中获取)。然后使用PlacesService .getDetails方法获取其信息,然后在其中放置标记。

screenshot of resulting map

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: [{
        featureType: "poi",
        elementType: "labels",
        stylers: [{
          visibility: "off"
        }]
      }]
    });
  var placeName = "Casa Moda Tailors";
  // from https://developers.google.com/maps/documentation/javascript/examples/places-placeid-finder    
  // Casa Moda Tailors
  // Place ID ChIJcSqXS40PkWsR02UyBG_0DXU
  // 11/79 Queen St, Southport QLD 4215, Australia
  var placeId = "ChIJcSqXS40PkWsR02UyBG_0DXU";
  var infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);

  service.getDetails({
    placeId: placeId
  }, function(place, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location,
        draggable: true
      });
      map.fitBounds(place.geometry.viewport);
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent('<div jstcache="33" class="poi-info-window gm-style"> <div jstcache="2"> <div jstcache="3" class="title full-width" jsan="7.title,7.full-width">Casa Moda Tailors</div> <div class="address"> <div jstcache="4" jsinstance="0" class="address-line full-width" jsan="7.address-line,7.full-width">11/79 Queen St</div><div jstcache="4" jsinstance="1" class="address-line full-width" jsan="7.address-line,7.full-width">Southport QLD 4215</div><div jstcache="4" jsinstance="*2" class="address-line full-width" jsan="7.address-line,7.full-width">Australia</div> </div> </div> <div jstcache="5" style="display:none"></div> <div class="view-link"> <a target="_blank" jstcache="6" href="https://maps.google.com/maps?ll=-27.972565,153.412907&amp;z=20&amp;t=m&amp;hl=en-US&amp;gl=US&amp;mapclient=apiv3&amp;cid=8434666434783765971"> <span> View on Google Maps </span> </a> </div> </div>');
        infowindow.open(map, this);
      });
    }
  });

}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script>
<div id="map_canvas"></div>