Javascript 动态更改谷歌地图图标/标记的颜色
我正在尝试根据用户输入使用GoogleMaps API V3更改标记/图标的颜色。我可以将我想要的颜色或图像链接硬编码到Javascript中,但是如果我试图将颜色或链接作为字符串变量从Java程序中传递,那么它要么不显示,要么默认为红色标记 我已经查看了以下所有线程和google API: 所有这些都有指向他们想要使用的标记图标的链接,或者已经硬编码到javascript中的颜色十六进制代码 我的尝试,其中address1和color1都是从Java代码传递到javascript的字符串。例如,color1的字符串可以是 •| 4D8080:Javascript 动态更改谷歌地图图标/标记的颜色,javascript,google-maps,google-maps-api-3,java-8,Javascript,Google Maps,Google Maps Api 3,Java 8,我正在尝试根据用户输入使用GoogleMaps API V3更改标记/图标的颜色。我可以将我想要的颜色或图像链接硬编码到Javascript中,但是如果我试图将颜色或链接作为字符串变量从Java程序中传递,那么它要么不显示,要么默认为红色标记 我已经查看了以下所有线程和google API: 所有这些都有指向他们想要使用的标记图标的链接,或者已经硬编码到javascript中的颜色十六进制代码 我的尝试,其中address1和color1都是从Java代码传递到javascript的字符串。例如
function codeAddress(address1, color1){
var pinColor = color1;
address=address1;
document.geocoder.geocode( {'address': address1}, function(results, status) {
app.callFromJavascript(address1);
if (status == google.maps.GeocoderStatus.OK) {
document.map.setCenter(results[0].geometry.location);
document.map.setZoom(13);
var marker = new google.maps.Marker({
icon: pinColor,
position: results[0].geometry.location,
map: document.map
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
这将导致地图以位置为中心,并显示默认的红色标记。
如果我将传递给color1的字符串更改为,则根本不会显示任何标记
我遗漏了什么,我不能从传递的变量中生成它们?位置标记不能硬编码吗?这对我来说很好:
var marker = new google.maps.Marker({
icon: new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"),
position: results[0].geometry.location,
map: document.map
});
它们不必硬编码,但必须使用MarkerImage的对象类型将url传递给
您不能仅仅传递一个十六进制颜色,然后期望maps API根据您刚才选择的颜色创建一个新标记。通常要做的是创建一个已经存在于您计划使用的每种颜色的图像url。然后按照我向您展示的方式使用代码。因此,如果您已经有一个十六进制代码,并且您有一个如下所示的图标obj
let carIcon = {
path: carsvg,
scale: 0.7,
strokeColor: 'white',
strokeWeight: 0.10,
fillOpacity: 1,
fillColor: '#404040',
offset: '2%',
anchor: new google.maps.Point(10, 25) // orig 10,50 back of car, 10,0 front of car, 10,25 center of car
};
还有像这样的标记对象
let carmarker = new google.maps.Marker({
position: carLatLng,
map: map,
title: "Car",
icon: carIcon,
setMap: map
});
然后说你想改变图标的颜色。要做到这一点,只需使用
carIcon.fillColor='008000';
卡马克·塞蒂康卡利
这应该使它的颜色十六进制代码你有。希望能有帮助。此外,在这种情况下,图标应该是SVG,以便颜色发生变化。是的,我知道这是可行的。然而,这不是我想做的。我想选择一种颜色,并将十六进制代码传递给javascript,让它显示为特定的颜色。请参阅我的更新,您必须为您计划使用的每种颜色创建一个URL。我有一个URL,比如:•| 4D8080,我将其作为变量传递,在本例中,pinColor将其传递给标记的图标字段。我想确定的是,我是否可以将该URL作为变量传递。如果它是一个有效的URL-您在其中有一些奇怪的字符。。。但是无论如何,是的,任何有效的URL都可以通过我的代码传递。Markerimage不推荐使用。它已经被匿名所取代:在Google Maps JavaScript API的3.10版本之前,复杂图标被定义为MarkerImage对象。图标对象文字是在3.10版中添加的,并从3.11版开始替换MarkerImage。您能提供JSFIDLE吗?我可以通过JSFIDLE实现Java/HTML/Javascript的组合?我现在正在看,但似乎我做不到。这是一个相当大的项目,涉及数据库和地理编码购买的zipcodes,我想做的就是知道我是否可以将标记变量的图标选项作为字符串传递给URL。好吧,但有点问题。您可以从变量更改颜色@用户3388636啊哈!谢谢你做了四分之一的下降,我只是错过了另一组单引号,当我把它传递给javascript!现在效果很好!