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 回答
0

API v3 中地图类的 setCenter 函数只接受一个参数，即 LatLng 对象以使其居中。您传入两个参数，因此出现错误：

map.setCenter(newCentre,zlevel);

您可能只想这样做：

map.setCenter(newCentre);
于 2013-11-13T16:20:01.303 回答
0

在函数recentre map 是未定义的，因为在函数初始化你重新声明地图改变这个：

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

在

map = new google.maps.Map(document.getElementById('google_div'),mapOptions);
于 2013-11-13T16:22:20.673 回答
0

函数创建标记

在调用 createMarker 后，实例化超出范围并在功能块中本地销毁的 GMarker 实例。

当您使用对象字面量实例化 GMarker 时，您需要在调用 GMarker 的构造函数原型时构造 GIcon。

这适用于版本 2。

于 2013-11-13T21:08:09.003 回答