这个没那么简单。由于我没有您的图像的 URL 等详细信息，因此我创建了一个示例应用程序，其中我们至少有 90% 的相似性。 重要提示：请不要使用我用过的图片，以避免版权问题。
首先，我创建了公共变量：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。我已将 Nearby Search 用作 地点搜索，并将旧金山的坐标用于 location 属性。半径设置为 500（以米为单位）。作为 location 属性的组合，这是必不可少的 - 将圆心指定为 LatLng 对象。对于这些类型，我仅将其限制为 stores。要了解有关支持类型的更多信息，请查看 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
然后相应地设置属性及其值。而且，之后
创建新的 "marker" 对象，它将被推送到
标记数组。
- 您还会注意到我添加了自定义属性：
当前状态和状态。这将起到非常重要的作用
我们的鼠标事件。
- 由于回调结果是一个数组，所以我遍历每个数组
并调用 createMarker() 函数。
这就是有趣的开始，在 createMarker() 中，我还为 Google Maps Javascript API Events 添加了行。这就是我最后所做的。每当标记上有 mouseover 时，它首先检查鼠标悬停标记的 currentStatus 属性。如果 currentStatus 是一个空字符串 ''，它将再次检查 status 属性。如果状态为'unvisited'，则当前图标现在将变为新图标。当检测到 mouseout 时，新图标将变为原来的图标。
同时，当单击标记时，currentStatus 属性将更新为 "activeMarker"，然后 "status" 属性为也改为 "visitedMarker"。您会注意到，如果标记具有 "activeMarker" currentStatus，则当鼠标悬停时不会发生任何事情。
要删除 "activeMarker" currentStatus，您必须单击另一个标记。 “activeMarker”现在被转移到这个“另一个标记”。您还会注意到前一个标记上有一个新的鼠标悬停效果，因为如果标记的状态为“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>
希望这个应用程序可以帮助并快乐编码！