Javascript 如何在node.js中打开mapbox映射html_Javascript_Html_Node.js_Mapbox

Javascript 如何在node.js中打开mapbox映射html

javascript html node.js mapbox

Javascript 如何在node.js中打开mapbox映射html,javascript,html,node.js,mapbox,Javascript,Html,Node.js,Mapbox,我正在使用mapbox api。我最终希望在node.js服务器中显示mapbox地图只有包含文本的html才起作用，包含地图脚本的html不起作用我如何解决这个问题（示例-index.html可以工作，但mapWeb.html在index.js中不工作） [index.js] var http=require（'http'）； var fs=需要（'fs'）； createServer（函数（请求、响应）{ request.on（'readable'，function（）{ reque

我正在使用mapbox api。我最终希望在node.js服务器中显示mapbox地图

只有包含文本的html才起作用，包含地图脚本的html不起作用

我如何解决这个问题

（示例-index.html可以工作，但mapWeb.html在index.js中不工作）

[index.js]
var http=require（'http'）；
var fs=需要（'fs'）；
createServer（函数（请求、响应）{
request.on（'readable'，function（）{
request.read（）；//扔掉数据
});
request.on（'end'，function（）{
书面答复（200{
“内容类型”：“文本/html”
});
write（fs.readFileSync（“./index.html”）；
response.end（'Hello HTTP！'）；
});
}).听（8080）；
[index.html]
测试页
Hello节点服务器路由正在工作。
[mapWeb.html]
身体{
保证金：0；
填充：0；
}
#地图{
位置：绝对位置；
排名：0；
底部：0；
宽度：100%；
}
mapboxgl.accessToken='pk.eyj1ijoiamhqagpootylcjhijoi2oxagpjmjf2mdayddj2b2f5cxflm3qwyij9.CDgM2v_KGqdegjs-bK-Cnw'；
var map=new mapboxgl.map({
容器：'映射'，//容器id
风格：'mapbox://styles/mapbox/streets-v9“，//样式表位置
中心：[-74.50,40]，//起始位置
缩放：9//开始缩放
});

不起作用

-浏览器开发人员工具控制台中有任何有用的信息吗？正在等待127.0.0.1的响应。我认为createServer不起作用。您的“服务器”执行此

response.write（fs.readFileSync（“./index.html”）对于每个看起来像的请求
[index.js]
    var http = require('http');
    var fs = require('fs');

    http.createServer(function (request, response) {

        request.on('readable', function () {
            request.read(); // throw away the data
        });

        request.on('end', function () {

            response.writeHead(200, {
                'Content-Type': 'text/html'
            });
            response.write(fs.readFileSync("./index.html"));

            response.end('Hello HTTP!');
        });

    }).listen(8080);

[index.html]
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Test Page</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        Hello Node Server Routing Is Working.
    </body>
    </html>


[mapWeb.html]
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
        <script src='C:\Users\YJH\Documents\Visual Studio 2017\Projects\mapServerTest\mapServerTest\node_modules\mapbox-gl\dist\mapbox-gl.js'></script>
        <link href='C:\Users\YJH\Documents\Visual Studio 2017\Projects\mapServerTest\mapServerTest\node_modules\mapbox-gl\dist\mapbox-gl.css' rel='stylesheet' />
        <style>
            body {
                margin: 0;
                padding: 0;
            }

            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }
        </style>
    </head>
    <body>

        <div id='map'></div>
        <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiamhqaGpoOTYiLCJhIjoiY2oxaGpjMjF2MDAydDJ2b2F5cXFlM3QwYiJ9.CDgM2v_KGqdegjs-bK-Cnw';
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
        center: [-74.50, 40], // starting position
        zoom: 9 // starting zoom
    });
        </script>

    </body>
    </html>