Google 地图 Api v3 - 几个标记悬停 Javascript

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)
        }

我在一个精灵中获得了所有图标。我想用 'unvisitedMarkerHover' 为 'unvisitedMarker' 和用 'visitedMarkerHover' 设置 'visitedMarker' 的悬停效果。如果标记具有 'activeMarker' 图标，则它不应获得悬停效果。

我的问题是 - 我不知道如何为此设置 "if" 要求。

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

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

之后我知道我可以设置图标：

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

因此，如果有人可以帮助我解决 if 要求 - 那就太棒了！

Answer 1

这个没那么简单。由于我没有您的图像的 URL 等详细信息，因此我创建了一个示例应用程序，其中我们至少有 90% 的相似性。 重要提示：请不要使用我使用过的图片，以免造成版权问题。

首先，我创建了 public 个变量：map、markers。 "markers" 是一个空数组。

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. I've used Nearby Search as a Place Search and used San Francisco's coordinate for the location property. The radius is set to 500 (measured in meters). This is essential as a combination of the location property - specifying the center of the circle as a LatLng object. For the types, i restricted it only to stores. To learn more about supported types, please check list of supported types.

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

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

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 地图 Javascript API 标记 然后相应地设置属性及其值。而且，之后创建新的 "marker" 对象，它将被推入标记数组。
您还会注意到我添加了自定义属性：当前状态和状态。这将起到非常重要的作用我们的鼠标事件。
由于回调结果是一个数组，我遍历每个数组并调用了 createMarker() 函数。

这就是有趣的开始，在 createMarker() 中，我还为 Google Maps Javascript API Events 添加了行。这就是我所做的。每当标记上有 mouseover 时，它首先检查鼠标悬停标记的 currentStatus 属性。如果 currentStatus 是一个空字符串 ''，它将再次检查 status 属性。如果状态为 'unvisited'，则当前图标现在将更改为新图标。当检测到 mouseout 时，新图标将变为原来的图标。

同时，当点击标记时，currentStatus 属性将更新为 "activeMarker" 并且然后 "status" 属性也更改为 "visitedMarker" 。您会注意到，如果标记具有 "activeMarker" currentStatus，则鼠标悬停时不会发生任何事情。

要删除 "activeMarker" 当前状态，您必须单击另一个标记。 "activeMarker"现在被转移到这个"another marker"。您还会注意到前一个标记上有一个新的鼠标悬停效果，因为如果标记的状态为 "unvisitedMarker"，我会设置一个新图标。您可以在 markerIcon 对象中找到所有图标 URL。

  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);
  });

完整代码如下：

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);
    }
  }
}

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

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

希望这个应用程序能有所帮助，祝您编码愉快！

Google 地图 Api v3 - 几个标记悬停 Javascript

Google Maps Api v3 - several Marker hovers with Javascript

javascript

arrays

google-maps-api-3

google-maps-markers