javascript - 如何使用面向对象的javascript调用谷歌地图API？

Question

使用 2 个 API(Google map 和 JCdecaux)构建网络应用。我使用 Google 获取可以放置标记的 map 。标记的位置是从第二个 API (JSDecaux) 获取的。我的代码运行良好，但我想使用类、构造函数和参数使其更加面向对象。我希望我的 html 目标在参数中有 map 的地方。

html

<div id="map"></map>

工作中的js

var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'),
       {
        center: {lat: 45.764043, lng: 4.835659},
        zoom: 14
    });     
}

window.onload = function(){
    initMap(); 
}; 

function request (url) {
    return new Promise(function (resolve, reject) {
        const req = new window.XMLHttpRequest();
        req.onreadystatechange = function() {
            if (req.readyState === 4) {
                if (req.status === 200) {
                   resolve(req.responseText);
                }
                else {
                   reject(req);
                }
            }
        }

    req.open("GET", url);
    req.send();       
    });    
}

const getInfos = function() {
    return new Promise(function(resolve, reject) {
        request("https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=myKey").then (function (response) {  
            const data = JSON.parse(response);
            resolve(data);
        }).catch(function(error){
            console.log(error);
        })
    })
};

const stationsTab = [];

getInfos().then(function(data) {
    data.forEach(function(info) {
            const station =
                {
                    stationName : info.name,
                    stationLocation : info.position,
                 };

            stationsTab.push(station);

            mark = new google.maps.Marker
            ({
                map : map,
                position : station.stationLocation,
                name : station.stationName,
                icon : 'images/bluemarker.png'
            });

            google.maps.event.addListener(mark, "click", function() {

              alert('something')
            });

        })

})

我想做什么

class Createmap {
    constructor(target) {
         this.target = document.getElementById(target);
         this.allFunctions()
    }

    allFunctions() {
    }

}

像这样运行

let newCreatemap = new Createmap("map")

Answer 1

未经测试，但它应该看起来像:

let mapObj;
var map;


window.onload = function(){
    mapObj = new Createmap(map);
}; 

class Createmap {
    constructor(target) {
         this.target = document.getElementById(target);
         this.map = new google.maps.Map(document.getElementById('map'),
         {
          center: {lat: 45.764043, lng: 4.835659},
          zoom: 14
      });
         this.stationsTab = [];    
         this.loadData();
    }

    loadData = () => getInfos().then(function(data) {
        data.forEach((info) => {
                const station =
                    {
                        stationName : info.name,
                        stationLocation : info.position,
                     };

                this.stationsTab.push(station);

                mark = new google.maps.Marker
                ({
                    map : this.map,
                    position : station.stationLocation,
                    name : station.stationName,
                    icon : 'images/bluemarker.png'
                });

                google.maps.event.addListener(mark, "click", function() {

                  alert('something')
                });

            })

    })

     request = (url) =>
        new Promise(function (resolve, reject) {
            const req = new window.XMLHttpRequest();
            req.onreadystatechange = function() {
                if (req.readyState === 4) {
                    if (req.status === 200) {
                       resolve(req.responseText);
                    }
                    else {
                       reject(req);
                    }
                }
            }

        req.open("GET", url);
        req.send();       
        });

        getInfos = () =>
            new Promise(function(resolve, reject) {
                request("https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=myKey").then (function (response) {  
                    const data = JSON.parse(response);
                    resolve(data);
                }).catch(function(error){
                    console.log(error);
                })
            });

}