作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我正在尝试将 Google map 标记标签颜色更改为白色,同时将鼠标悬停在事件上。如何更改标签颜色。
我的代码是
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 事件处理程序以更新标签文本颜色。
// 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>
关于javascript - 谷歌地图标记标签文本颜色更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41478502/
leaflet:一个开源并且对移动端友好的交互式地图 JavaScript 库 中文文档: https://leafletjs.cn/reference.html 官网(英文): ht
我是一名优秀的程序员,十分优秀!