消失的自定义标记 - 谷歌地图 v3

Question

我正在尝试使用自定义标记创建地图。

当高度和宽度都相同时，一切正常。如果我将其中一个更改为更大（2x），则该标记开始表现得很有趣 - 它在地图上部分呈现，它在放大/缩小时消失并重新出现，在某些缩放级别上看起来不错。输入图像都是 128x128，我将它们缩放到 32x32，但我希望其中一些是 64x32

这是添加标记的主要功能（我之前尝试过的东西我注释掉了）：

jQuery(xml).find("marker").each(function(){
var name = jQuery(this).find('name').text();
var address = jQuery(this).find('address').text();

// create a new LatLng point for the marker
var lat = jQuery(this).find('lat').text();
var lng = jQuery(this).find('lng').text();
var twidth = jQuery(this).find('width').text();
var theight = jQuery(this).find('height').text();
var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
var imgPath = jQuery(this).find('icon').text();

var hw = twidth/2;
var hh = theight/2;
var imageForMarker = new google.maps.MarkerImage(
    imgPath,
    null,     //new google.maps.Size(128, 128),
    // The origin for this image is 0,0.
    null,     //new google.maps.Point(0,0),
    // The anchor for this image is at the centre
    null,    //new google.maps.Point(hw, hh),
    // Scaled size
    new google.maps.Size(twidth, theight));

    // extend the bounds to include the new point
    MYMAP.bounds.extend(point);

    var marker = new google.maps.Marker({
            position: point,
            map: MYMAP.map,
            icon: imageForMarker,
            zIndex:0
        });

        citiesArray.push(marker);

        var html='<strong>'+name+'</strong.><br />'+address+'<br><img src="http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=http%3A//maps.google.com/maps%3Fq=%26ll%3D'+lat+'%2C'+lng+'%26z%3D14&chld=H|0">';

        google.maps.event.addListener(marker, 'click', function() {

        if(infoWindow)
            infoWindow.close();
        infoWindow = new google.maps.InfoWindow();

            infoWindow.setContent(html);

            infoWindow.open(MYMAP.map, marker);


        });

        MYMAP.map.fitBounds(MYMAP.bounds);

    });

xml 是这样的：

<?xml version="1.0"?>
<markers>

<marker>
<name>name1</name>
<address></address>
<lat>54.721844</lat>
<lng>17.41024</lng>
<width>32</width>
<height>32</height>
<icon>park2.png</icon>
</marker>

( ...)

<marker>
<name>name2</name>
<address></address>
<lat>50.417408112618686</lat>
<lng>23.491015625</lng>
<width>32</width>
<height>32</height>
<icon>park.png</icon>
</marker>

</markers>

这是 MYEDIT 定义 + 初始化：

变量信息窗口； var MYMAP = { 地图：空， 界限：空， 窗口：空 }

MYMAP.init = function(selector, latLng, zoom) {
var myOptions = {
zoom:zoom,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(jQuery(selector)[0], myOptions);
this.bounds = new google.maps.LatLngBounds();
}

测试台位于：

http://null-zero.com/test/markers/markers.html

重要提示：您必须向下滚动，勾选 CITIES，然后在 GDANSK 附近的地图顶部应该会出现一座城堡 - 它已损坏（城堡的顶部可见），当您放大/缩小时会发生奇怪的事情。

有两个 PlaceMarkers 函数 - 底部的一个使用不同的宽度/高度并且已损坏 (placeMarkersCities)

任何想法是什么导致它以及如何解决它？

Answer 1

你当前的代码是

var twidth = jQuery(this).find('width').text();
var theight = jQuery(this).find('height').text();
...
new google.maps.Size(twidth, theight));

但是Size 需要两个数字。当地图对象输入错误的参数类型时，会发生奇怪的事情。在这种情况下，您只需将部分数据从字符串转换为数字。您不会转换 twidth 和 theight。

我建议在阅读时转换数据

var lat = parseFloat(jQuery(this).find('lat').text());
var lng = parseFloat(jQuery(this).find('lng').text());
var twidth = parseInt(jQuery(this).find('width').text());
var theight = praseInt(jQuery(this).find('height').text()); 

而不是在您使用它时（如在您当前的代码中）

var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));

因为它只完成一次，你不必记住它。