Question

我正在使用Mapbox GL地图，类似于Leaflet或OpenLayers。对于这种情况，我允许在地图上单击以激活具有来自该地图元素的属性的文本的弹出窗口。我希望此单击还可以更新变量img_start，该变量包含街道级视图中图像的键。我在<script></script>内的<body>内有以下代码。 map元素位于<div id="map">内，变量img_start位于<div id="mly">内。所以我想点击地图来更新img_start变量，然后刷新mly div。我怎样才能做到这一点，我做错了什么？

具体代码我指的是：

  map.on('click', function (e) {
  //change img_start variable, right now just a test to see if the new value will load
  img_start = 'lGQKs30MWMrNJnTjDz-2Ig';
  //refresh the 'mly' div so the new start image appears
  $("#mly").load(location.href + " #mly");
    var features = map.queryRenderedFeatures(e.point, { layers: ['parcels-layer'] });
    if (!features.length) {
        return;
    };

    var feature = features[0];

    var popup = new mapboxgl.Popup()
        .setLngLat(map.unproject(e.point))
        //displays the TaxIDNum of the parcel
        .setHTML(feature.properties.TaxIDNum)
        .addTo(map);
});

// Indicate that the symbols are clickable by changing the cursor style
map.on('mousemove', function (e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['parcels-layer'] });
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
});

我的HTML文档的完整代码，底部是图像查看器：

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Kelleys Island Parcels Demo</title>
<meta content='initial-scale=1,maximum-scale=1,user-scalable=no' name=
'viewport'>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.24.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.24.0/mapbox-gl.css' rel='stylesheet' />
<script src="jquery-1.12.4.min.js"></script>
<link href=
"https://npmcdn.com/mapillary-js@1.4.1/dist/mapillary-js.min.css" rel=
"stylesheet">
<style>
     body {
         width: 1350px;
         height: 480px;
         background-color: black;

     }

     a:link{
       color: ##e60000;
       text-decoration: none
     }
     a:visited{
       color: ##e60000;
       text-decoration: none
     }
     a:hover{
       color: ##e60000;
       text-decoration: none
     }
     a:active{
       color: orange;
       text-decoration: none
     }
     .title {
       color: white;
       font-family: "Century Gothic";
       font-size: 24px;
       text-align: center;
       font-weight: bolder;
     }
     .intro {
       color: white;
       font-family: "Century Gothic";
       font-size: 14px;
       text-align: center;
     }
     .mly-wrapper {
         position: relative;
         background-color: grey;
         width: 100%;
         height: 100%;
     }

     .mapillary-js {
         position: relative;
         height: 100%;
         width: 50%;
     }

     #map {
         position: absolute;
         width: 50%;
         top: 0;
         right: 0;
         bottom: 0;
         z-index: 100;
     }
     .mapboxgl-popup {
         max-width: 400px;
         font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
     }
</style>
</head>
<body>
<div class="title">
    Kelleys Island Parcels
</div>
<div class="intro">
    <br>
  Placeholder info
</div><br>
<div class="mly-wrapper">
    <div id='mly'></div>
    <div id='map'></div>
</div><button onclick="play()">Play</button><button onclick=
"stop()">Stop</button>
<script src=
"https://npmcdn.com/mapillary-js@1.4.1/dist/mapillary-js.min.js">
</script>
<script>
window.img_start = 'KXPQhn74azgtjJYcrGK-Fw';
mapboxgl.accessToken = 'pk.eyJ1IjoiY2JlZGRvdyIsImEiOiI5Q09YRG1RIn0.Izu6OPJ4CEEaSSpGuys3Xg';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-82.69965,41.60116],
    zoom: 12
});



map.on('load', function () {
    map.addSource('parcels', {
        'type': 'geojson',
        'data': 'https://gist.githubusercontent.com/cbeddow/0bb1a957326cab0aec649e0dea3b978d/raw/f1069a486982efd0898cb915a7f39284fdd43321/kelleys_island.geojson'
    });

    // Add a layer showing the parcel polygons.
    map.addLayer({
        'id': 'parcels-layer',
        'type': 'fill',
        'source': 'parcels',
        'source-layer': 'parcels-layer',
        'paint': {
            'fill-color': 'rgba(200, 100, 240, 0.4)',
            'fill-outline-color': 'rgba(200, 100, 240, 1)'
        }
    });
});


// When a click event occurs on a polygon, open a popup at the location of
// the feature, with description HTML from its properties.
map.on('click', function (e) {
  //change img_start variable, right now just a test to see if the new value will load
  img_start = 'lGQKs30MWMrNJnTjDz-2Ig';
  //refresh the 'mly' div so the new start image appears
  $("#mly").load(location.href + " #mly");
    var features = map.queryRenderedFeatures(e.point, { layers: ['parcels-layer'] });
    if (!features.length) {
        return;
    };

    var feature = features[0];

    var popup = new mapboxgl.Popup()
        .setLngLat(map.unproject(e.point))
        //displays the TaxIDNum of the parcel
        .setHTML(feature.properties.TaxIDNum)
        .addTo(map);
});

// Indicate that the symbols are clickable by changing the cursor style
map.on('mousemove', function (e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['parcels-layer'] });
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
});


         var mly = new Mapillary.Viewer('mly',
             'UTZhSnNFdGpxSEFFREUwb01GYzlXZzpkMWM2YzdjYjQxN2FhM2Vh',  // ClientID 
             img_start, {cover: true, cache: false, direction: false});

</script>
</body>
</html>

使用jQuery更新变量值，基于地图点击？

0 个答案: