个人中心
gpt4 book ai didi

javascript - Mapbox向 map 添加图层，通过添加图层出现错误

转载 作者：行者123 更新时间：2023-12-02 22:42:11 25 4
gpt4 key购买 nike

我收到此错误:

enter image description here

对于此代码:

 map.on('load', function () {
              map.addLayer({'type': 'scattermapbox', 
                  'mode': 'markers', 
                  'text': ['Census Tract:304.01<br> Predicted Growth Rank:1.0<br> Year: 2017 '], 
                  'marker': {'size': 1, 'color': ['rgba(247, 251, 255, 255)'], 
                  'colorscale': [[0.0, 'rgba(8, 48, 107, 255)'], [0.05263157894736842, 'rgba(8, 48, 107, 255)'], [0.10526315789473684, 'rgba(8, 48, 107, 255)'],
                          [0.15789473684210525, 'rgba(8, 48, 107, 255)'], [0.21052631578947367, 'rgba(8, 48, 107, 255)'], [0.2631578947368421, 'rgba(8, 48, 107, 255)'],
                          [0.3157894736842105, 'rgba(8, 48, 107, 255)'], [0.3684210526315789, 'rgba(8, 48, 107, 255)'], [0.42105263157894735, 'rgba(8, 48, 107, 255)'],
                          [0.47368421052631576, 'rgba(8, 48, 107, 255)'], [0.5263157894736842, 'rgba(8, 48, 107, 255)'], [0.5789473684210527, 'rgba(8, 48, 107, 255)'],
                          [0.631578947368421, 'rgba(8, 48, 107, 255)'], [0.6842105263157894, 'rgba(8, 48, 107, 255)'], [0.7368421052631579, 'rgba(8, 48, 107, 255)'],
                          [0.7894736842105263, 'rgba(8, 48, 107, 255)'], [0.8421052631578947, 'rgba(8, 48, 107, 255)'], [0.894736842105263, 'rgba(8, 48, 107, 255)'],
                          [0.9473684210526315, 'rgba(8, 48, 107, 255)'], [1.0, 'rgba(8, 48, 107, 255)']], 
                  'opacity': 0, 
                  'cmin': 1.0, 
                  'cmax': 1.0, 
                  'showscale': False},
                  'showlegend': False, 
                  'lon': [-122.77720976814757],
                  'lat': [45.47996783203806],
                  'hoverinfo': 'text'}
                ),
                map.Scattermapbox({
                  'lat': [45.48553],
                  'lon': [-122.77518],
                  'marker': {'color': 'rgb(231, 41, 74)', 'size': 9},
                  'mode': 'markers',
                  'showlegend': False,
                  'text': ['9555 SW DUNCAN LN']
                });                
            });

我应该得到这个:

enter image description here

相反，我得到了这个:

enter image description here

为了完整起见，以下是整个代码:

<!DOCTYPE html>
<html lang="en">

<% include includes/header.html %>

