更改多个自定义标记图标Google Map API V3的点位置 [英] Change point location of multiple custom marker icons Google Map API V3
问题描述
我需要能够更改标记图标的点位置，其中每个标记位置都有一个单独的图标。这些图标需要以锚点为中心，而不是最低点，因为它们是默认的...
我无法弄清楚如何在没有完全重做的情况下做到这一点我的代码... ...
$ $ p $ code var sites = [
['照片1'，36.33835943134047，-93.63535， 4，'mylinkurl'，'images / marker1.png']，
['Photo 2'，36.315939，-94.440630，2，'mylinkurl'，'images / marker2.png']，
[ 'Photo 3'，36.085890，-93.90175,1，'mylinkurl'，'images / marker3.png']，
['Photo 4'，36.09948，-93.28370，3，'mylinkurl'，'images / marker4 .pngg']
];
函数setMarkers（map，markers）{
for（var i = 0; i< markers.length; i ++）{
var sites = markers [i];
var siteLatLng = new google.maps.LatLng（sites [1]，sites [2]）;
var marker = new google.maps.Marker（{
position：siteLatLng，
map：map，
icon：sites [5]，
title：sites [ 0]，
zIndex：sites [3]，
href：sites [4]
}）;
google.maps.event.addListener（marker，'click'，function（）{
$ .fancybox（{
href：this.href，
width：1000，
maxHeight：666，
fitToView：true，
autoSize：false，
类型：'iframe'，
填充：0，
openEffect：'elastic'，
openSpeed：150，
aspectRatio：true，
closeEffect：'elastic'，
closeSpeed：150，
closeClick：true ，
iframe：{scrolling：'no'
}，
preload：false
}）;
}）;
arrMarkers.push（marker）;
}
}
我找到了这段代码，但我无法弄清楚如何整合它...
anchor：new google.maps.Point（16，34）
谢谢。我想我的斗争是我不知道如何将它集成到我的代码中...我需要图标url来自字符串...试试这个，但它不工作：
函数setMarkers（map，markers）{
for（var i = 0; i< markers.length; i ++）{
var sites = markers [i];
var sites = markers [i];
var siteLatLng = new google.maps.LatLng（sites [1]，sites [2]）;
var icon = {
url：sites [5]，
size：new google.maps.Size（40,40），
anchor：new google.maps.Point 20,20）
};
var marker = new google.maps.Marker（{
position：siteLatLng，
map：map，
icon：sites [5]，
title：sites [ 0]，
zIndex：sites [3]，
href：sites [4]
}）;
如果您使用的是本机Google Maps API v3图标，会说下面。这是你问的问题。然而，在您提供链接（1）的地图上，您使用的是开放日志标记（2）的KMZ文件，那些图标是您关心什么？要将需要添加 hotSpot标记的人群加入到中心人群中，请点击$ /
（1）http：// url /
（2）http：//url/OpenHouse.kmz<
（看起来您至少在某些地方有这种感觉）
=============================
如果你的图标都是40px x 40px，并且需要集中在这个点上。查看 google.maps.Icon 定义：
google.maps.Icon对象规范
属性|类型|说明
anchor |点|锚定图像的位置与地图上标记的位置相对应。默认情况下，锚点位于图像底部的中心点。
origin |点|图片在精灵中的位置，如果有的话。默认情况下，原点位于图像的左上角（0，0）。
scaledSize |大小|缩放后整个图像的大小，如果有的话。使用此属性可以拉伸/缩小图像或精灵。
size |大小|精灵或图像的显示大小。使用精灵时，您必须指定精灵大小。如果未提供大小，则会在图像加载时设置大小。
url |字符串|图片或精灵表的网址。
您需要：
var icon = {
url：'your / URL / for the icon，
size：new google.maps.Size（40,40），
anchor：新的google.maps.Point（20,20）
};
I need to be able to change the point location of marker icons, where each marker location has a separate icon. The icons need to be centered on the anchor point, not bottom-center as they are default...
I can't figure out how to do this without completely re-working my code...
var sites = [
['Photo 1', 36.33835943134047, -93.63535, 4, 'mylinkurl', 'images/marker1.png'],
['Photo 2', 36.315939, -94.440630, 2, 'mylinkurl', 'images/marker2.png'],
['Photo 3', 36.085890, -93.90175, 1, 'mylinkurl', 'images/marker3.png'],
['Photo 4', 36.09948, -93.28370, 3, 'mylinkurl', 'images/marker4.pngg']
];
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
icon: sites[5],
title: sites[0],
zIndex: sites[3],
href: sites[4]
});
google.maps.event.addListener(marker, 'click', function() {
$.fancybox({
href : this.href,
width : 1000,
maxHeight : 666,
fitToView : true,
autoSize : false,
type: 'iframe',
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
aspectRatio : true,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
iframe : { scrolling : 'no'
},
preload : false
});
});
arrMarkers.push(marker);
}
}
I have found this code, but I can't figure out how to integrate it...
anchor: new google.maps.Point(16, 34)
Thank you for that. I think my struggle is I don't know how to integrate that into my code... I need that icon url to come from the string... trying this, but it's not working:
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var icon = {
url: sites[5],
size: new google.maps.Size(40,40),
anchor: new google.maps.Point(20,20)
};
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
icon: sites[5],
title: sites[0],
zIndex: sites[3],
href: sites[4]
});
If you were using native Google Maps API v3 icons I would have said the below. Which is what your question asked.
However, on the map to which you provided a link (1), you are using a KMZ file for the Open House markers (2), are those the icons you are concerned about? To center those you need to add the hotSpot tag
(1) http://url/
(2) http://url/OpenHouse.kmz<
<hotSpot x="0.5" y="0.5" xunits="fraction" yunits="fraction">
(which it looks like you have in at least some places)
=============================
If your icons are all 40px x 40px and need to be centered over the point. Look at the google.maps.Icon definition:
google.maps.Icon object specification
Properties | Type | Description
anchor | Point | The position at which to anchor an image in correspondance to the location of the marker on the map. By default, the anchor is located along the center point of the bottom of the image.
origin | Point | The position of the image within a sprite, if any. By default, the origin is located at the top left corner of the image (0, 0).
scaledSize | Size | The size of the entire image after scaling, if any. Use this property to stretch/shrink an image or a sprite.
size | Size | The display size of the sprite or image. When using sprites, you must specify the sprite size. If the size is not provided, it will be set when the image loads.
url | string | The URL of the image or sprite sheet.
You need:
var icon = {
url: 'your/URL/for the icon",
size: new google.maps.Size(40,40),
anchor: new google.maps.Point(20,20)
};
这篇关于更改多个自定义标记图标Google Map API V3的点位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
