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 infoWindow; var MYMAP = { map：null， bounds：null， iWindow：null }

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));

因为它已经完成了一次，你不必记住它。

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

1 个答案: