Question

我想为我在地图上使用的不同标记图标设置不同的悬停。

这是我的标记图标数组

//Marker Icons
    var markerIcon = {
        unvisitedMarker: {
            url: 'img/marker.png',
            size: new google.maps.Size(30, 30),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(15, 15)
        },
        unvisitedMarkerHover: {
            url: 'img/marker.png',
            size: new google.maps.Size(30, 30),
            origin: new google.maps.Point(30, 0),
            anchor: new google.maps.Point(15, 15)
        },
        activeMarker: {
            url: 'img/marker.png',
            size: new google.maps.Size(30, 30),
            origin: new google.maps.Point(60, 0),
            anchor: new google.maps.Point(15, 15)
        },
        visitedMarker: {
            url: 'img/marker.png',
            size: new google.maps.Size(30, 30),
            origin: new google.maps.Point(90, 0),
            anchor: new google.maps.Point(15, 15)
        },
        visitedMarkerHover: {
            url: 'img/marker.png',
            size: new google.maps.Size(30, 30),
            origin: new google.maps.Point(120, 0),
            anchor: new google.maps.Point(15, 15)
        }

我在一个精灵中得到了所有图标。我想为＆＃39; unvisitedMarker＆＃39;设置悬停效果。与＆＃39; unvisitedMarkerHover＆＃39;以及“访问过的MarkMarkerHover＆＃39; visitMarker”。如果标记具有“活跃标记”＆＃39;它不应该有悬停效果。

我的问题是 - 我不知道如何设置＆＃34; if＆＃34;要求。

//marker hover effect
        marker.addListener('mouseover', function() {
            if (???) { ... }
        });

        marker.addListener('mouseout', function() {
            if (???) { ... }
        });

之后我知道我可以用以下方式设置图标：

marker.setIcon(markerIcon['unvisitedMarker']);

所以如果有人可以帮我解决if要求 - 这太棒了！

Answer 1

这个并不那么简单。由于我没有详细信息，例如图片的网址，因此我创建了一个示例应用程序，其中我们至少有90％的相似度。 重要提示：请勿使用我用过的图片来避免版权问题。

首先，我创建了公共变量：地图，标记。 ＆＃34;标记＆＃34; 是一个空数组。

var map; 
var markers = [];

我还创建了自己的 markerIcon 对象版本。

var markerIcon = {
    url : 'http://oi68.tinypic.com/30idv0z.jpg',
    unvisitedMarkerHover: 'http://oi65.tinypic.com/jgo3r8.jpg',
    originlUrl: 'http://oi68.tinypic.com/30idv0z.jpg',
    visitedMarkerHover: 'http://oi65.tinypic.com/ejbn88.jpg',
    status: {
      unvisitedMarker : {
        statusName: 'unvisitedMarker',
      },
      activeMarker : {
        statusName: 'activeMarker',
      },
      visitedMarker : {    
        statusName: 'visitedMarker',
      }
    }
};

我在旧金山使用坐标作为我的地图中心和 Google Maps Javascript API Places Library 。我已将 Nearby Search 用作地方搜索，并使用旧金山的位置属性坐标。半径设置为 500 （以米为单位）。这是位置属性的组合所必需的 - 将圆心指定为LatLng对象。对于类型，我仅限于商店。要详细了解支持的类型，请查看 list of supported types 。

var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
    location: myLatLng,
    radius: '500',
    type: ['store']
}, callback);

在“附近搜索”回调中，它返回一组结果。这就是我所做的：

function createMarker(place, markerId) {
 var placeLoc = place.geometry.location;
 var marker = new google.maps.Marker({
     id: markerId,
     map: map,
     position: placeLoc,
     title: 'Hello World!',
     anchor: new google.maps.Point(15, 15),
     icon: {
       url : markerIcon.url,
     },
     currentStatus: '',
     status: markerIcon.status.unvisitedMarker.statusName,
     size: new google.maps.Size(30,30),
  });
  markers.push(marker);
}  

function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
        createMarker(results[i],i);
    }
  }
}

我创建了一个接受两个参数的createMarker（）函数：放置对象和markerId。
该功能的作用是创建一个新的 Google Maps Javascript API Marker 然后相应地设置属性及其值。而且，之后创建新的＆＃34;标记＆＃34; 对象，它将被推送到标记数组。
您还会注意到我添加了自定义属性： currentStatus和状态。这将起到非常重要的作用我们的鼠标活动。
由于回调结果是一个数组，我遍历每个数组并调用createMarker（）函数。

这是有趣的开始，在createMarker（）中，我还添加了 Google Maps Javascript API Events 的行。这就是我在我身上所做的。只要标记上有鼠标悬停，它就会首先检查鼠标悬停标记的 currentStatus 属性。如果currentStatus为空字符串＆＃39; ，则会再次检查状态属性。如果状态为＆＃39; unvisited＆＃39; ，则当前图标现在将更改为新图标。检测到 mouseout 后，新图标将更改为原始图标。

