我正在使用谷歌地图版本3.我想显示一个方形标记。目前谷歌显示它像下图。即该点位于标记的底部。我的标记是假设20px X 20px。目前谷歌在红点显示它。
现在我需要稍微显示标记。即点不应该在底部而是在中间。如下图所示。
我试过,锚点,anchorPosition,anchorPoint,仍然没有运气。
有人能指出我这样做的确切方法吗?
修改的 以下是我的代码,
icon = {
url: "/app/image/map_pin/marker-90.png",
size: new google.maps.Size(32, 33),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(50,50)
}
this.makeMarker(this.map,LatLong, icon);
makeMarker(map: any, lat: number, lng: number, icon: string) {
new google.maps.Marker({
map: map,
icon: icon,
animation: google.maps.Animation.DROP,
position: { lat: lat, lng: lng }
});
}
我尝试了位于印度古吉拉艾哈迈达巴德的lat: 23.038645, lng: 72.511895
。但缩小后显示在阿富汗。
答案 0 :(得分:2)
每the documentation,这有效:
datagrid
var icon = {
url: "http://i.stack.imgur.com/FhryS.png", // 20px x 20px icon
// size: new google.maps.Size(20, 20), // size of icon is 20px x 20px (so this isn't required)
// origin: new google.maps.Point(0, 0), // this is the default and isn't needed
anchor: new google.maps.Point(10, 10) // anchor is in the center at 10px x 10px
}

function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var icon = {
url: "http://i.stack.imgur.com/FhryS.png",
anchor: new google.maps.Point(10, 10)
};
makeMarker(map, map.getCenter().lat(), map.getCenter().lng(), icon);
}
google.maps.event.addDomListener(window, "load", initialize);
function makeMarker(map, lat, lng, icon) {
new google.maps.Marker({
map: map,
icon: icon,
animation: google.maps.Animation.DROP,
position: {
lat: lat,
lng: lng
}
});
}

html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}