0

Google Maps API v2 から v3 への移行に問題があります。

マップを表示できますが、データベースから提供された検索結果に基づいてマーカーを表示しようとすると、マップが機能しなくなります。「メソッドsetCenterを呼び出せません」というエラーが表示されます

誰かがそれを手伝ってくれますか? ありがとうございました。

オリジナル：

    <script type="text/javascript">
        var points =new Array();
        var pointtexts =new Array();
        var pointflags =new Array();
        var map, bounds;
        var baseIcon = new GIcon();
        baseIcon.shadow = "flag_shadow_small.png";
        baseIcon.iconSize = new GSize(11, 25);
        baseIcon.shadowSize = new GSize(13, 27);
        baseIcon.iconAnchor = new GPoint(5, 12);
        baseIcon.infoWindowAnchor = new GPoint(11, 2);
        baseIcon.infoShadowAnchor = new GPoint(11, 2);

        function createMarker(point, detail, paidFlag) {
            var markIcon = new GIcon(baseIcon);
            if (paidFlag) {
                markIcon.image = "flag_blue_small.png";
            }
            else {
                markIcon.image = "flag_black_small.png";
            }
            var marker = new GMarker(point, {icon:markIcon});                   
            GEvent.addListener(marker,"click", function() {
                map.openInfoWindowHtml(point, detail+"<br/>");
            });
            bounds.extend(point);
            return marker;
        }

        function showAddress(point, propdetail, paidFlag) {
            if (!point) {
                alert(point + " not found");
            } else {
                var pointarray = point.split(",");
                var latlng = new GLatLng(pointarray[0],pointarray[1]);
                map.addOverlay(createMarker(latlng, propdetail, paidFlag));
                recentre(points.length);
            }
        }

        function recentre(items) {
            var zlevel, newCentre, place;
            place = items + 1;
            if (items==1){
                zlevel=10;

            }
            else{
                zlevel=map.getBoundsZoomLevel(bounds);
            }
            newCentre = bounds.getCenter();
            map.setCenter(newCentre,zlevel);
            map.savePosition();
        }           

        // Call this function when the page has been loaded
        function initialize() {
            if (GBrowserIsCompatible()) {
                bounds = new GLatLngBounds();
                map = new GMap2(document.getElementById("google_div"));
                map.addControl(new GLargeMapControl());
                map.addControl(new GOverviewMapControl());
                map.addControl(new GMapTypeControl());
                map.enableDoubleClickZoom();
                map.setCenter(new GLatLng(56.866991,-4.185791), 6);
                for (var singlepoint in points) {
                    showAddress(points[singlepoint], pointtexts[singlepoint], pointflags[singlepoint]);
                }
            }               
        }

私の修正：

<script type="text/javascript">
        var points =new Array();
        var pointtexts =new Array();
        var pointflags =new Array();
        var map, bounds;
        var baseIcon = new google.maps.MarkerImage();
        baseIcon.shadow = "flag_shadow_small.png";
        baseIcon.iconSize = new google.maps.Size(11, 25);
        baseIcon.shadowSize = new google.maps.Size(13, 27);
        baseIcon.iconAnchor = new google.maps.Point(5, 12);
        baseIcon.infoWindowAnchor = new google.maps.Point(11, 2);
        baseIcon.infoShadowAnchor = new google.maps.Point(11, 2);

        function createMarker(point, detail, paidFlag) {
            var markIcon = new google.maps.MarkerImage(baseIcon);
            if (paidFlag) {
                markIcon.image = "flag_blue_small.png";
            }
            else {
                markIcon.image = "flag_black_small.png";
            }
            var marker = new google.maps.Marker(point, {icon:markIcon});                    
            google.maps.event.addListener(marker,"click", function() {
                map.openInfoWindowHtml(point, detail+"<br/>");
            });
            bounds.extend(point);
            return marker;
        }


        function showAddress(point, propdetail, paidFlag) {
            if (!point) {
                alert(point + " not found");
            } else {
                var pointarray = point.split(",");
                var latlng = new google.maps.LatLng(pointarray[0],pointarray[1]);
                /*map.addOverlay(createMarker(latlng, propdetail, paidFlag));*/
                /*createMarker.setMap(latlng, propdetail, paidFlag);*/
                overlay = new createMarker(latlng, propdetail, paidFlag);
                recentre(points.length);
            }
        }


        function recentre(items) {
            var zlevel, newCentre, place;
            place = items + 1;
            if (items==1){
                zlevel=10;

            }
            else{
                /*zlevel=map.getBoundsZoomLevel(bounds);*/
                zlevel=new google.maps.LatLngBounds();
            }
            newCentre = bounds.getCenter();
            /*map.setCenter(newCentre,zlevel);*/
            map.setCenter(newCentre,zlevel);
            map.savePosition();
        }


    function initialize() {
        bounds = new google.maps.LatLngBounds();
            var mapOptions = {
                zoom: 6,
                center: new google.maps.LatLng(56.866991,-4.185791),
                panControl: true,
                zoomControl: true,
                scaleControl: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            for (var singlepoint in points) {
            showAddress(points[singlepoint], pointtexts[singlepoint], pointflags[singlepoint]);
            }

            var map = new google.maps.Map(document.getElementById('google_div'),mapOptions);

            setMarkers(map, point, detail, paidFlag);       
    }


google.maps.event.addDomListener(window, 'load', initialize);

ありがとうございました。

4

4 に答える 4

0

作業コードは次のとおりです。

<script type="text/javascript">
        var points =new Array();
        var pointtexts =new Array();
        var pointflags =new Array();
        var map, bounds;

        function createMarker(point, detail, paidFlag) {
            var flagURL;
            if (paidFlag) {
                flagURL = 'flag_blue_small.png';
            }
            else {
                flagURL = 'flag_black_small.png';
            }

            var infowindow = new google.maps.InfoWindow({
                content: detail 
            });

            var image = {
                url: flagURL,
                size: new google.maps.Size(11, 25),
                origin: new google.maps.Point(0,0),
                anchor: new google.maps.Point(11, 25)
            };

            var marker = new google.maps.Marker({
                position: point,
                map: map,
                icon: image,
                shadow: 'flag_shadow_small.png',
                title:''
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });
            bounds.extend(point);
            marker.setMap(map);
        }

        function showAddress(point, propdetail, paidFlag) {
            if (!point) {
                alert(point + " not found");
            } else {
                var pointarray = point.split(",");
                var latlng = new google.maps.LatLng(pointarray[0],pointarray[1]);
                createMarker(latlng, propdetail, paidFlag);
                recentre(points.length);
            }
        }

        function recentre(items) {
            var zlevel, newCentre, place;
            place = items + 1;
            if (items==1){
                zlevel=10;
                map.setZoom(zlevel);
            }
            else{
                //map.panToBounds(bounds);
                map.fitBounds(bounds);
            }
            newCentre = bounds.getCenter();
            map.setCenter(newCentre);
            //map.setZoom(zlevel);
        }

    function initialize() {
        bounds = new google.maps.LatLngBounds();
            var mapOptions = {
                zoom: 7,
                center: new google.maps.LatLng(56.866991,-4.185791),
                panControl: true,
                zoomControl: true,
                scaleControl: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            map = new google.maps.Map(document.getElementById('google_div'),mapOptions);  

            for (var singlepoint in points) {
            showAddress(points[singlepoint], pointtexts[singlepoint], pointflags[singlepoint]);
            }
    }

google.maps.event.addDomListener(window, 'load', initialize);

于 2013-11-15T14:05:47.643 に答える