同时，点击标记时， currentStatus 属性将更新为＆＃34; activeMarker＆＃34; ，然后＆＃34;状态＆＃34; 属性也更改为＆＃34; visitedMarker＆＃34; 。您会注意到，如果标记具有＆＃34; activeMarker＆＃34; currentStatus，则鼠标悬停时不会发生任何事情。

要删除＆＃34; activeMarker＆＃34; currentStatus，您必须点击另一个标记。＆＃34; activeMarker＆＃34;现在转移到这个＆＃34;另一个标记＆＃34;。您还会注意到上一个标记有一个新的鼠标悬停效果，因为如果标记的状态是＆＃34; unvisitedMarker＆＃34;我已经设置了一个新图标。您可以在 markerIcon 对象中找到所有图标网址。

  google.maps.event.addListener(marker, 'mouseover', function() {
     if ( this.currentStatus !== markerIcon.status.activeMarker.statusName ) {
       if ( this.status === markerIcon.status.unvisitedMarker.statusName ) {
         this.setIcon(markerIcon.unvisitedMarkerHover);      
       } else {
         this.setIcon(markerIcon.visitedMarkerHover);            
       }
      this.setPosition(this.position);  
      console.log(this.currentStatus, this.status, this.id);      
     }
  });
  google.maps.event.addListener(marker, 'mouseout', function() {
      this.setIcon(markerIcon.originlUrl);      
  });
  google.maps.event.addListener(marker, 'click', function() {
     for ( var i = 0; i < markers.length; i++ ) {
       markers[i].currentStatus = '';
     }     
     this.currentStatus = markerIcon.status.activeMarker.statusName;
     this.status = markerIcon.status.visitedMarker.statusName;
     console.log(this.currentStatus, this.status);
  });

以下整个代码：

＆＃13;

var map; 
var markers = [];
var markerIcon = {
    url : 'http://oi68.tinypic.com/30idv0z.jpg',
    unvisitedMarkerHover: 'http://oi65.tinypic.com/jgo3r8.jpg',
    originlUrl: 'http://oi68.tinypic.com/30idv0z.jpg',
    visitedMarkerHover: 'http://oi65.tinypic.com/ejbn88.jpg',
    status: {
      unvisitedMarker : {
        //origin: new google.maps.Point(0, 0),
        statusName: 'unvisitedMarker',
      },
      activeMarker : {
        //origin: new google.maps.Point(60, 0),
        statusName: 'activeMarker',
      },
      visitedMarker : {    
        //origin: new google.maps.Point(90, 0),
        statusName: 'visitedMarker',
      },
    }
}; 
  

function initMap() {
  
  var myLatLng = {lat: 37.773972, lng: -122.431297};
  
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: myLatLng
  });
  
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: myLatLng,
    radius: '500',
    type: ['store']
  }, callback);
  
}

function createMarker(place, markerId) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
        id: markerId,
        map: map,
        position: placeLoc,
        title: 'Hello World!',
        anchor: new google.maps.Point(15, 15),
        icon: {
          url : markerIcon.url,
        },
        currentStatus: '',
        status: markerIcon.status.unvisitedMarker.statusName,
        size: new google.maps.Size(30,30),
  });
  
  markers.push(marker);

  google.maps.event.addListener(marker, 'mouseover', function() {
     if ( this.currentStatus !== markerIcon.status.activeMarker.statusName ) {
       if ( this.status === markerIcon.status.unvisitedMarker.statusName ) {
         this.setIcon(markerIcon.unvisitedMarkerHover);      
       } else {
         this.setIcon(markerIcon.visitedMarkerHover);            
       }
      this.setPosition(this.position);  
      //console.log(this.currentStatus, this.status, this.id);      
     }
  });
  google.maps.event.addListener(marker, 'mouseout', function() {
      this.setIcon(markerIcon.originlUrl);      
  });
  google.maps.event.addListener(marker, 'click', function() {
     for ( var i = 0; i < markers.length; i++ ) {
       markers[i].currentStatus = '';
     }     
     this.currentStatus = markerIcon.status.activeMarker.statusName;
     this.status = markerIcon.status.visitedMarker.statusName;
  });
}   

function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
        createMarker(results[i],i);
    }
  }
}

＆＃13;

/* 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;
      }

＆＃13;

<div id="map"></div>
        <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&callback=initMap"
    async defer></script>

＆＃13;

希望这个应用程序可以帮助和快乐编码！

谷歌地图Api v3 - 几个标记用Javascript徘徊

1 个答案: