2

カスタムマーカーを使用してマップを作成しようとしています。

高さと幅がすべて同じである場合、すべてが正常に機能します。それらの1つを大きく（2倍）に変更すると、そのマーカーはおかしな動作を開始します-マップ上で部分的にレンダリングされ、ズームイン/ズームアウトすると消えて再表示されます。一部のズームレベルでは問題ないように見えます。入力画像はすべて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 = {マップ：null、境界：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の近くに城が表示されます。城は壊れており（城の上部が表示されています）、ズームイン/ズームアウトすると奇妙なことが起こります。

2つのPlaceMarkers関数があります-一番下の関数は異なる幅/高さを使用し、壊れています（placeMarkersCities）

それを引き起こす原因とそれを修正する方法はありますか？

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、2つの数字が必要です。マップオブジェクトに間違ったパラメータタイプが供給されると、奇妙なことが起こることが知られています。この場合、一部のデータのみを文字列から数値に変換します。変換せず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 に答える