Question

我正在尝试根据给定前方位置的条件指定标记图标。例如，当我想要展示有房子或有服务站的服务站的房子时。
我想在鼠标焦点上显示一个信息框，而不是单击
我想点击标记图标并重定向到另一个页面

Answer 1

function renderMarker() {

  var markerColors = ['green', 'red'];

  for(var i = 0; i < markerColors.length; i++) {

    var markerIcon = null;
    // I am trying to assign a marker icon depending on a condition 
    if(markerColors[i] == 'green') {
        markerIcon   = L.icon({
                iconUrl: 'leaf-green.png',
                //shadowUrl: 'leaf-shadow.png',
                iconSize:     [38, 95], // size of the icon
                shadowSize:   [50, 64], // size of the shadow
                iconAnchor:   [22, 94], // point of the icon which will 
                 correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor:  [-3, -76] // point from which the popup should 
                 open relative to the iconAnchor
            });

     } else if(markerColors[i] == 'red') {
            markerIcon   = L.icon({
                iconUrl: 'leaf-green.png',
                //shadowUrl: 'leaf-shadow.png',
                iconSize:     [38, 95], // size of the icon
                shadowSize:   [50, 64], // size of the shadow
                iconAnchor:   [22, 94], // point of the icon which will 
                   correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor:  [-3, -76] // point from which the popup should 
                 open relative to the iconAnchor
            });
    }


    var marker = L.marker([51.5, -0.09], {icon: markerIcon}).addTo(map);

  // bind popup
  marker.bindPopup('Stack Overflow');
   //I want to click the marker icon and redirect to another page
   // on click redirect on another link
    marker.on('click' , function(){
      window.location.href = "https://stackoverflow.com/";
    });
   //I want to display an info box on mouse focus instead of click
  // open popup on mouseover 
  marker.on('mouseover' , function(){
    this.openPopup();
  });
  // close popup on mouseout
  marker.on('mouseout' , function(){
    this.closePopup();
   });

  }
 }

您可以根据需要重构代码。希望它能帮到你！

Answer 2

对于那些可能想在codeigniter中解决问题的人来说，这就是我改变控制器中代码的方式：

       public function index(){
         $this->load->library('leaflet');

        $config = array(
         'center'         => '-19.05520, 29.60355', // Center of the map
         'zoom'           => 6, // Map zoom
         ); 

     $this->leaflet->initialize($config);
     $places = $this->home->get_provinces();
     foreach($places as $place) {
         $marker = array();
         $marker['latlng']  = $place->lat. ',' .$place->long;  // Marker Location
      $icon = $place->condition;
     if ($icon == 'red') {
    $marker['iconRetinaUrl'] = "";
    $marker['iconUrl'] = base_url()."/assets/home/icons/icons8-Sun-64.png";
    $marker['iconSize'] = "[30, 30]";
    $marker['iconAnchor'] = "[22, 40]";
    $marker['popupAnchor'] = "[-3, -76]";
    $marker['shadowUrl'] = "";
    $marker['shadowRetinaUrl'] = "";
    $marker['shadowSize'] = "[50, 64]";
    $marker['shadowAnchor'] = "[4, 62]";
    $marker['className'] = "icon-marker";
}
elseif($icon == 'white') {
                         $marker['iconRetinaUrl'] = "";
                         $marker['iconUrl'] = base_url()."/assets/home/icons/Partly Cloudy.png";
                        $marker['iconSize'] = "[30, 30]";
                         $marker['iconAnchor'] = "[22, 40]";
                         $marker['popupAnchor'] = "[-3, -76]";
                         $marker['shadowUrl'] = "";
                         $marker['shadowRetinaUrl'] = "";
                         $marker['shadowSize'] = "[50, 64]";
                         $marker['shadowAnchor'] = "[4, 62]";
                         $marker['className'] = "icon-marker";



            }elseif($icon == 'green') {
                         $marker['iconRetinaUrl'] = "";
                         $marker['iconUrl'] = base_url()."/assets/home/icons/default.png";
                        $marker['iconSize'] = "[30, 30]";
                         $marker['iconAnchor'] = "[22, 40]";
                         $marker['popupAnchor'] = "[-3, -76]";
                         $marker['shadowUrl'] = "";
                         $marker['shadowRetinaUrl'] = "";
                         $marker['shadowSize'] = "[50, 64]";
                         $marker['shadowAnchor'] = "[4, 62]";
                         $marker['className'] = "icon-marker";

                    }


                $marker['title'] = $place->name;
               $this->leaflet->add_marker($marker);

               }
                $data['map'] =  $this->leaflet->create_map();
                $data['title'] = 'Home';
                $data['content_view'] = 'Home/index';
                 $this->template->home_template($data);
             }

如何使用codeigniter中的传单映射动态更改标记图标，在悬停时显示信息并重定向到另一个？

2 个答案: