Google API根据不同的颜色使用不同颜色的多个标记 [英] Google API multiple markers with different colours depending on a class
本文介绍了Google API根据不同的颜色使用不同颜色的多个标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我在标记下面有这个代码是由一个使用邮政编码和城市的CMS系统创建的。一切工作正常，但我想要做的是改变每个针的颜色取决于类我有3类红色，绿色和蓝色这个标记应该改变，这取决于在CMS系统中选择什么类。什么是实现这一目标的最佳方式？
$（document）.ready（function（）{
var map;
var elevator;
var myOptions = {
zoom：3，
center：new google.maps.LatLng（50，-30），
mapTypeId： 'terrain'
};
map = new google.maps.Map（$（'＃map_canvas'）[0]，myOptions）;
var styles = [{featureType：water，stylers：[{color：＃46bcec}，{visibility：on}]}，{featureType：landscape ：[{ 颜色 ： ＃f2f2f2 }]}，{ 类型特征 ： 道路， 造型器：[{ 饱和： - 100}，{ 亮度：45}]}，{ 类型特征： road.highway， 造型器：[{ 可视性： 简化}]}，{ 类型特征： road.arterial， 的ElementType： labels.icon，造型器：[{ 可视性 ： 关 }]}，{ 类型特征 ： 行政， 的ElementType： labels.text.fill， 造型器：[{ 颜色： ＃444444 }]}，{ 类型特征： 运输， 造型器：[{ 可视性： 关}]}，{ 类型特征： POI，造型的 ：[{ 可视性 ： 关}]}];
map.setOptions（{styles：styles}）;
var iterator = 0;
var addresses = [
['< div class =red>< / div>纽约'，'10007']，
$ b $ ['< div class =green>< / div>墨西哥'，'10100']，
['< div class =blue>< / div>西班牙'，'04830']，
];
for（var x = 0; x
}
函数MarkMe（）{
var add = addresses [iterator];
$ .getJSON（'http://maps.googleapis.com/maps/api/geocode/json?address='+addresses [x] +'& sensor = false'，null，function（data） {
var p = data.results [0] .geometry.location
var o = data.results [0]
var latlng = new google.maps.LatLng（p.lat，p .lng）;
var pinColor =red;
var pinImage = new google.maps.MarkerImage（'/ assets / images / pin-'+ pinColor +'.png'，
new google.maps.Size（22，31））;
var content ='< div style =width：150px;>'+ add +'< br />< ; / div>';
var marker = new google.maps.Marker（{
position：latlng，
map：map，
clickable：true，
icon：pinImage，
title：o +'< br />'+ add，
}）;
func getInfoCallback（map，content）{
var infowindow = new google.maps.InfoWindow（{content：content}）;
返回函数（）{
infowindow.setContent（content）;
infowindow.open（map，this）;
};
};
google.maps.event.addListener（marker，'click'，getInfoCallback（map，content））;
}）;
iterator ++;
}）
解决方案
您可以创建1个类型（餐馆，酒店）
的数组或者设置验证的默认值
并尝试下面的代码：
var marker_new = new Array（）;
var url =;
if（a ==hotels）{
url =http://exampl.com/yellow.png;
} else {
url =http://exampl.com/green.png
}
marker_new [i] = google.maps.Marker（{
图标：_url;
位置：place.geometry.location，
map：map
}）;
如何使用
marker_new [i] = new google.maps.Marker（{
position：place.geometry.location，
map：map
}）;
iw = new google.maps.InfoWindow（{
content：getIWContent（place）
}）;
iw.open（map，marker_new [i]）;
如何使用
marker_new [i] = new google.maps.Marker（{
position：results [i] .geometry.location，
animation：google.maps.Animation.DROP
}）;
google.maps.event.addListener（marker_new [i]，'click'，getDetails（results [i]，i））;
或阅读更多：如何修改标记？
So I have this code below the markers are created by a CMS system using the Postal code and City. Everything is working ok but what I am trying to do is change the colour of each pin depending on a class I have 3 classes red,green and blue this marker should change depending on what class is selected in the CMS system. What would be the best way of achieving this ?
$(document).ready(function () {
var map;
var elevator;
var myOptions = {
zoom: 3,
center: new google.maps.LatLng(50, -30),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var styles = [{"featureType":"water","stylers":[{"color":"#46bcec"},{"visibility":"on"}]},{"featureType":"landscape","stylers":[{"color":"#f2f2f2"}]},{"featureType":"road","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]}];
map.setOptions({styles: styles});
var iterator = 0;
var addresses = [
['<div class="red"></div>New York', ' 10007'],
['<div class="green"></div>Mexico', ' 10100'],
['<div class="blue"></div>Spain', ' 04830'],
];
for (var x = 0; x < addresses.length; x++) {
MarkMe();
}
function MarkMe() {
var add = addresses[iterator];
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location
var o = data.results[0]
var latlng = new google.maps.LatLng(p.lat, p.lng);
var pinColor = "red";
var pinImage = new google.maps.MarkerImage('/assets/images/pin-' + pinColor + '.png',
new google.maps.Size(22, 31));
var content = '<div style="width: 150px;">' + add + '<br/></div>';
var marker = new google.maps.Marker({
position: latlng,
map: map,
clickable: true,
icon: pinImage,
title: o + '<br/>' + add,
});
function getInfoCallback(map, content) {
var infowindow = new google.maps.InfoWindow({ content: content });
return function () {
infowindow.setContent(content);
infowindow.open(map, this);
};
};
google.maps.event.addListener(marker, 'click', getInfoCallback(map, content));
});
iterator++;
}
})
解决方案
you can create 1 array of type (restaurants,hotels) or set default value of validate
and try this code:
var marker_new = new Array();
var url = "";
if(a == "hotels"){
url = "http://exampl.com/yellow.png";
}else{
url = "http://exampl.com/green.png"
}
marker_new[i] = google.maps.Marker({
icon: _url;
position: place.geometry.location,
map: map
});
How to use
marker_new[i] = new google.maps.Marker({
position: place.geometry.location,
map: map
});
iw = new google.maps.InfoWindow({
content: getIWContent(place)
});
iw.open(map, marker_new[i]);
how to use
marker_new[i] = new google.maps.Marker({
position: results[i].geometry.location,
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker_new[i], 'click', getDetails(results[i], i));
or read more in: How can I modify the markers?
这篇关于Google API根据不同的颜色使用不同颜色的多个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
