Google地图标记标签文字颜色更改 [英] Google map marker label text color change
本文介绍了Google地图标记标签文字颜色更改的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在将鼠标悬停在事件上时将Google地图标记标签的颜色更改为白色.如何更改标签颜色.
I am trying to change the Google map marker label color to white, while hover the event. How can i change the label color.
我的代码是
function hover(id) {
var icon2 = "<?php echo base_url(). "bootstrap/images/tooltip_solid.png";?>";
for ( var i = 0; i< markers.length; i++) {
if (parseInt(id) == parseInt(markers[i].id)) {
markers[i].setIcon(icon2);
markers[i].setZIndex(99999999999999);
break;
}
}
}
推荐答案
最简单的方法是为每个标记创建mouseover/mouseout事件处理程序,以更新标签文本的颜色.
Simplest way is to create mouseover/mouseout event handlers for each marker to update the label text color.
// creates a marker with a closure for the event functions.
function createMarker(latLng, text, label) {
var marker = new google.maps.Marker({
position: latLng,
map: map,
label: {text: label, color: "white"}
});
google.maps.event.addListener(marker, "mouseover", function(evt) {
var label = this.getLabel();
label.color="black";
this.setLabel(label);
});
google.maps.event.addListener(marker, "mouseout", function(evt) {
var label = this.getLabel();
label.color="white";
this.setLabel(label);
});
return marker;
}
代码段:
var geocoder;
var map;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Mountain View, CA, USA (37.3860517, -122.0838511)
var marker1 = createMarker({
lat: 37.3860517,
lng: -122.0838511
}, "Mountain View, CA", "A");
// Palo Alto, CA, USA (37.4418834, -122.14301949999998)
var marker2 = createMarker({
lat: 37.4418834,
lng: -122.14301949999998
}, "Palo Alto", "B");
// Stanford, CA, USA (37.42410599999999, -122.1660756)
var marker3 = createMarker({
lat: 37.42410599999999,
lng: -122.1660756
}, "Stanford, CA", "C");
var bounds = new google.maps.LatLngBounds();
bounds.extend(marker1.getPosition());
bounds.extend(marker2.getPosition());
bounds.extend(marker3.getPosition());
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
function createMarker(latLng, text, label) {
var marker = new google.maps.Marker({
position: latLng,
map: map,
label: {
text: label,
color: "white"
}
});
google.maps.event.addListener(marker, "mouseover", function(evt) {
var label = this.getLabel();
label.color = "black";
this.setLabel(label);
});
google.maps.event.addListener(marker, "mouseout", function(evt) {
var label = this.getLabel();
label.color = "white";
this.setLabel(label);
});
return marker;
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
这篇关于Google地图标记标签文字颜色更改的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文