javascript - يتكلم - موقعي




تحسين علامات SVG في خرائط Google (2)

هل هناك طرق جيدة لتحسين طريقة رسم خرائط Google Maps API 3 إلى مستند HTML عند استخدام رموز SVG للرموز؟ في ما يلي مثال على علامة تستخدم رموز SVG:

  var star = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow'
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: star,
    map: map,
    optimized: true //Does not seem to do anything..
  });

تمتلك Google هذه الخاصية المسماة "محسّنة" والتي يمكن تعيينها على علامات ، وعند استخدام رموز PNG على سبيل المثال بدلاً من رسومات SVG ، يعمل ذلك جيدًا: تنشئ Google لوحة فنية واحدة لكل لوحة بدلاً من img لكل رمز ، والذي من الواضح أنه يتوسع بشكل أفضل .

ومع ذلك ، يبدو أن الخاصية "المحسّنة" لا تفعل أي شيء عند استخدام علامات SVG: دائمًا ما يتم رسمها في لوحة واحدة لكل علامة. عندما يكون لدي العديد من العلامات ، تبدأ متصفحات معينة في الحصول على مشكلات في الأداء. يعالج Chrome عادة الأمر بشكل جيد ، ولكن IE9 على سبيل المثال ، لا يتعامل مع العديد من العلامات قبل عرض مشكلات الأداء المهمة. التجميع ليس خيارًا في هذه الحالة.

هل يعرف أي شخص أي طرق جيدة لتحسين هذا ، بحيث يمكن للمتصفحات التعامل مع المزيد من علامات SVG في نفس الوقت؟


ما مدى تعقيد رموز SVG التي تقوم بتوليدها؟ نظرًا لأنه يمكنك أيضًا رسم الرمز على كائن لوحة toDataURL بنفسك واستخدام طريقة toDataURL لإنشاء بيانات uri لاستخدامها في خرائط Google. هذا بالفعل إنشاء صورة نقطية بحيث قد يعمل في IE9 (على الأقل يتم اعتماد الأسلوب).

يمكنك أيضًا رسم SVG على لوحة فنية ولكن هناك بعض التحذيرات إذا كنت تريد تغييرها برمجيًا. وربما لن يتعاون IE9 لذلك لست متأكداً إذا كان هذا هو الطريق.


هناك هنا svg التصحيح ل ie ، ويجب عليك استخدام مثل

<!--[if IE 9]>
   <script src="svg.js"></script>
<![endif]-->






svg