Google地图API v3主动标记onClick [英] Google Maps API v3 Active Marker onClick
问题描述
我为Google Map上的标记（在 setMarkers 函数中）使用 addListener 点击方法：
var infowindow = null;
$（document）.ready（function（）{initialize（）;}）;
函数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（地图，网站）;
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，'这是埃文斯山。']，
['Irving Homestead'，40.315939，-105.440630，2，'这是欧文家园'。]，
['Badlands National Park'，43.785890，-101.90175，1，'这是恶地国家公园']，
['春天的熨斗'，39.99948，-105.28370，3，'这些是春天的熨斗。']
];
函数setMarkers（地图，标记）{
var myContentDiv = document.getElementById（'myDivID'）; //引用DOM元素
for（var i = 0; 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 =有些内容;
//marker.xtraData ='SomeExtraData'; //你甚至可以用这种方式添加更多数据
google.maps.event.addListener（marker，click，function（）{
//alert（this.html）;
var myTemplate ='< h1>'+ this.title +'< h1>< p> + this.html +'< / p> ';
myContentDiv.innerHTML = myTemplate; //插入这个html链接
//infowindow.setContent(this.html）;
//infowindow.open(map，这个）;
}）;
}
}
我想要做的是更改活动标记到不同的图像。我确实看到 google.maps.MarkerImage 课程，但是当我尝试了所有尝试到目前为止，已经用URL替换了a标记（不是我选择的），但是接下来的点击（或关闭信息框）标记不会转换回正常。我觉得我很接近，但现在我还是陷入泥泞中。任何帮助将不胜感激。谢谢！
这是我的例子（从 Mike Williams的v2教程）：
http://www.geocodezip.com/v3_MW_example_hoverchange.html
一种方法可以做到这一点（ jsfiddle from your last question，updated）： 工作程式码片段： I have an What I'm looking to do is change the "active" marker to a different image. I did see google.maps.MarkerImage class 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! Here is my example (ported from Mike Williams' v2 tutorial): http://www.geocodezip.com/v3_MW_example_hoverchange.html One way to do it (jsfiddle from your last question, updated):
http://jsfiddle.net/kV6Ys/44/ working code snippet:
这篇关于Google地图API v3主动标记onClick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
http://jsfiddle.net/kV6Ys/44/
var infowindow = null; var gmarkers = []; var defaultIcon = {url：'http://google.com/mapfiles/ms/micons/red-dot.png'，//此标记宽32像素，高32像素。 size：new google.maps.Size（32，32），//这张图片的原点是0,0。 origin：new google.maps.Point（0,0），//这张图片的锚是0,32旗杆的底部。 anchor：new google.maps.Point（16，32）}; var activeIcon = {url：'http://google.com/mapfiles/ms/micons/yellow-dot.png'，//这个标记宽20像素，高32像素。 size：new google.maps.Size（32，32），//这张图片的原点是0,0。 origin：new google.maps.Point（0,0），//这张图片的锚是0,32旗杆的底部。 anchor：new google.maps.Point（16，32）}; //形状定义图标的可点击区域。 //该类型定义了HTML& lt; area& gt;元素'poly'//它将多边形描绘为一系列X，Y点。最后的//坐标通过连接到第一个//坐标来关闭多边形。 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]，键入：'poly'}; $（document）.ready（function（）{initialize（）;}）;函数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（地图，网站）; infowindow = new google.maps.InfoWindow（{content：loading ...}）; var bikeLayer = new google.maps.BicyclingLayer（）; bikeLayer.setMap（地图）; } var sites = [['Mount Evans'，39.58108，-105.63535，4，'这是Mount Evans']，['Irving Homestead'，40.315939，-105.440630，2，'这是欧文家园'。]， ['Badlands National Park'，43.785890，-101.90175，1，'这是荒地国家公园']，['春季熨斗'，39.99948，-105.28370，3，'这些是春天的熨斗。']] ;函数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 =某些内容; 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（标记）; }} #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>< / script>< h1> Map< / h1>< div id =map_canvas>< / div> addListener click method for markers on a Google Map (in the setMarkers function):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);
});
}
}
var infowindow = null;
var gmarkers = [];
var defaultIcon = {url: 'http://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://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"></script>
<h1>Map</h1>
<div id="map_canvas"></div>
