كيف يمكنني تغيير لون علامة خرائط Google؟

StackOverflow https://stackoverflow.com/questions/2472957

  •  20-09-2019
  •  | 
  •  

سؤال

أنا أستخدم واجهة برمجة تطبيقات خرائط Google لإنشاء خريطة مليئة بالعلامات ، لكنني أريد أن تبرز علامة واحدة من الآخرين. أعتقد أن أبسط شيء يجب القيام به هو تغيير لون العلامة إلى اللون الأزرق ، بدلاً من اللون الأحمر. هل هذا شيء بسيط يجب القيام به أم لا بد لي من إنشاء أيقونة جديدة بالكامل بطريقة ما؟ إذا كان عليّ إنشاء أيقونة جديدة ، فما هي أسهل طريقة للقيام بذلك؟

هل كانت مفيدة؟

المحلول

نظرًا لأن الخرائط V2 تم إهمالها ، فمن المحتمل أن تكون مهتمًا بخرائط V3: https://developers.google.com/maps/documentation/javascript/markers#simple_icons

لخرائط V2:

http://code.google.com/apis/maps/documentation/overlays.html#icons_overview

سيكون لديك مجموعة واحدة من المنطق تفعل كل المسامير "العادية" ، والآخر يقوم بالثوب "الخاص" باستخدام العلامة الجديدة المحددة.

نصائح أخرى

مع الإصدار 3 من Google Maps API ، قد تكون أسهل طريقة للقيام بذلك عن طريق الاستيلاء على مجموعة أيقونة مخصصة ، مثل تلك التي أنشأها بنيامين كين هنا:

http://www.benjaminkeen.com/؟p=105

إذا وضعت كل هذه الرموز في نفس مكان صفحة الخريطة الخاصة بك ، فيمكنك تلوين علامة ببساطة باستخدام خيار الرمز المناسب عند إنشائها:

var beachMarker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: 'brown_markerA.png'
});

هذا سهلة للغاية ، وهو النهج الذي أستخدمه للمشروع الذي أعمل عليه حاليًا.

MapiConmaker: مكتبة لـ Google Maps V2

طريقة واحدة هي استخدام MapiConmaker. هناك مثال هنا. الرموز الافتراضية لـ Google Maps هي عرض 20 بكسل وارتفاع 34 بكسل ، لذلك يمكنك استخدام شيء مثل هذا لمحاكاة:

var newIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"});
var marker = new GMarker(map.getCenter(), {icon: newIcon});

يمكنك حتى لفه في بعض الوظائف لجعل الأمور أسهل على نفسك:

function getIcon(color) {
    return MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: color, cornercolor:color});
}

هذا ما أستخدمه شخصيًا لجميع العلامات التي أقوم بإنشائها. أفضل أن يكون لدي خيار لتغيير ألوان نزوة.

تحديث: لون السداسي للأيقونة الافتراضية هو "#Fe7569". أيضًا ، يمكنك تحديد علامة على علامة بدلاً من إنشاء علامة جديدة مع أيقونة جديدة. لذلك إذا كنت تريد تسليط الضوء على وظيفة ، فيمكنك الذهاب مع شيء مثل هذا ، باستخدام الوظيفة أعلاه:

function highlightMarker(marker, highlight) {
    var color = "#FE7569";
    if (highlight) {
        color = "#0000FF";
    }
    marker.setImage(getIcon(color).image);
}

StyledMarker: مكتبة لـ Google Maps V3

منذ أن تم استبدال V2 بـ V3 منذ وقت ما اعتقدت أنه يجب عليّ تحديث هذه الإجابة. لقد قمت بإنشاء مكتبة لعلامات مخصصة يمكن العثور عليها على مكتبة V3 Utility هنا. يسمح بألوان وأشكال مختلفة ، ويمكنك وضع النص على العلامة أيضًا. إنه يعمل باستخدام Google Charts API الذي يحتوي على طرق لإنشاء علامات نوع خرائط Google. لا تتردد في إلقاء نظرة على الكود المصدري إذا كنت تفضل استخدام واجهة برمجة تطبيقات Google Charts مباشرة.

ومع ذلك ، فإن الشيء في تلك المكتبة هو أنه يعتني بتحديد المناطق القابلة للنقر من صور العلامات هذه لك ، على سبيل المثال ، فإن الفقاعة الطويلة مع النص ستحصل على مناطق قابلة للنقر التي يتوقعها المرء ، مثل هذا المثال.

enter image description here enter image description hereتصميم المواد

تم تحريره مارس 2019 الآن مع لون دبوس برمجي ،

JavaScript الخالص ، لا صور ، يدعم الملصقات

لم يعد يعتمد على واجهة برمجة تطبيقات المخططات المنهكة

    var pinColor = "#FFFFFF";
    var pinLabel = "A";

    // Pick your pin (hole or no hole)
    var pinSVGHole = "M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z";
    var labelOriginHole = new google.maps.Point(12,15);
    var pinSVGFilled = "M 12,2 C 8.1340068,2 5,5.1340068 5,9 c 0,5.25 7,13 7,13 0,0 7,-7.75 7,-13 0,-3.8659932 -3.134007,-7 -7,-7 z";
    var labelOriginFilled =  new google.maps.Point(12,9);


    var markerImage = {  // https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel
        path: pinSVGFilled,
        anchor: new google.maps.Point(12,17),
        fillOpacity: 1,
        fillColor: pinColor,
        strokeWeight: 2,
        strokeColor: "white",
        scale: 2,
        labelOrigin: labelOriginFilled
    };
    var label = {
        text: pinLabel,
        color: "white",
        fontSize: "12px",
    }; // https://developers.google.com/maps/documentation/javascript/reference/marker#Symbol
    this.marker        = new google.maps.Marker({
        map: map.MapObject,
        //OPTIONAL: label: label,
        position: this.geographicCoordinates,
        icon: markerImage,
        //OPTIONAL: animation: google.maps.Animation.DROP,
    });

أنا شخصياً أعتقد أن الرموز التي تم إنشاؤها بواسطة واجهة برمجة تطبيقات Google Charts تبدو رائعة ويسهل تخصيصها ديناميكيًا.

انظر إجابتي على خرائط Google API 3 - لون العلامة المخصصة لعلامة العلامة الافتراضية (DOT)

أبسط طريقة وجدتها هي استخدام bitmapdescriptorfactory.defaultmarker () توثيق حتى لديه مثال على ضبط اللون. من الكود الخاص بي:

MarkerOptions marker = new MarkerOptions()
            .title(formatInfo(data))
            .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
            .position(new LatLng(data.getLatitude(), data.getLongitude()))

لتخصيص العلامات ، يمكنك القيام بذلك من هذه الأداة عبر الإنترنت: https://materialdesignicons.com/

في حالتك ، تريد علامة خريطة الذي يتوفر هنا: https://materialdesignicons.com/icon/map-marker والتي يمكنك تخصيصها عبر الإنترنت.

إذا كنت ترغب ببساطة في تغيير اللون الأحمر الافتراضي إلى اللون الأزرق ، فيمكنك تحميل هذا الرمز: http://maps.google.com/mapfiles/ms/icons/blue-dot.png

تم ذكره في هذا الموضوع: https://stackoverflow.com/a/32651327/6381715

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top