如何在标记下显示文本

Question

我在地图上显示标记时遇到了一个问题。我想在标记下方显示一些文本，但无论如何我都做不到。这是我的示例代码，我想知道我需要添加什么才能在标记显示时永久显示

这是我的代码示例的一部分：

loop  
     htp.print('geocoder.getLatLng(');  
     htp.print(''''||r_klt.geoloc||''''||',');  
     htp.print('function(point) {');  
     htp.print('var baseIcon = new GIcon(G_DEFAULT_ICON);');  
     htp.print('baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png%22;');  
   --htp.print('baseIcon.shadow = "/i/pdf.png";');  
     htp.print('baseIcon.iconSize = new GSize(20, 34);');  
     htp.print('baseIcon.shadowSize = new GSize(37, 34);');  
     htp.print('baseIcon.iconAnchor = new GPoint(9, 34);');  
     htp.print('baseIcon.infoWindowAnchor = new GPoint(9, 2);');  
     htp.print('var letteredIcon = new GIcon(baseIcon);');  
     l_address := r_klt.geoloc;
     htp.print('letteredIcon.image = "http://www.google.com/mapfiles/marker'%7C%7Cchr(65+l_t)%7C%7C'.png%22;');    
     htp.print('markerOptions = { icon:letteredIcon'};');   
     htp.print('var marker = new GMarker(point,markerOptions);');  
     htp.print('var html = "<h1>'||r_klt.geoloc||'</h1>";');
     htp.print('GEvent.addListener(marker, "mouseover", function() {  marker.openInfoWindowHtml(html);  });');
     htp.print('map.addOverlay(marker);');  
     htp.print('}');  
     htp.print(');');  
     l_t := l_t + 1;  
   end loop;  

Answer 1

我在您的示例中看到的 JavaScript 代码使用了 Google Maps JavaScript API 的死版本 2。第 2 版已于 2011 年弃用，不久前已从 Google 服务器中完全删除。您应该将代码迁移到 Maps JavaScript API 的当前版本 3。

参考您的问题，您可以使用 MarkerLabel 对象为标记添加标签，此外您还可以使用自定义图标（图标对象）定位标签

https://developers.google.com/maps/documentation/javascript/3.exp/reference#MarkerLabel

https://developers.google.com/maps/documentation/javascript/3.exp/reference#Icon

查看以下 JavaScript 示例，该示例添加标签并将其放置在自定义标记下方

function initMap() {
    var myLatLng = {lat: 47.363362, lng: 8.485823};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!',
      icon: {
        labelOrigin: new google.maps.Point(16,64),
        url: "https://drive.google.com/uc?id=0B3RD6FDNxXbdVXRhZHFnV2xaS1E"
      },
      label: {
        text: "Hello world!",
        color: "white",
        fontWeight: "bold",
        fontSize: "16px"
      }
    });
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

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

我希望这会有所帮助！

Answer 2

function initMap() {
    var myLatLng = {lat: 47.363362, lng: 8.485823};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!',
      icon: {
        labelOrigin: new google.maps.Point(16,64),
        url: "https://drive.google.com/uc?id=0B3RD6FDNxXbdVXRhZHFnV2xaS1E"
      },
      label: {
        text: "Hello world!",
        color: "white",
        fontWeight: "bold",
        fontSize: "16px"
      }
    });
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

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