如何使用 Google Maps API v3 突出显示地址？

Posted 2023-02-23

【中文标题】如何使用 Google Maps API v3 突出显示地址？

【英文标题】：How to highlight an address with Google Maps API v3?

【发布时间】：2014-12-03 12:16:43

【问题描述】：

我使用 Google Maps API v3 在地图上显示一些位置。基本上它的工作原理如下：有一个管理区域可以向数据库添加新位置。添加新位置后，我使用 Geocoder 服务检查 LatLng 值并将地址 + LatLng 保存到数据库中。之后，我只需按 LatLng 值显示地图 + 标记。这很好用。

var myLatlng = new google.maps.LatLng(52.494406, 13.429538);

var mapOptions = 
    zoom: 15,
    center: myLatlng


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

var marker = new google.maps.Marker(
    position: myLatlng,
    map: map
);

我在这里想念的是地址突出显示，如下图所示。

【问题讨论】：

如果您对该问题投反对票，请解释原因。

【参考方案1】：

您可以使用MarkerWithLabel、Documentation here.

function initialize() 

  var myLatlng = new google.maps.LatLng(-34.668520, -58.543857);
  var mapOptions = 
    zoom: 14,
    center: myLatlng
  
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker_labeled = new MarkerWithLabel(
    position: myLatlng,
    draggable: true,
    raiseOnDrag: true,
    map: map,
    labelContent: "OneWay's Home",
    labelAnchor: new google.maps.Point(-20, 10),
    labelClass: "markerLabel", // the CSS class for the label
    labelStyle: 
      opacity: 0.75
    
  );



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

html,
body,
#map-canvas 
  height: 100%;
  margin: 0px;
  padding: 0px


.markerLabel 
  color: black;
  font-weight: bold;
  text-shadow: 0px 0px 5px rgba(255, 0, 0, 1); 

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script>

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

【讨论】：

这实际上是一个很好的解决方案，但我想知道是否有更简单的方法（没有额外的库）来显示地址标签，就像它在 maps.google.com 上完成的本机一样。当没有“选项”解决方案时，我会稍等一下并接受您的回答。非常感谢您的帮助！