2

I am trying to create a map with custom markers.

When heights and widths are all the same, everything works fine. If I change one of them to be bigger (2x), that marker starts to behave funny - it's partially rendered on map, it disappears and reappears when zooming in/out, on some zoom levels it looks ok. Input images are all 128x128, I am scaling them to 32x32 but i would like some of them to be 64x32

Here's main function for adding markers (I commented out things that I tried before):

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 is this:

<?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>

here's MYEDIT definition + initialization:

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

test bed is at:

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

IMPORTANT: you have to scroll down, tick CITIES, then at the top of the map near GDANSK a castle should appear - it's broken (top part of the castle is visible), strange things happen when you zoom in/out.

There are two PlaceMarkers functions - the bottom one uses different width/height and is broken (placeMarkersCities)

Any ideas what causes it and how to fix it?

4

1 回答 1

3

您当前的代码是

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

但Size需要两个Numbers。当地图对象输入错误的参数类型时，会发生奇怪的事情。在这种情况下，您只需将部分数据从字符串转换为数字。你不转换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));

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

于 2012-06-10T13:08:05.103 回答