google-maps-api-3 - google map marker icons




Google Maps API 3-لون محدد للعلامة الافتراضية(نقطة) (10)

في Internet Explorer ، لا يعمل هذا الحل في ssl.

يمكن للمرء أن يرى الخطأ في وحدة التحكم على النحو التالي:

SEC7111 : اختراق أمان HTTPS بهذا ،

الحل : نظرًا لأن أحد المستخدمين هنا اقترح استبدال chart.apis.google.com بـ chart.googleapis.com لمسار عنوان URL لتجنب حدوث خطأ في طبقة المقابس الآمنة.

لقد رأيت الكثير من الأسئلة الأخرى المشابهة لهذا ( here ، here here ) ، لكنهم جميعهم قبلوا إجابات لا تحل مشكلتي. أفضل حل وجدته لهذه المشكلة هو مكتبة StyledMarker ، التي تسمح لك بتحديد ألوان مخصصة للعلامات ، ولكن لا يمكنني الحصول عليها لاستخدام العلامة الافتراضية (التي تحصل عليها عند إجراء بحث في خرائط google) - مع نقطة في المنتصف) ، يبدو فقط أن توفر علامات بحرف في أو مع أيقونة خاصة.

أحاول طريقتين لإنشاء علامة جوجل خريطة مخصصة ، وهذا رمز التشغيل المستخدمة canvg.js هو أفضل توافق للشفرة browser.the التعليق-خارج لا يدعم IE11 حاليا. 

var marker;
var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 31.89, 5.9, 26.26, 1.4, 15.74, 2.1, 11.3, 4, 7.4, 7.1, 4.2, 11, 2.1, 16, 1.14];

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: 59.325,
      lng: 18.070
    }
  });
  var markerOption = {
    latitude: 59.327,
    longitude: 18.067,
    color: "#" + "000",
    text: "ha"
  };
  marker = createMarker(markerOption);
  marker.setMap(map);
  marker.addListener('click', changeColorAndText);
};

function changeColorAndText() {
  var iconTmpObj = createSvgIcon( "#c00", "ok" );
  marker.setOptions( {
                icon: iconTmpObj
            } );
};

function createMarker(options) {
  //IE MarkerShape has problem
  var markerObj = new google.maps.Marker({
    icon: createSvgIcon(options.color, options.text),
    position: {
      lat: parseFloat(options.latitude),
      lng: parseFloat(options.longitude)
    },
    draggable: false,
    visible: true,
    zIndex: 10,
    shape: {
      coords: CustomShapeCoords,
      type: 'poly'
    }
  });

  return markerObj;
};

