如何更改一组地图标记的图像 [英] How to change the image for a set of map markers
本文介绍了如何更改一组地图标记的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建一个包含5组标记的地图。我有所有的坐标和标记出现在地图上，但我不知道如何更改每个组的图像。我看了其他例子，但他们没有为我工作。如果有一种方法可以更改坐标组或每个坐标的图像，我将很感激帮助。
以下是我到目前为止：
< script type =text / javascript>函数initialize（）{
//添加地图，地图类型
var map = new google.maps.Map（document.getElementById（'map'），{
zoom：13，
center：new google.maps.LatLng（31.5603，-91.4031），
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
//添加地点
var cottages = [
['Savannah Cottage< br /> 412 S.Pearl Street'，31.55600224874313，-91.4073497056961]];
var restaurants = [
''Cotton Alley Cafe<> 208 Main Street< br />（601）442-7452< a href = http://www.cottonalleycafe.comtarget =_blank>网站< / a>'，31.561075，-91.40503100000001]
];
var bars = [
['Under-the-Hill Saloon'，31.559589，-91.41074700000001]
];
var tours = [
['Auburn Antebullum Home< br /> 400 Duncan Avenue< br />（601）442-5981'，31.5457833，-91.39274319999998]
];
var spas = [
['Anruss& amp; amp; amp; amp; amp; Co Salon and Spa< br /> 312 North Commerce Street< br>（601）445-2007< br />< a href =https://www.facebook.com/anruss.salontarget =_blank>网站< / a>'，31.561061，-91.40116799999998]
];
// declare marker call'i'
var marker，i;
// declare infowindow
var infowindow = new google.maps.InfoWindow（）;
//添加标记为COTTAGES
（i = 0; i< cottages.length; i ++）{
marker = new google.maps.Marker（{
position：new google.maps.LatLng（cottages [i] [1]，cottages [i] [2]），
map：map，
}）;
//点击功能标记，弹出infowindow
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function （）{
infowindow.setContent（cottages [i] [0]）;
infowindow.open（map，marker）;
}
}）（marker，i）） ;
}
//为（i = 0; i< restaurants.length; i ++）{
marker = new google.maps。标记（{
position：new google.maps.LatLng（restaurants [i] [1]，restaurants [i] [2]），
map：map，
}）;
//点击功能标记，弹出infowindow
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function （）{
infowindow.setContent（restaurants [i] [0]）;
infowindow.open（map，marker）;
}
}）（marker，i）） ;
}
//为BARS
添加标记（i = 0; i< bars.length; i ++）{
marker = new google.maps。标记（{
position：new google.maps.LatLng（bars [i] [1]，bars [i] [2]），
map：map，
}）;
//点击功能标记，弹出infowindow
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function （）{
infowindow.setContent（bars [i] [0]）;
infowindow.open（map，marker）;
}
}）（marker，i）） ;
}
//为TOURS
添加标记（i = 0; i< tours.length; i ++）{
marker = new google.maps。标记（{
position：new google.maps.LatLng（tours [i] [1]，tours [i] [2]），
map：map，
}）;
//点击功能标记，弹出infowindow
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function （）{
infowindow.setContent（tours [i] [0]）;
infowindow.open（map，marker）;
}
}）（marker，i）） ;
}
//为SPAS
添加标记（i = 0; i< spas.length; i ++）{
marker = new google.maps。标记（{
position：new google.maps.LatLng（spas [i] [1]，spas [i] [2]），
map：map，
}）;
//点击功能标记，弹出infowindow
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function （）{
infowindow.setContent（spas [i] [0]）;
infowindow.open（map，marker）;
}
}）（marker，i）） ;
}
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
解决方案
我不确定您的想法但是这里有一些代码可能会有所帮助：
函数initialize（）{
//添加地图，地图类型
var map = new google.maps.Map（document.getElementById（'map'），{
zoom：13，
center：new google.maps.LatLng（31.5603，-91.4031） ，
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
//创建infowindow
var infowindow = new google.maps.InfoWindow（）;
//添加位置（如问题中所示）
var cottages = [...];
var restaurants = [...];
var bars = [...];
var tours = [...];
var spas = [...];
//创建一个列出所有位置数组的数组。
var allLocations = [小屋，餐厅，酒吧，旅游，水疗];
//为所有标记定义一个通用的点击处理程序。
// ie。一个处理程序，而不是每个标记。
函数clickMarker（）{
var data = this.data;
infowindow.setContent（data.category [data.index] [0]）;
infowindow.open（map，this）;
//这里，你可以遍历`data.category.markers`和
//对类别
中的每个标记进行必要的操作//例如更改它们的图标。
for（var i = 0; i< data.category.markers.length; i ++）{
var url = ...; //确定使用哪个标记图标的表达式
data .category.markers [I] .setIcon（URL）;
//现在循环遍历所有的标记数组，并将标记添加到地图
for（var i = 0; i< allLocations.length; i ++）{
var arr = allLocations [i];
//创建一个关联数组，用于存储对类别标记的引用
arr.markers = [];
for（var marker，j = 0; j
position：new google.maps .LatLng（arr [j] [1]，arr [j] [2]），
map：map
}）;
arr.markers [j] = marker;
//这可以让click hander得到推广，
//并且每个标记都有一个引用返回
//到它的类别数组，以及它自己的索引。
marker.data = {
类别：arr，
索引：j
};
google.maps.event.addListener（标记，'点击'，clickMarker）;
}
}
}
google.maps.event.addDomListener（window，'load'，initialize）;
查看代码中的评论。
I am creating a map with 5 groups of markers. I have all the coordinates in place and the markers appear on the map, but I am not sure how to change the image for each group. I have looked at other examples, but they have not worked for me. If there is a way to change the image for either the group of coordinates or each individual coordinate, I would appreciate the help.
Here is what I have so far:
<script type="text/javascript"> function initialize() {
//add map, the type of map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(31.5603, -91.4031),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//add locations
var cottages = [
['Savannah Cottage<br />412 S.Pearl Street', 31.55600224874313, -91.4073497056961] ];
var restaurants = [
['Cotton Alley Cafe<br />208 Main Street<br />(601)442-7452<br /><a href="http://www.cottonalleycafe.com" target= "_blank">Website</a>', 31.561075,-91.40503100000001]
];
var bars = [
['Under-the-Hill Saloon', 31.559589, -91.41074700000001]
];
var tours = [
['Auburn Antebullum Home<br />400 Duncan Avenue<br />(601)442-5981', 31.5457833, -91.39274319999998]
];
var spas = [
['Anruss & Co Salon and Spa<br />212 North Commerce Street<br />(601) 445-2007<br /><a href="https://www.facebook.com/anruss.salon" target= "_blank">Website</a>', 31.561061,-91.40116799999998]
];
//declare marker call it 'i'
var marker, i;
//declare infowindow
var infowindow = new google.maps.InfoWindow();
//add marker for COTTAGES
for (i = 0; i < cottages.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(cottages[i][1], cottages[i][2]),
map: map,
});
//click function to marker, pops up infowindow
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(cottages[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
//add markers for RESTAURANTS
for (i = 0; i < restaurants.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(restaurants[i][1], restaurants[i][2]),
map: map,
});
//click function to marker, pops up infowindow
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(restaurants[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
//add markers for BARS
for (i = 0; i < bars.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(bars[i][1], bars[i][2]),
map: map,
});
//click function to marker, pops up infowindow
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(bars[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
//add markers for TOURS
for (i = 0; i < tours.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(tours[i][1], tours[i][2]),
map: map,
});
//click function to marker, pops up infowindow
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(tours[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
//add markers for SPAS
for (i = 0; i < spas.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(spas[i][1], spas[i][2]),
map: map,
});
//click function to marker, pops up infowindow
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(spas[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
解决方案
I'm not sure exactly what you have in mind but here's some code that may help :
function initialize() {
//add map, the type of map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(31.5603, -91.4031),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//create infowindow
var infowindow = new google.maps.InfoWindow();
//add locations (as in the question)
var cottages = [...];
var restaurants = [...];
var bars = [...];
var tours = [...];
var spas = [...];
//Make an array that lists all the locations arrays.
var allLocations = [cottages, restaurants, bars, tours, spas];
//Define a generalized click handler for all markers.
//ie. one handler, not one per marker.
function clickMarker() {
var data = this.data;
infowindow.setContent(data.category[data.index][0]);
infowindow.open(map, this);
//HERE, you can loop through `data.category.markers` and
//do whatever is necessary to each marker in the category
//eg change their icons.
for(var i=0; i<data.category.markers.length; i++) {
var url = ...;//expression that determines which marker icon to use
data.category.markers[i].setIcon(url);
}
}
//Now loop through all the markers arrays and add markers to the map
for (var i=0; i<allLocations.length; i++) {
var arr = allLocations[i];
//Create an associated array in which to store references to category's markers
arr.markers = [];
for (var marker, j=0; j<arr.length; j++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(arr[j][1], arr[j][2]),
map: map
});
arr.markers[j] = marker;
//This allows the click hander to be generalized,
//and for each marker to have a reference back
//to its category array, and its own index.
marker.data = {
category: arr,
index: j
};
google.maps.event.addListener(marker, 'click', clickMarker);
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
See comments in code.
这篇关于如何更改一组地图标记的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
