我如何显示标记下的文本 [英] How can i show text under marker

问题描述

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

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

  loop 
 htp .print（'geocoder.getLatLng（'）; 
 htp.print（''''|| r_klt.geoloc ||''''||'，'）; 
 htp.print（'函数（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.infoWin dowAnchor = 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; 
  

解决方案

我可以在您的示例中看到的JavaScript代码使用Google Maps JavaScript API的死亡版本2，版本2在2011年弃用并完全删除来自Google服务器，您应该将代码迁移到当前版本为3的Maps JavaScript API。

引用您的问题，您可以使用MarkerLabel对象将标签添加到标记，此外您可以使用自定义图标（图标对象）定位标签

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

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

查看以下JavaScript示例，该示例将标签添加到定制标记的下方并将其放在定位标记之下

 函数initMap（）{var myLatLng = {la t：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}}）;}  

/ *总是显式设置地图高度来定义包含地图的div *元素。 * /＃map {height：100％;} / *可选：使样本页面填满窗口。 * / html，body {height：100％;保证金：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>

我希望这有助于您！

I have one problem when showing markers on a map. I would like to show some text below the marker, but I can not do it anyway. This is my example code, I wonder what I need to add to it to appear permanently when markers shows

This is one part of my code example:

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;  

解决方案

The JavaScript code that I can see in your example uses the dead version 2 of Google Maps JavaScript API. The version 2 was deprecated in 2011 and completely removed from Google servers some time ago. You should migrate the code to the current version 3 of Maps JavaScript API.

Referring to your question, you can add labels to markers using the MarkerLabel object and additionally you can position labels using the custom icons (Icon object)

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

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

Have a look at the following JavaScript example that adds label and position it below the custom marker

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>

I hope this helps!

这篇关于我如何显示标记下的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！