我创建了一个自定义标记,用于我的谷歌地图。图标的锚点应位于左下角。在我的地图上,锚点似乎位于图标中心的底部边缘。图标大小为 32 x 49。我包含的代码放置了所有标记。我已经搜索了几个小时但找不到任何答案。 V3 api 表示该属性是锚点。当我使用该属性时,地图上没有显示任何标记。
var iconImage = "images/Italian Flag Mine New.png";
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 12,
center: new google.maps.LatLng(45.067314, 7.697774),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var iconImage = {
url: "images/Italian Flag Mine New.png",
anchorPosition: (0, 49)
};
//var iconImage = {url: "images/Italian Flag Mine New.png",
// anchor : (0,49)};
var marker, i, savedMarker;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][latIndex], locations[i][lngIndex]),
map: map,
animation: google.maps.Animation.DROP,
icon: iconImage
});
}
anchor
属性是标记构造函数的一部分,但您仍然必须根据 Google 文档(在“复杂图标”标题下) 创建该对象的实例。尝试一下:
var iconImage = {
url: "images/Italian Flag Mine New.png",
anchor: new google.maps.Point(0,49)
};
您还应该考虑指定大小属性。
您需要指定可点击锚点的坐标,这取决于缩放 你即将成为这样:
https://developers.google.com/maps/documentation/javascript/markers
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 15, 49, 16, 49, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
type: 'poly'
};
var iconImage= new google.maps.MarkerImage(
// URL
"images/Italian Flag Mine New.png",//желательно название картинки поменять, чтобы было без пробелов
// (width,height)
new google.maps.Size(32, 49),
// The origin point (x,y)
new google.maps.Point(0, 0),
// The anchor point (x,y)
new google.maps.Point(9, 49)
);
marker = new google.maps.Marker({
position : new google.maps.LatLng(locations[i][latIndex], locations[i][lngIndex]),
map : map,
animation: google.maps.Animation.DROP,
icon : iconImage,
shape: shape
});
自 API 3.5x 起,使用 AdvancedMakerElement(或 PinElement) 锚点属性不再可用,锚点默认位于图像标记的底部中心。添加标记内容“样式”允许在标记的中心设置锚点。
// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary(
"marker");
// Create map
const map = new Map(document.getElementById("map"), {
center: { lat: 37.42475, lng: -122.0845 },
zoom: 13,
mapId: "4504f8b37365c3d0",
});
// Customize marker content
const mapPin = document.createElement("img");
mapPin.src = "mymarker.png";
mapPin.style.transform = "translateY(50%)";
// Create maker
const marker = new AdvancedMarkerElement({
position: { lat: 37.42475, lng: -122.0845 },
map: map,
content: mapPin,
title: "my marker"
});
注意:我不知道这是否会影响碰撞行为。