Question

我在Google地图中插入自定义标记，但未在地图上准确指向。我认为这主要是因为标记的指向边缘的设计。

是否有关于如何制作自定义标记的指南？

我正在使用以下lib：http://hpneo.github.com/gmaps/

enter image description here

// JavaScript Document
$(document).ready(function () {
    var map = new GMaps({
        div: '#map',
        lat: 13.00487,
        lng: 77.576729,
        zoom: 13,
    });

    map.addControl({
        position: 'top_right',
        text: 'Geolocate',
        style: {
            margin: '5px',
            padding: '1px 6px',
            border: 'solid 1px #717B87',
            background: '#fff'
        },
        events: {
            click: function () {
                GMaps.geolocate({
                    success: function (position) {
                        map.setCenter(position.coords.latitude, position.coords.longitude);
                    },
                    error: function (error) {
                        alert('Geolocation failed: ' + error.message);
                    },
                    not_supported: function () {
                        alert("Your browser does not support geolocation");
                    }
                });
            }
        }
    });

    map.addMarker({
        lat: 13.00487,
        lng: 77.576729,
        title: 'Lima',
        icon: "http://i.imgur.com/3YJ8z.png",
        infoWindow: {
            content: '<p>HTML Content</p>'
        }
    });

});

Answer 1

你可能想要的是这样的：

var image = new google.maps.MarkerImage(
    'http://i.imgur.com/3YJ8z.png',
    new google.maps.Size(19,25),    // size of the image
    new google.maps.Point(0,0), // origin, in this case top-left corner
    new google.maps.Point(9, 25)    // anchor, i.e. the point half-way along the bottom of the image
);

map.addMarker({
    lat: 13.00487,
    lng: 77.576729,
    title: 'Lima',
    icon: image,
    infoWindow: {
        content: '<p>HTML Content</p>'
    }
});

Answer 2

据我所知，有两种基本方法可以为Google Maps（API V3）创建自定义标记。第一种是使用“自定义叠加”，第二种是使用“复杂图标”。两者都在官方Google Maps API documentation中解释。你可以......

1。）如果要显示HTML

，请使用"Custom Overlay"

Google Map文档示例“Custom Overlays”显示了如何基于Google Maps OverlayView类创建自己的CustomMarker类

CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
  ..
}
overlay = new CustomMarker(..)
overlay.setMap(map);

2。）如果要显示图像，请使用"Complex Icon"

Google Map文档示例“Complex Icons”显示如何使用复杂图标创建Google Marker，即一个图标，一个阴影图像和一个形状（形状定义了可点击的图标区域）

 var image = new google.maps.MarkerImage('images/flag.png', ..
 var shadow = new google.maps.MarkerImage('images/shadow.png', ..
 var marker = new google.maps.Marker({
    position: .., map: .., shadow: .., icon: image, shape: ..
   });

Answer 3

https://developers.google.com/maps/documentation/javascript/overlays#Icons有一个例子，语法在https://developers.google.com/maps/documentation/javascript/reference#MarkerImage

解释

特别是，如果自定义标记与普通Google标记的形状不同，则需要正确设置anchor参数。

编辑后，

看来确实您使用的是小图片，但所有内容都被视为普通尺寸的Google标记。您需要制作自定义标记（见上文）。

Google地图自定义标记

3 个答案:

编辑后，