0

我正在尝试为谷歌地图脚本创建一个包装对象，但由于某种原因它似乎不起作用 - 有人可以看看下面的代码并告诉我我做错了什么吗？

var cmdMapObject = {
canvas : 'map-canvas',
latLng : '-25.344, 131.036',
zoom : 14,
myLocation : '',
poly : '',
map : '',
markers : [],
path : '',
addPoint : function(event) {
    "use strict";

    // add the latitude and longitute to array after the last item
    cmdMapObject.path.insertAt(cmdMapObject.path.length, event.latLng);


    // create new marker
    var marker = new google.maps.Marker({
        position: event.latLng,
        map: cmdMapObject.map,
        draggable: true
    });


    // add new marker to the array
    cmdMapObject.markers.push(marker);


    // set tooltip title to the marker
    marker.setTitle("#" + cmdMapObject.path.length);


    // remove marker on click
    google.maps.event.addListener(marker, 'click', function() {

            // remove marker from the map
            marker.setMap(null);

            // remove location from array and path
            for (var i = 0, ml = cmdMapObject.markers.length; i < ml && cmdMapObject.markers[i] != marker; ++i) {
                cmdMapObject.markers.splice(i, 1);
                cmdMapObject.path.removeAt(i);
            }
        }
    );


    // add listener to draggend event to change the position of the marker
    // when dragging has ended
    google.maps.event.addListener(marker, 'dragend', function() {
        for (var i = 0, ml = cmdMapObject.markers.length; i < ml && cmdMapObject.markers[i] != marker; ++i) {
            var thisNewPosition = marker.getPosition();
            cmdMapObject.markers[i]['position'] = thisNewPosition;
            cmdMapObject.path.setAt(i, thisNewPosition);
        }
    });

},
initialize : function() {

    "use strict";

    cmdMapObject.path = new google.maps.MVCArray;

    cmdMapObject.myLocation = new google.maps.LatLng(cmdMapObject.latLng);

    cmdMapObject.map = new google.maps.Map(document.getElementById(cmdMapObject.canvas), {
        zoom: cmdMapObject.zoom,
        center: cmdMapObject.myLocation,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    cmdMapObject.poly = new google.maps.Polygon({
        strokeWeight: 3,
        fillColor: '#5555FF'
    });

    cmdMapObject.poly.setMap(cmdMapObject.map);
    cmdMapObject.poly.setPaths(new google.maps.MVCArray(cmdMapObject.path));

    google.maps.event.addListener(cmdMapObject.map, 'click', cmdMapObject.addPoint);

},
mapInit : function() {
    "use strict";
    google.maps.event.addDomListener(window, 'load', cmdMapObject.initialize);
}
};
cmdMapObject.mapInit();

我得到的是左侧的缩放滑块、地图/卫星按钮和底部的版权声明，但没有地图。

4

2 回答 2

0

问题是：

latLng : '-25.344, 131.036'

这是一个字符串。它应该是一个 google.maps.LatLng 对象。然后当你在这里使用它时：

cmdMapObject.myLocation = new google.maps.LatLng(cmdMapObject.latLng);

您要么需要将其从字符串转换为两个数字（-25.344、131.036），要么只需将其设置为 google.maps.LatLng 对象：

cmdMapObject.myLocation = cmdMapObject.latLng;

工作示例

于 2013-07-20T20:33:36.083 回答
0

好的 - 我已经想通了 - 我使用了构造方法而不是文字对象：

function cmdMapObject() {

    var thisObj = this;

    var canvas = 'map-canvas';
    var latLng = [ '-25.344', '131.036' ];
    var zoom = 14;
    var myLocation = null;
    var poly = null;
    var map = null;
    var markers = [];
    var path = new google.maps.MVCArray;

    this.addPoint = function(event) {
        "use strict";

        // add the latitude and longitute to array after the last item
        path.insertAt(path.length, event.latLng);


        // create new marker
        var marker = new google.maps.Marker({
            position: event.latLng,
            map: map,
            draggable: true
        });


        // add new marker to the array
        markers.push(marker);


        // set tooltip title to the marker
        marker.setTitle("#" + path.length);

        // remove marker on click
        google.maps.event.addListener(marker, 'click', function() {

            // remove marker from the map
            marker.setMap(null);

            // remove location from array and path
            for (var i = 0, I = markers.length; i < I && markers[i] != marker; ++i);
                markers.splice(i, 1);
                path.removeAt(i);


        });


        // add listener to draggend event to change the position of the marker
        // when dragging has ended
        google.maps.event.addListener(marker, 'dragend', function() {
            for (var i = 0, I = markers.length; i < I && markers[i] != marker; ++i);
                var thisNewPosition = marker.getPosition();
                markers[i]['position'] = thisNewPosition;
                path.setAt(i, thisNewPosition);
        });

    };


    this.initialize = function() {

        "use strict";

        myLocation = new google.maps.LatLng(latLng[0], latLng[1]);

        map = new google.maps.Map(document.getElementById(canvas), {
            zoom: zoom,
            center: myLocation,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        poly = new google.maps.Polygon({
            strokeWeight: 3,
            fillColor: '#5555FF'
        });

        poly.setMap(map);
        poly.setPaths(new google.maps.MVCArray([path]));


        // bind the click event to the map to trigger polygon drawing
        google.maps.event.addListener(map, 'click', function(event) {
            thisObj.addPoint(event);
        });

    };


    this.mapInit = function() {
        "use strict";
        google.maps.event.addDomListener(window, 'load', function() {
            thisObj.initialize();
        });
    }

};

var mapPolygon = new cmdMapObject();
mapPolygon.mapInit();

感谢所有参与 - 仍然不知道谁投了反对票 - 我的意思是认真的 - 如果我知道我不会问。

于 2013-07-20T21:19:28.007 回答