كيف أقوم بتغيير مؤشر الماوس عندما أقوم بالفوضى في منطقة معينة في خريطة Google V3؟

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

سؤال

باستخدام Google Maps API V3: كيف يمكنني تغيير مؤشر الماوس عندما أكون في منطقة معينة؟

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

المحلول

نعم ، هذا ممكن عن طريق الإعداد draggableCursor في MapOptions ، كما في المثال التالي:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps v3 Change Cursor Demo</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 500px; height: 350px"></div> 

   <script type="text/javascript"> 
      var map = new google.maps.Map(document.getElementById("map"), { 
                                       mapTypeId: google.maps.MapTypeId.ROADMAP, 
                                       zoom: 8,
                                       center: new google.maps.LatLng(-34.3, 150.6) 
                                    });

      var ne = new google.maps.LatLng(-34.00, 150.00);
      var nw = new google.maps.LatLng(-34.00, 150.50);                              
      var sw = new google.maps.LatLng(-35.00, 150.50);
      var se = new google.maps.LatLng(-35.00, 150.00);

      var boundingBox = new google.maps.Polyline({
         path: [ne, nw, sw, se, ne],
         strokeColor: '#FF0000'
      });

      boundingBox.setMap(map);

      google.maps.event.addListener(map, 'mousemove', function(event) {
         if ((event.latLng.lat() > se.lat()) && (event.latLng.lat() < ne.lat()) &&
             (event.latLng.lng() > ne.lng()) && (event.latLng.lng() < sw.lng())) {
            map.setOptions({ draggableCursor: 'crosshair' });
         }
         else {
            map.setOptions({ draggableCursor: 'url(http://maps.google.com/mapfiles/openhand.cur), move' });
         }
      });
   </script> 
</body> 
</html>

إذا قمت بتشغيل المثال أعلاه ، فسيتغير المؤشر إلى شعر متقاطع بمجرد نقل الماوس داخل المستطيل الأحمر.

Google Maps Change Cursor

نصائح أخرى

الإجابات الأخرى التي تنصح بوضع مستمعين "mousemove" على كائن الخريطة بأكمله ستعمل ولكنهم مخطئون. هذا "ثقيل سليم" وفكرة سيئة لأن مثل هذه المستمعين يمكن أن يضيفوا في تطبيق حقيقي ، وعندما يتم دمجها مع أشياء أخرى تحدث على خريطتك ، يمكن أن تسبب مشاكل في الأداء الخطيرة وربما ظروف السباق غير المتوقعة!

أفضل طريقة للقيام بذلك هي استخدام google.maps.Polygon صف دراسي. يتيح لك ذلك تمرير سلسلة من كائنات Latlng لإنشاء مضلع. يتم تقديم هذا المضلع على الخريطة ويحتوي على سمة Mouseover افتراضية لـ "المؤشر" ، يمكنك إضافة مستمع "ماوس" إلى الكائن الذي يتم إرجاعه من new google.maps.Polygon مكالمة الفصل.

المصدر أدناه من هذا المثالhttp://code.google.com/apis/maps/documentation/javascript/examples/polygon-simple.html

var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
var myOptions = {
  zoom: 5,
  center: myLatLng,
  mapTypeId: google.maps.MapTypeId.TERRAIN
};

var bermudaTriangle;

map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737)
];

bermudaTriangle = new google.maps.Polygon({
  paths: triangleCoords,
  strokeColor: "#FF0000",
  strokeOpacity: 0.8,
  strokeWeight: 3,
  fillColor: "#FF0000",
  fillOpacity: 0.35
});

bermudaTriangle.setMap(map);

ثم يمكنني إضافة المستمع مثل هذا

google.maps.event.addListener(bermudaTriangle, 'mouseover', function() {
    map.setZoom(8);
});
//now if you mouse over the Polygon area, your map will zoom to 8
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top