javascript - 谷歌地图 带有多个标记的多个 map

Question

我正在创建一个简单的位置计划，因此基本上每个谷歌地图都会有一个带有不同标记的不同位置。

因此，假设 googlemap2 = 坐标 A 和 googlemap5 = 坐标 B，我需要每个元素都有一个位于坐标 A 和 B 并居中的标记(分别这样，坐标 B 标记永远不会出现在 googlemap2 中，反之亦然)

到目前为止我的代码是这样的

var map;
var map2;

function initialize(condition) {

//--------------------------------------------------------------------------- TTDI 
if(document.getElementById('googlemap2') !== null){
    var map_canvas = document.getElementById('googlemap2');
    var myLatlng = new google.maps.LatLng(3.140425, 101.632005);
    var mapOptions = {
        center: myLatlng,
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(map_canvas, mapOptions);
    TestMarker(myLatlng, map);
}
//--------------------------------------------------------------------------- CHERAS
if(document.getElementById('googlemap5') !== null){
    var map_canvas2 = document.getElementById('googlemap5');
    var myLatlng2 = new google.maps.LatLng(3.140425, 99.632004);
    var mapOptions2 = {
        center: myLatlng2,
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map2 = new google.maps.Map(map_canvas2, mapOptions2);
    TestMarker(myLatlng2, map2);
}


}


// Testing the addMarker function
function TestMarker(x,y) {

        var marker = new google.maps.Marker({
        position: x,
        map: y
    });
}

基本上它创建了我想要的东西，只是一个烦人的部分，它总是以第一个元素为中心，所以可以说它以 googlemap2 的坐标 A 为中心，googlemap5 将有它的标记，但 map 的中心将关闭。有什么帮助吗？

Answer 1

我会做类似以下的事情来实现您的目标并使类(class)更加灵活。

var Atlas = (function () {

    Atlas = function (name) {
        this.name = name;
    }

    Atlas.prototype = {
        constructMap: function (options) {
            var _this = this;
            this.map = new google.maps.Map(options.canvas, options.mapOptions);
        },

        addMarker: function (center) {
            var _this = this;
            var marker = new google.maps.Marker({
                position: center,
                map: _this.map
            });
        }
    }

    return Atlas;

})();

var mObj1 = {
    canvas: document.getElementById('map1'),
    mapOptions: {
        center: new google.maps.LatLng(3.140425, 101.632005),
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    },
}

var mObj2 = {
    canvas: document.getElementById('map2'),
    mapOptions: {
        center: new google.maps.LatLng(3.140425, 99.632004),
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
}

var atlas = new Atlas("atlas");

atlas.constructMap(mObj1);
atlas.addMarker(mObj1.mapOptions.center);
atlas.constructMap(mObj2);
atlas.addMarker(mObj2.mapOptions.center);

我在这里为您做了一个演示:

http://jsfiddle.net/wKtmg/

祝你好运!