<body>

  <div class="d-flex" id="wrapper">

    <!-- Sidebar -->
    <% include includes/sidebar.html %>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div style="background-color:  #202D56  ;" id="page-content-wrapper">
      <% include includes/navbar.html %>
      <div class="container-fluid">
        <div id="div_page_gaea">
         <div style="background-color:#192544;"><font color="white"><h4><h2> <b> 
           <img class="logo" src="/images/GAEA-logo.png" alt="" width="100" height="100"> DELPHI </b>- Demographic Effect Leading 
         Predictor (for) Housing Indices</h2> </h4></div>
          <!-- <button id="g_button" type="button" class="btn-primary">Click me</button> -->
          <!-- Start adding HTML HERE -->
          <div class="form-group" style="text-align: center">
            <label for="select-variable" >ENTER AN ADDRESS | SEPARATE MULTIPLE ADDRESSES BY SEMICOLONS (;):</label>
              <input id="address_text" class="form-control col-sm-12" placeholder="9555 SW Duncan Ln, Beaverton, OR 97005" 
              style="text-align: center">
          </div>
          <div class="form-group col-sm-3" >
              <label for="select-variable" >CHOOSE YOUR VARIABLE:</label>
              <select class="form-control" id="mapping_variable" style="text-align: center">
                <option value="">Predicted Growth Rank</option>
              </select>
            </div>
          <div class="form-group col-sm-3">
              <label for="select-variable">DATA YEAR FOR DISPLAY:</label>
              <select class="form-control" id="year_end" style="text-align: center">
                <option value="">2017</option>
                <option value="">2016</option>
                <option value="">2015</option>
                <option value="">2014</option>
                <option value="">2013</option>
                <option value="">2012</option>
              </select>
            </div>
          <div class="form-group col-sm-3">
              <label for="select-variable">BENCHMARK YEAR:</label>
              <select class="form-control" id="year_start" style="text-align: center">
                <option value="">2012</option>
                <option value="">2013</option>
                <option value="">2014</option>
                <option value="">2015</option>
                <option value="">2016</option>
              </select>
          </div>
          <p><button type="button" class="btn btn-primary col-sm-3" id="submit" >SUBMIT AND RUN</button></p>
          <p><button type="button" class="btn btn-success col-sm-3" id="download_excel">DOWNLOAD EXCEL (First address only)</button></p>
          <div class="container">
          <div class="row">  
          <title></title>

          <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
          <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'></script>
          <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' />
          <style>
            body {
              margin: 0;
              padding: 0;
            }

            #map {
              position: absolute;
              top: 1.0;
              bottom: 0;
              right:0.0;
              left:1.0;
              height:70%;
              width: 60%;
            }
          </style>

          <div id='map'></div>
            <script>


            </script>
            </div>
          </div>
      </div>
    </div>
    <!-- /#page-content-wrapper --

  </div>
  <!-- /#wrapper -->

  <!-- Bootstrap core JavaScript -->
  <script src="/vendor/jquery/jquery.min.js"></script>
  <script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <script>
            // add the JavaScript here
            mapboxgl.accessToken = 'pk.eyJ1IjoibXdlaXNzYXNwZW4iLCJhIjoiY2sxdG96ZWhiMG04ZDNncW1yYnY1Zm45byJ9.gbFJEsL3BuxGhWjDSh3kvw';
            var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v10',
            center: [-122.662323, 45.523751], // starting position
            zoom: 12
            });

            map.on('load', function () {
              map.addLayer({'type': 'scattermapbox', 
                  'mode': 'markers', 
                  'text': ['Census Tract:304.01<br> Predicted Growth Rank:1.0<br> Year: 2017 '], 
                  'marker': {'size': 1, 'color': ['rgba(247, 251, 255, 255)'], 
                  'colorscale': [[0.0, 'rgba(8, 48, 107, 255)'], [0.05263157894736842, 'rgba(8, 48, 107, 255)'], [0.10526315789473684, 'rgba(8, 48, 107, 255)'],
                          [0.15789473684210525, 'rgba(8, 48, 107, 255)'], [0.21052631578947367, 'rgba(8, 48, 107, 255)'], [0.2631578947368421, 'rgba(8, 48, 107, 255)'],
                          [0.3157894736842105, 'rgba(8, 48, 107, 255)'], [0.3684210526315789, 'rgba(8, 48, 107, 255)'], [0.42105263157894735, 'rgba(8, 48, 107, 255)'],
                          [0.47368421052631576, 'rgba(8, 48, 107, 255)'], [0.5263157894736842, 'rgba(8, 48, 107, 255)'], [0.5789473684210527, 'rgba(8, 48, 107, 255)'],
                          [0.631578947368421, 'rgba(8, 48, 107, 255)'], [0.6842105263157894, 'rgba(8, 48, 107, 255)'], [0.7368421052631579, 'rgba(8, 48, 107, 255)'],
                          [0.7894736842105263, 'rgba(8, 48, 107, 255)'], [0.8421052631578947, 'rgba(8, 48, 107, 255)'], [0.894736842105263, 'rgba(8, 48, 107, 255)'],
                          [0.9473684210526315, 'rgba(8, 48, 107, 255)'], [1.0, 'rgba(8, 48, 107, 255)']], 
                  'opacity': 0, 
                  'cmin': 1.0, 
                  'cmax': 1.0, 
                  'showscale': False},
                  'showlegend': False, 
                  'lon': [-122.77720976814757],
                  'lat': [45.47996783203806],
                  'hoverinfo': 'text'}
                ),
                map.Scattermapbox({
                  'lat': [45.48553],
                  'lon': [-122.77518],
                  'marker': {'color': 'rgb(231, 41, 74)', 'size': 9},
                  'mode': 'markers',
                  'showlegend': False,
                  'text': ['9555 SW DUNCAN LN']
                });                
            });



            $( "#submit" ).on( "click", function() {
              alert("HEEEEELLLLLLLOOOOOOOOOO!!!!!!!!!!!!!!");
            });
  </script>

</body>


</html>

这是 server.js 脚本:

const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();
const port = process.env.PORT || 80;
const server = process.env.SERVER || 'pa-dev-1.flanderscapital.com';
const bodyParser = require('body-parser')

// default options
app.use(fileUpload());

// set the view engine to ejs
app.set('view engine', 'ejs');

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json
app.use(bodyParser.json())

app.use(express.static(__dirname + '/public'));

var routes = require('./app/routes')(app);


app.listen(port, server, () => console.log(`PA Tools Server listening on port ${port}!`))

// Get image of GAEA logo
var publicDir = require('path').join(__dirname, 'public');
app.use(express.static(publicDir));

任何有关修复上述错误的建议都会有所帮助。

我采纳了答案所提供的建议，将 False 更改为 false。但现在我遇到了这些错误:

enter image description here

最佳答案

关于javascript - Mapbox向 map 添加图层，通过添加图层出现错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58549247/

25 4 0
文章推荐： javascript - Discord API 对于使用机器人 token 的所有查询返回 401
文章推荐： javascript - 传递一个函数
文章推荐： javascript - next.js + Webpack + CSS => SyntaxError : Unexpected token .(点)= 如何修复？
文章推荐： javascript - 如何让我的搜索栏完成搜索
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com