谷歌地图图像标记没有正确放置在精灵中 [英] Google maps image marker is not placing correctly in the sprite

问题描述

我试图为谷歌地图标记使用精灵图片，但不显示。这里是我使用的代码

I'm trying to use a sprite image for google map marker but it does not display. Here is the code I'm using

function setMarkers(map, markers) {

    var google_image = new google.maps.MarkerImage("http://www.mydomain.com/images/bodycss/pointer.png", new google.maps.Size(32, 32), new google.maps.Point(28, 32));

        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,
                title: sites[0],
                zIndex: sites[3],
                html: sites[4],
                icon: google_image
            });

            var contentString = "Some content";

            google.maps.event.addListener(marker, "mouseover", function () {
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });
        }
    }

我给出的图像大小为32px * 32px我给出的图像位置点是28和32.只有地图没有标记显示。任何帮助将不胜感激

The image size I've given as 32px * 32px and the image position point I've given is 28 and 32. Only the map is displaying without the marker. Any help would be appreciated

推荐答案

您的问题可能存在不同的问题。在进入问题之前，有几件事需要测试 -

There may be different issues for your problem. Few things to test before going into the issue-

测试您的代码而不使用自定义标记并查看标记是否正确显示。如果这不起作用，你的latlng值是错误的。如果有效，请检查您的网站是否可以访问您的精灵图像（请参阅Chrome或Firebug控制台以了解错误）。如果没有错误，那么你的位置点可能无法正确调整。

Test your code without using a custom marker and see whether the marker gets displayed correctly. If that doesn't work your latlng values are wrong. If it works, then check whether your sprite image is accessible by your site(see the chrome or firebug console for errors). If there are no errors, then your position point may not be adjusted properly.

另外添加 map.setCenter（marker.getPosition（））创建标记后显示在查看区域。

Also add map.setCenter(marker.getPosition()) after creating your marker so that it is shown in the viewing area.

更新 - 在下面的行中更改大小和点参数，直到您找到标记，如果上述问题不是问题。

Update- In the below line change your size and point parameters until you find the marker if the above issues aren't the problem.

var google_image = new google.maps.MarkerImage http://www.mydomain.com/images/bodycss/pointer.png，新的google.maps.Size（32,32），新的google.maps.Point（28,32））;

这篇关于谷歌地图图像标记没有正确放置在精灵中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！