如何设置Marker图标的位置
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何设置Marker图标的位置相关的知识，希望对你有一定的参考价值。
桌面图标位置的设置方法：一、任意移动桌面图标：
1、选中所需要移动的图标；
2、左击鼠标并拖动至所需要移动的位置；
3、按照上述步骤，依次完成其他图标的移动。
二、自动排序：
1、在桌面空白处右击鼠标；
2、出现对话框，选择排序方式；
3、选择按照”名称、大小、项目类型、修改日期“进行自动排序。 参考技术A 点右键，打开“查看”菜单，取消“自动排列图标”的勾。 参考技术B 有一个可以设置锚点的函数
单击其他时更改谷歌地图标记图标
【中文标题】单击其他时更改谷歌地图标记图标【英文标题】：Change Google Maps marker icon when clicking on other 【发布时间】：2015-03-01 11:45:23 【问题描述】：我创建了一个谷歌地图多个位置页面， 使用高级自定义字段 Google Map 字段。
我已设法在单击时更改标记图标，但我希望在单击其他图标时将其更改回来。
下面是代码示例：
for (i = 0; i < locations.length; i++)
marker = new google.maps.Marker(
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: iconBase + 'Stock%20Index%20Up.png'
);
google.maps.event.addListener(marker, 'click', (function(marker, i)
return function()
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png");
)(marker, i));
更好地查看此处的工作代码： http://jsfiddle.net/gargiguy/s8vgxp3g
【问题讨论】：
【参考方案1】：邓肯说：您要做的是将所有标记添加到数组中。在您的单击事件处理程序中，循环遍历该数组，更新每个标记的图标。然后最后为被点击的标记设置图标。
google.maps.event.addListener(marker, 'click', (function (marker, i)
return function ()
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
for (var j = 0; j < markers.length; j++)
markers[j].setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Up.png");
marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png");
;
working fiddle
工作代码sn-p：
var markers = [];
var map;
function initialize()
map = new google.maps.Map(document.getElementById('map'),
zoom: 12,
// center: new google.maps.LatLng(-33.92, 151.25),
center: new google.maps.LatLng(36.8857, -76.2599),
mapTypeId: google.maps.MapTypeId.ROADMAP
);
var infowindow = new google.maps.InfoWindow();
var iconBase = 'https://cdn3.iconfinder.com/data/icons/musthave/24/';
var marker, i;
for (i = 0; i < locations.length; i++)
marker = new google.maps.Marker(
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: iconBase + 'Stock%20Index%20Up.png'
);
google.maps.event.addListener(marker, 'click', (function(marker, i)
return function()
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
for (var j = 0; j < markers.length; j++)
markers[j].setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Up.png");
marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png");
;
)(marker, i));
markers.push(marker);
google.maps.event.addDomListener(window, 'load', initialize);
var locations = [
[
"New Mermaid",
36.9079, -76.199,
1,
"Georgia Mason",
"",
"Norfolk Botanical Gardens, 6700 Azalea Garden Rd.",
"coming soon"
],
[
"1950 Fish Dish",
36.87224, -76.29518,
2,
"Terry Cox-Joseph",
"Rowena's",
"758 W. 22nd Street in front of Rowena's",
"found"
],
[
"A Rising Community",
36.95298, -76.25158,
3,
"Steven F. Morris",
"Judy Boone Realty",
"Norfolk City Library - Pretlow Branch, 9640 Granby St.",
"found"
],
[
"A School Of Fish",
36.88909, -76.26055,
4,
"Steven F. Morris",
"Sandfiddler Pawn Shop",
"5429 Tidewater Dr.",
"found"
],
[
"Aubrica the Mermaid (nee: Aubry Alexis)",
36.8618, -76.203,
5,
"Myke Irving/ Georgia Mason",
"USAVE Auto Rental",
"Virginia Auto Rental on Virginia Beach Blvd",
"found"
]
];<script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div>
<div id="map" style="width: 500px; height: 400px;"></div>
</div>【讨论】：
如果您只需要更改前一个图标，我不建议遍历每个标记并更新每个图标。【参考方案2】：由于听起来您只需将以前的图标改回原来的图标，因此我不建议循环遍历每个标记。在有很多标记的地图中，这可能会变得很重。
相反，我会将活动标记存储在点击事件的变量中，并在它发生变化时更新它。
var marker;
var activeMarker;
var iconDefault = iconBase + 'Stock%20Index%20Up.png';
var iconSelected = 'https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png';
for (i = 0; i < locations.length; i++)
marker = new google.maps.Marker(
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: iconDefault
);
google.maps.event.addListener(marker, 'click', (function(marker, i)
return function()
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
// check to see if activeMarker is set
// if so, set the icon back to the default
activeMarker && activeMarker.setIcon(iconDefault);
// set the icon for the clicked marker
marker.setIcon(iconSelected);
// update the value of activeMarker
activeMarker = marker;
)(marker, i));
【讨论】：
【参考方案3】：你可以像下面一样做：
var prevMarker = "";
var markers = [];
var image = url: "your_png.png",
scaledSize: new google.maps.Size(38, 40) // If you want to resize it.
;
用于创建标记，
var marker = createMarker(coordinate, map, image, id);
// coordinate = lat:float value,long:float value and 'map' your map
function createMarker(lat, long, map, image, marker_id)
var coordinates = lat: lat, lng: long;
var marker = new google.maps.Marker(
position: coordinates,
icon: image,
id: "marker_" + marker_id,
map: map
);
return marker;
你可以使用标记动作。
marker.addListener('click', function()
console.log(this.id);
if(prevMarker !== "")
prevMarker.setIcon(
url: "your_image.png",
scaledSize: new google.maps.Size(38, 40)
);
prevMarker = this;
this.setIcon(
url: "your_image.png",
scaledSize: new google.maps.Size(48, 50)
);
map.panTo(this.getPosition());
);
所有可用标记的循环标记代码。
【讨论】：
警告。同一个标记可以多次点击，这可能需要额外的编码。 @Jaider，如果单击相同的标记，它将执行相同的代码行，但在 UI 上不会有任何效果。如果您不想执行相同的标记代码，则可以编写忽略代码。前任。 prevMarker === this 然后返回。以上是关于如何设置Marker图标的位置的主要内容，如果未能解决你的问题，请参考以下文章