google maps - google - خرائط جوجل علامة التسمية مع شخصيات متعددة




google map marker icons (4)

اعتبارًا من الإصدار 3.26.10 من واجهة برمجة التطبيقات ، يمكنك تعيين تسمية العلامة بأكثر من حرف. يتم رفع القيد.

جربه ، إنه يعمل!

علاوة على ذلك ، باستخدام كائن MarkerLabel بدلاً من مجرد سلسلة ، يمكنك تعيين عدد من الخصائص للمظهر ، وإذا كنت تستخدم رمزًا مخصصًا ، يمكنك تعيين خاصية labelOrigin لإعادة وضع التسمية.

المصدر: https://code.google.com/p/gmaps-api-issues/issues/detail?id=8578#c30 (أيضًا ، يمكنك الإبلاغ عن أي مشكلات تتعلق بهذا في سلسلة الصفحات المرتبطة أعلاه)

أحاول إضافة تسمية مكونة من 4 أحرف (على سبيل المثال ، "A123") إلى علامة "خرائط Google" والتي تحتوي على رمز عريض محدد بمسار مخصص.

var marker = new google.maps.Marker({
  position: latLon,
  label: { text: 'A123' },
  map: map,
  icon: {
    path: 'custom icon path',
    fillColor: '#000000',
    labelOrigin: new google.maps.Point(26.5, 20),
    anchor: new google.maps.Point(26.5, 43)
    scale: 1,
  }
});

واجهة برمجة التطبيقات لتمييز العلامة مقصورة على حرف واحد ، لذلك تظهر فقط علامة "A" في المثال أعلاه. لقد حاولت استخدام أدوات المطور chrome لاختراق HTML الذي تم إنشاؤه بواسطة gmaps وإعادة التسمية الأطول. يتم عرضه بشكل مثالي دون أي تعديلات على css المطلوبة ، لذا فأنا فقط بحاجة لإيجاد طريقة لاستعادة أحرف التصنيف الأخرى التي جردتها خرائط Google.

لقد طرحت مشكلة في خرائط Google للمطالبة برفع هذا التقييد. يرجى التفكير في التصويت لصالح مشكلة Google عن طريق زيارة الرابط أعلاه وتمييز المشكلة لتشجيع Google على حلها - شكرًا!

ولكن في غضون ذلك ، هل هناك حل بديل يمكنني استخدامه لإزالة قيود char واحد؟

هل هناك طريقة يمكنني من خلالها إنشاء ملحق مخصص لـ google.maps.Marker لعرض التصنيف الأطول؟


بادئ ذي بدء ، شكرا لكاتب المؤلف!

لقد وجدت الرابط أدناه أثناء googling وهو بسيط للغاية ويعمل بشكل أفضل. لن تفشل أبدًا ما لم يتم إهمال SVG.

https://codepen.io/moistpaint/pen/ywFDe/

يوجد بعض الأخطاء في تحميل js في الكود هنا ولكن تعمل بشكل مثالي على رابط codepen.io المقدم.

var mapOptions = {
    zoom: 16,
    center: new google.maps.LatLng(-37.808846, 144.963435)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);


var pinz = [
    {
        'location':{
            'lat' : -37.807817,
            'lon' : 144.958377
        },
        'lable' : 2
    },
    {
        'location':{
            'lat' : -37.807885,
            'lon' : 144.965415
        },
        'lable' : 42
    },
    {
        'location':{
            'lat' : -37.811377,
            'lon' : 144.956596
        },
        'lable' : 87
    },
    {
        'location':{
            'lat' : -37.811293,
            'lon' : 144.962883
        },
        'lable' : 145
    },
    {
        'location':{
            'lat' : -37.808089,
            'lon' : 144.962089
        },
        'lable' : 999
    },
];

 

for(var i = 0; i <= pinz.length; i++){
   var image = 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2238%22%20height%3D%2238%22%20viewBox%3D%220%200%2038%2038%22%3E%3Cpath%20fill%3D%22%23808080%22%20stroke%3D%22%23ccc%22%20stroke-width%3D%22.5%22%20d%3D%22M34.305%2016.234c0%208.83-15.148%2019.158-15.148%2019.158S3.507%2025.065%203.507%2016.1c0-8.505%206.894-14.304%2015.4-14.304%208.504%200%2015.398%205.933%2015.398%2014.438z%22%2F%3E%3Ctext%20transform%3D%22translate%2819%2018.5%29%22%20fill%3D%22%23fff%22%20style%3D%22font-family%3A%20Arial%2C%20sans-serif%3Bfont-weight%3Abold%3Btext-align%3Acenter%3B%22%20font-size%3D%2212%22%20text-anchor%3D%22middle%22%3E' + pinz[i].lable + '%3C%2Ftext%3E%3C%2Fsvg%3E';

  
   var myLatLng = new google.maps.LatLng(pinz[i].location.lat, pinz[i].location.lon);
   var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  });
}
html, body, #map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
<div id="map-canvas"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDtc3qowwB96ObzSu2vvjEoM2pVhZRQNSA&signed_in=true&callback=initMap&libraries=drawing,places"></script>

تحتاج فقط إلى uri-encml html SVG واستبدالها في متغير الصورة بعد "data: image / svg + xml" في حلقة for.

لترميز uri ، يمكنك استخدام uri-encoder-decoder

يمكنك فك تشفير رمز svg الموجود أولاً للحصول على فهم أفضل لما هو مكتوب.


حل أبسط بكثير لهذه المشكلة يسمح الأحرف والأرقام والكلمات كما هو التسمية رمز التالي. بشكل أكثر تحديدًا ، سطر التعليمات البرمجية الذي يبدأ بـ "الرمز:". يمكن استبدال أي سلسلة أو متغير بـ 'k'.

for (i = 0; i < locations.length; i++) 
      { 
      k = i + 1;
      marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),     
      map: map,
      icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + k + '|FF0000|000000'
});

--- تحتوي مجموعة المواقع على خطوط الطول والعرض و k هو رقم الصف الخاص بالعنوان الذي قمت بتعيينه. بمعنى آخر ، إذا كان لديّ 100 عنوان لتعيين تسميات العلامات الخاصة بي فسيكون من 1 إلى 100.


لمن يحاول

... في عام 2019 ، تجدر الإشارة إلى أن بعض الكود المشار إليه هنا لم يعد موجودًا (رسميًا). أوقفت Google دعمها لمشروع "MarkerWithLabel" منذ وقت طويل. تم استضافته في الأصل على Google code هنا ، والآن يتم استضافته بشكل غير رسمي على Github هنا .

ولكن هناك مشروعًا آخر تابعًا لصيانة Google حتى عام 2016 ، يسمى "MapLabel" . هذا النهج مختلف (ويمكن القول إنه أفضل). يمكنك إنشاء كائن تسمية خريطة منفصل بنفس أصل العلامة بدلاً من إضافة خيار mapLabel إلى العلامة نفسها. يمكنك إنشاء علامة مع تسمية بأحرف متعددة باستخدام js-marker-label .





google-maps-api-3