function createSvgIcon(color, text) {
  var div = $("<div></div>");

  var svg = $(
    '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">' +
    '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>' +
    '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>' +
    '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>' +
    '</svg>'
  );
  div.append(svg);

  var dd = $("<canvas height='50px' width='50px'></cancas>");

  var svgHtml = div[0].innerHTML;

  //todo yao gai bu dui
  canvg(dd[0], svgHtml);

  var imgSrc = dd[0].toDataURL("image/png");
  //"scaledSize" and "optimized: false" together seems did the tricky ---IE11  &&  viewBox influent IE scaledSize
  //var svg = '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">'
  //    + '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>'
  //    + '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>'
  //    + '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>'
  //    + '</svg>';
  //var imgSrc = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);

  var iconObj = {
    size: new google.maps.Size(32, 43),
    url: imgSrc,
    scaledSize: new google.maps.Size(32, 43)
  };

  return iconObj;
};
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Your Custom Marker </title>
  <style>
    /* 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;
    }
  </style>
</head>

<body>
  <div id="map"></div>
    <script src="https://canvg.github.io/canvg/canvg.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>

</html>

ادمج علامة symbol-based يوجه مسارها المخطط ، مع حرف "●" للمركز. يمكنك استبدال النقطة بنص آخر ('A' ، 'B' ، وما إلى ذلك) حسب الرغبة.

تقوم هذه الدالة بإرجاع خيارات العلامة باستخدام النص المحدد (إن وجد) ولون النص ولون التعبئة. ويستخدم لون النص للمخطط. 

function createSymbolMarkerOptions(text, textColor, fillColor) {
    return {
        icon: {
            path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
            fillColor: fillColor,
            fillOpacity: 1,
            strokeColor: textColor,
            strokeWeight: 1.8,
            labelOrigin: { x: 0, y: -30 }
        },
        label: {
            text: text || '●',
            color: textColor
        }
    };
}

باستخدام التطبيق السريع و Google Maps Api v3 ، كانت هذه أسهل طريقة تمكنت من القيام بها: 

icon = GMSMarker.markerImageWithColor(UIColor.blackColor())

آمل أن يساعد شخص ما.

حسناً ، الشيء الأقرب الذي تمكنت من الحصول عليه مع StyledMarker هو this .

الرصاصة في المنتصف ليست كبيرة كالفارق بينها. ينشئ تصنيف StyledMarker ببساطة عنوان url هذا ويطلب من google api إنشاء العلامة .

من مثال استخدام الفئة استخدم "٪ E2٪ 80٪ A2" كنص ، كما في: 

var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{text:"%E2%80%A2"},styleIconClass),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});

سوف تحتاج إلى modifiy StyledMarker.js للتعليق على الخطوط: 

  if (text_) {
    text_ = text_.substr(0,2);
  }

لأن هذا سيؤدي إلى قص السلسلة النصية إلى حرفين.

بدلاً من ذلك ، يمكنك إنشاء صور علامة مخصصة استنادًا إلى الصورة الافتراضية التي تحتوي على الألوان التي تريدها وتجاوز العلامة الافتراضية التي تتضمن رمزًا كالتالي: 

marker = new google.maps.Marker({
  map:map,
  position: latlng,
  icon: new google.maps.MarkerImage(
    'http://www.gettyicons.com/free-icons/108/gis-gps/png/24/needle_left_yellow_2_24.png',
    new google.maps.Size(24, 24),
    new google.maps.Point(0, 0),
    new google.maps.Point(0, 24)
  )
});

في ما يلي حل رائع باستخدام واجهة برمجة تطبيقات خرائط Google Gooogle نفسها. لا توجد خدمة خارجية ، ولا توجد مكتبة إضافية. وتمكن أشكال مخصصة وألوان وأنماط متعددة. يستخدم الحل العلامات الاتجاهية ، والتي تعمل googlemaps api calls Symbols .

إلى جانب عدد قليل من الرموز المحددة مسبقا محدودة ، يمكنك صياغة أي شكل من أي لون عن طريق تحديد سلسلة مسار SVG ( Spec ).

لاستخدامه ، بدلاً من تعيين خيار علامة "الرمز" على عنوان URL للصورة ، يمكنك تعيينه على قاموس يحتوي على خيارات الرموز. على سبيل المثال ، تمكنت من صياغة رمز واحد يشبه إلى حد بعيد العلامة القياسية: 

function pinSymbol(color) {
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1,
   };
}

var marker = new google.maps.Marker({
   map: map,
   position: new google.maps.LatLng(latitude, longitude),
   icon: pinSymbol("#FFF"),
});

أنا حريص على إبقاء نقطة الشكل الرئيسية عند 0،0 لتجنب الاضطرار إلى تحديد معلمات توسيط رمز علامة. مثال مسار آخر ، العلامة نفسها بدون النقطة: 

    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',

وهنا لديك علم بسيط جدا وبسيط القوام: 

    path: 'M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z',

يمكنك أيضًا إنشاء المسارات باستخدام أداة مرئية مثل Inkscape (GNU-GPL ، multiplatform). بعض التلميحات المفيدة:

  • يقبل Google API مسارًا واحدًا فقط ، لذا يجب عليك تحويل أي كائن آخر (مربع ، cercle ...) إلى مسار والانضمام إليه كواحد. كلا الأمرين في القائمة المسار.
  • لتحريك المسار إلى (0،0) ، انتقل إلى وضع تحرير المسار (F2) وحدد جميع نقاط التحكم واسحبها. لا يؤدي تحريك الكائن باستخدام F1 إلى تغيير كوريد عقدة المسار.
  • للتأكد من أن النقطة المرجعية في (0،0) ، يمكنك تحديدها بمفردها وتحرير الأكواد باليد على شريط الأدوات العلوي.
  • بعد حفظ ملف SVG ، وهو XML ، افتحه باستخدام محرر ، وابحث عن svg: عنصر المسار وانسخ محتوى السمة 'd'.

مرحبًا ، يمكنك استخدام الرمز بتنسيق SVG وتعيين الألوان. انظر هذا الرمز 

/*
 * declare map and places as a global variable
 */
