javascript Google Maps API v3 Active Marker onClick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12727840/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps API v3 Active Marker onClick
提问by Zach
I have an addListenerclick method for markers on a Google Map (in the setMarkersfunction):
我有一个addListener用于 Google 地图上标记的点击方法（在setMarkers函数中）：
var infowindow = null;
$(document).ready(function () { initialize(); });
function initialize() {
var centerMap = new google.maps.LatLng(39.828175, -98.5795);
var myOptions = {
zoom: 4,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
}
var sites = [
['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.'],
['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
];
function setMarkers(map, markers) {
var myContentDiv = document.getElementById('myDivID');//Reference to you DOM elem
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[0],
zIndex: sites[3],
html: sites[4]
});
var contentString = "Some content";
//marker.xtraData = 'SomeExtraData';//You can even add more data this way
google.maps.event.addListener(marker, "click", function () {
//alert(this.html);
var myTemplate = '<h1>'+this.title+'<h1><p>'+this.html+'</p>';
myContentDiv.innerHTML = myTemplate;//Inset this html inside link
//infowindow.setContent(this.html);
//infowindow.open(map, this);
});
}
}
What I'm looking to do is change the "active" marker to a different image. I did see google.maps.MarkerImageclass but when all of my attempts so far have replaced "a" marker (not the one I selected) with the URL, but then the marker doesn't convert back to normal on the next click (or close of the info box). I feel like I'm pretty close, but am pretty stuck in the mud at the moment. Any help would be greatly appreciated. Thanks!
我要做的是将“活动”标记更改为不同的图像。我确实看到了google.maps.MarkerImage类，但是当我到目前为止的所有尝试都用 URL 替换了“a”标记（不是我选择的那个）时，但是标记在下次单击时不会转换回正常状态（或关闭信息框）。我觉得我很接近，但此刻我很困。任何帮助将不胜感激。谢谢！
回答by geocodezip
Here is my example (ported from Mike Williams' v2 tutorial):
这是我的示例（移植自Mike Williams 的 v2 教程）：
http://www.geocodezip.com/v3_MW_example_hoverchange.html
http://www.geocodezip.com/v3_MW_example_hoverchange.html
One way to do it (jsfiddle from your last question, updated): http://jsfiddle.net/geocodezip/r7fu3a1y/1/
一种方法（来自您上一个问题的 jsfiddle，已更新）：http: //jsfiddle.net/geocodezip/r7fu3a1y/1/
working code snippet:
工作代码片段：
var infowindow = null;
var gmarkers = [];
var defaultIcon = {
url: 'http://maps.google.com/mapfiles/ms/micons/red-dot.png',
// This marker is 32 pixels wide by 32 pixels tall.
size: new google.maps.Size(32, 32),
// The origin for this image is 0,0.
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(16, 32)
};
var activeIcon = {
url: 'http://maps.google.com/mapfiles/ms/micons/yellow-dot.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(32, 32),
// The origin for this image is 0,0.
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(16, 32)
};
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
type: 'poly'
};
$(document).ready(function() {
initialize();
});
function initialize() {
var centerMap = new google.maps.LatLng(39.828175, -98.5795);
var myOptions = {
zoom: 4,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
}
var sites = [
['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.'],
['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
];
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[0],
icon: defaultIcon,
zIndex: sites[3],
html: sites[4]
});
var contentString = "Some content";
google.maps.event.addListener(marker, "click", function() {
//alert(this.html);
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setIcon(defaultIcon);
}
this.setIcon(activeIcon);
infowindow.setContent(this.html);
infowindow.open(map, this);
});
gmarkers.push(marker);
}
}#map_canvas {
width: 600px;
height: 600px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<h1>Map</h1>
<div id="map_canvas"></div>