Javascript 悬停时在弹出窗口中显示地图框数据

我试图在弹出窗口中只显示城市名称和州

这就是我现在拥有的

它将显示所有属性，但由于某种原因，我无法仅隔离城市和州

mapboxgl.accessToken = 'pk.eyJ1IjoiZnJzdHlsc2tpZXIiLCJhIjoiY2swd2p5OXZhMGdidDNlcGZzYXI2N3RrdSJ9.MY-V2IlbfRAWSEAIdXmhlA';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/frstylskier/cknz0hf0u4ega17pe3vpd6e9l'
});

map.on('mousemove', function (e) {
    var features = map.queryRenderedFeatures(e.point);

    // Limit the number of properties we're displaying for
    // legibility and performance
    var displayProperties = [
        'properties',
    ];

    var displayFeatures = features.map(function (feat) {
        var displayFeat = {};
        displayProperties.forEach(function (prop) {
            displayFeat[prop] = feat[prop];
        });
        return displayFeat;
    });

    document.getElementById('features').innerHTML = JSON.stringify(
        displayFeatures,
        null,
        2
    );
    
    
});

---

您只需遵循对象的属性路径即可

而不是

    document.getElementById('features').innerHTML = JSON.stringify(
        displayFeatures,
        null,
        2
    );

使用

let feat=document.getElementById（'features'）；
feat.innerHTML=''；
//获取列表中设置了名称和状态的第一项
让searchResult=displayFeatures.find（v=>{//pin
返回typeof v.properties==“对象”&&
v、 属性&&//避免空错误
v、 物业[“交易：客户城市”]&&
v、 属性[“交易：客户状态”]
})| | displayFeatures.find（v=>{//default
返回typeof v.properties==“对象”&&
v、 属性&&//避免空错误
v、 properties.name&&
v、 properties.state_abbrev
});
//只需将pin名称映射到默认名称
if（searchResult&&searchResult.properties[“交易：客户城市”]）{
searchResult.properties.name=searchResult.properties[“交易：客户城市”]；
searchResult.properties.state_abbrev=searchResult.properties[“交易：客户状态”]；
}
//将值添加到节点内的div
feat.querySelector（“.city”）.innerText=搜索结果？searchResult.properties.name：“不适用”；
feat.querySelector（“.state”）.innerText=搜索结果？searchResult.properties.state_缩写：“不适用”；

displayFeatures[0].properties.name

和

state_abbrev

太棒了，我试着用一个自定义属性重新创建你所说的：客户名称。我尝试过v.properties['Deals:Client City']，但它传递了错误，我如何定位自定义属性？我刚刚意识到这个问题，它在地图上显示的是城市/州，而不是pin。我已经更新了它以首先映射pin。明白了吗，现在只需要将其弹出

    let feat = document.getElementById('features');
    feat.innerHTML = '<div class="city"></div><div class="state"></div>';
    // get the first item in the list, that has name and state_abbrev set
    let searchResult = displayFeatures.find(v => { // pin
        return typeof v.properties == "object" &&
          v.properties && // avoid null errors
          v.properties["Deals: Client City"] &&
          v.properties["Deals: Client State"]
      }) || displayFeatures.find(v => { // default
        return typeof v.properties == "object" &&
          v.properties && // avoid null errors
          v.properties.name &&
          v.properties.state_abbrev
      });
    // just map the pin names to the default names
    if (searchResult && searchResult.properties["Deals: Client City"]) {
      searchResult.properties.name = searchResult.properties["Deals: Client City"];
      searchResult.properties.state_abbrev = searchResult.properties["Deals: Client State"];
    }
    // add the values to the divs inside the node
    feat.querySelector(".city").innerText = searchResult ? searchResult.properties.name : "n/a";
    feat.querySelector(".state").innerText = searchResult ? searchResult.properties.state_abbrev : "n/a";