var map;
var places = [
    ['Place 1', "<h1>Title 1</h1>", -0.690542, -76.174856,"red"],
    ['Place 2', "<h1>Title 2</h1>", -5.028249, -57.659052,"blue"],
    ['Place 3', "<h1>Title 3</h1>", -0.028249, -77.757507,"green"],
    ['Place 4', "<h1>Title 4</h1>", -0.800101286, -76.78747820,"orange"],
    ['Place 5', "<h1>Title 5</h1>", -0.950198, -78.959302,"#FF33AA"]
];
/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

    /*
     * create map
     */
    var map = new google.maps.Map(document.getElementById("map_div"), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    });

    /*
     * create infowindow (which will be used by markers)
     */
    var infoWindow = new google.maps.InfoWindow();
    /*
     * create bounds (which will be used auto zoom map)
     */
    var bounds = new google.maps.LatLngBounds();

    /*
     * marker creater function (acts as a closure for html parameter)
     */
    function createMarker(options, html) {
        var marker = new google.maps.Marker(options);
        bounds.extend(options.position);
        if (html) {
            google.maps.event.addListener(marker, "click", function () {
                infoWindow.setContent(html);
                infoWindow.open(options.map, this);
                map.setZoom(map.getZoom() + 1)
                map.setCenter(marker.getPosition());
            });
        }
        return marker;
    }

    /*
     * add markers to map
     */
    for (var i = 0; i < places.length; i++) {
        var point = places[i];
        createMarker({
            position: new google.maps.LatLng(point[2], point[3]),
            map: map,
            icon: {
                path: "M27.648 -41.399q0 -3.816 -2.7 -6.516t-6.516 -2.7 -6.516 2.7 -2.7 6.516 2.7 6.516 6.516 2.7 6.516 -2.7 2.7 -6.516zm9.216 0q0 3.924 -1.188 6.444l-13.104 27.864q-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.684 -1.674 -1.872l-13.14 -27.864q-1.188 -2.52 -1.188 -6.444 0 -7.632 5.4 -13.032t13.032 -5.4 13.032 5.4 5.4 13.032z",
                scale: 0.6,
                strokeWeight: 0.2,
                strokeColor: 'black',
                strokeOpacity: 1,
                fillColor: point[4],
                fillOpacity: 0.85,
            },
        }, point[1]);
    };
    map.fitBounds(bounds);
});
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_div" style="height: 400px;"></div>

منذ الإصدار 3.11 من واجهة برمجة تطبيقات خرائط google ، يستبدل كائن Icon MarkerImage . يدعم الرمز نفس المعلمات مثل MarkerImage. حتى أنني وجدت أنها أكثر مباشرة إلى الأمام.

مثال يمكن أن يبدو مثل هذا: 

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

لمزيد من المعلومات تحقق من هذا الموقع

يمكنك استخدام هذا الرمز أنه يعمل بشكل جيد. 

 var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");<br>

 var marker = new google.maps.Marker({
            position: yourlatlong,
            icon: pinImage,
            map: map
        });

يمكنك طلب صور الرموز ديناميكيًا من واجهة برمجة تطبيقات Google باستخدام عناوين url: 

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569

الذي يشبه هذا: الصورة 21 × 34 بكسل ويكون طرف الدبوس في الموضع (10 ، 34)

وستحتاج أيضًا إلى صورة ظل منفصلة (بحيث لا تتداخل مع الرموز المجاورة): 

http://chart.apis.google.com/chart?chst=d_map_pin_shadow

الذي يشبه هذا: الصورة 40 × 37 بكسل ويكون طرف الدبوس في الموضع (12 ، 35)

عند إنشاء MarkerImage s ، تحتاج إلى ضبط الحجم ونقاط الربط وفقًا لذلك: 

    var pinColor = "FE7569";
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));
    var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
        new google.maps.Size(40, 37),
        new google.maps.Point(0, 0),
        new google.maps.Point(12, 35));

يمكنك بعد ذلك إضافة العلامة إلى خريطتك من خلال: 

        var marker = new google.maps.Marker({
                position: new google.maps.LatLng(0,0), 
                map: map,
                icon: pinImage,
                shadow: pinShadow
            });

ما عليك سوى استبدال "FE7569" برمز الألوان الذي تريده. على سبيل المثال:

الائتمان بسبب جاك ب Nimble للإلهام ؛)






google   google-maps-api-3  


google-maps-api-3