我试图开发一个网络地图界面，使我能够选择基本地图样式，这也将呼叫中心员工人数添加到地图中。它将以毕业符号的形式出现，其中圆圈越大表示没有。的员工。当我检查网页时，它显示“{“message”：“id 必须是格式为 account.handle”} 的字符串。
附上网页截图。代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Active Call Centers of IBEX</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.js'></script>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.1/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.1/mapbox-gl-geocoder.css' type='text/css' />
<link href='https://api.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.css' rel='stylesheet' />
<link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
<style>
h2, h3 {
margin-left: 10px;
font-size: 1.5em;
font-family: Tahoma;
font-weight: 100;
font-style: bold;
}
h3 {
font-size: 1em;
}
p {
font-size: 0.85em;
margin-left: 10px;
text-align: left;
font-family: Tahoma;
font-weight: 100;
font-style: bold;
}
.map-maker {
position: absolute;
bottom: 0;
left: 0;
background: rgba(255, 255, 255, 0.8);
margin-left: 20px;
font-family: Arial, sans-serif;
overflow: auto;
border-radius: 3px;
}
#map {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#menu {
position: absolute;
background-color: #fff;
border-radius: 10px;
margin-top: 270px;
padding: 10px;
margin-left: 1400px;
margin-bottom: 15px;
/*font-family: 'Open Sans', sans-serif;*/
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif
font-style:bold;
}
#locations {
position: absolute;
}
#features {
top: 0;
height: 80px;
margin-top: 20px;
width: 400px;
}
.block{
margin:10px;
}
.legend {
background-color: #fff;
border-radius: 10px;
bottom: 30px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
padding: 10px;
position: absolute;
right: 10px;
z-index: 5;
}
.legend h4 {
margin: 0 0 10px;
}
.legend p {
margin-left: 30px;
position: absolute;
display: block;
top: 0;
}
.legend div {
position:relative;
}
.legend div span {
border-radius: 50%;
display: inline-block;
margin-right: 5px;
opacity:0.8;
background-color:#e54343;
}
.mapboxgl-popup {
max-width: 400px;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id='map'></div>
<div id='menu'>
<h4><b>BaseMap Style</b></h4>
<label class="block" for='basic'></label>
<input id='basic' type='button' name='rtoggle' value='basic'>
<label class="block" for='streets'></label>
<input id='streets' type='button' name='rtoggle' value='streets'>
<label class="block" for='bright'></label>
<input id='bright' type='button' name='rtoggle' value='bright'>
<label class="block" for='light'></label>
<input id='light' type='button' name='rtoggle' value='light'>
<label class="block" for='dark'></label>
<input id='dark' type='button' name='rtoggle' value='dark'>
<label class="block" for='outdoors'></label>
<input id='outdoors' type='button' name='rtoggle' value='outdoors'>
<label class="block" for='satellite'></label>
<input id='satellite' type='button' name='rtoggle' value='satellite'>
</div>
<div id= 'legend' class='legend'>
<h4>CallCenterEmployees</h4>
</div>
<div class='map-maker' id='features'>
<h2>Active Call Centers of IBEX in the US</h2>
<div id='pd'>
<p>Try clicking on a circle!! </p>
</div>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoicnZnMjk2IiwiYSI6ImNqN2h1Y25xbzFqamQzMnJzNTZ6MDY4cjIifQ.5BhBmexjsinKbR6c5VNWXA'; // Put your Mapbox Public Access token here
// Load a new map in the 'map' HTML div
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-115.125,36.111],
zoom: 10
});
var layerList = document.getElementById('menu');
var inputs = layerList.getElementsByTagName('input');
function switchLayer(layer) {
var layerId = layer.target.id;
map.setStyle('mapbox://styles/mapbox/' + layerId + '-v9');
}
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}
// Store an array of quantiles
var max = 1755;
var fifth = 1755/5;
var quantiles = [];
for (i = 0; i < 5; i++) {
var quantile = (i+1)*fifth;
quantiles.push(quantile);
}
// Add a Geocoder
map.addControl(new MapboxGeocoder({
accessToken: mapboxgl.accessToken
}));
//Navigation Control
map.addControl(new mapboxgl.NavigationControl({ position: 'top-left' }));
var minRadius = 2;
var maxRadius = 10;
var minEmployee = 37;
var maxEmployee = 1755;
var rateOfChange = (maxRadius - minRadius) / (maxEmployee - minEmployee);
var radiusAtZero = maxRadius - (rateOfChange * maxEmployee);
var legend = document.getElementById('legend');
function circleSize(quantile) {
var radius = (rateOfChange * quantile) + radiusAtZero;
var diameter = radius * 2;
return diameter;
}
quantiles.forEach(function(quantile) {
legend.insertAdjacentHTML('beforeend', '<div><span style="width:' + circleSize(quantile) + 'px;height:' + circleSize(quantile) + 'px;margin: 0 ' + [(20 - circleSize(quantile)) / 2] + 'px"></span><p>' + quantile + '</p></div>');
});
// Load the vector tile source from the Mapbox Employee example
map.on('style.load', function() {
map.addSource('employee_volume',{
type: 'vector',
url: 'mapbox://mapbox.rvg296.b4uxfk6x'
});
// Add the circle layer to the map
map.addLayer({
'id': 'employee_volume',
'type': 'circle',
'source': 'employee_volume',
// Your Mapbox tileset Map ID
'source-layer': 'IBEX_Active_Call_Center_List_-16iz6x', // name of tilesets
'paint': {
'circle-color': '#e54343',
// Add data-driven styles for circle radius
'circle-radius': {
property: 'Employees',
type: 'exponential',
stops: [
[37,2],
[1755,10]
]
},
'circle-opacity': 0.5,
'circle-stroke-color': 'white',
'circle-stroke-width': 2,
}
});
// When a click event occurs near a place, open a popup at the location of
// the feature, with HTML description from its properties
map.on('click', function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['employee_volume'] });
// if the features have no info, return nothing
if (!features.length) {
return;
}
var feature = features[0];
// Populate the popup and set its coordinates
// based on the feature found
var popup = new mapboxgl.Popup()
.setLngLat(feature.geometry.coordinates)
.setHTML('<div id=\'popup\' class=\'popup\' style=\'z-index: 10;\'> <h5> Detail: </h5>' +
'<ul class=\'list-group\'>' +
'<li class=\'list-group-item\'> Building Name: ' + feature.properties['Building Name'] + ' </li>' +
'<li class=\'list-group-item\'> Address: ' + feature.properties['Address'] + ' </li>' +
'<li class=\'list-group-item\'> State: ' + feature.properties['State'] +
'<li class=\'list-group-item\'> Zip: ' + feature.properties['Zip'] +
'<li class=\'list-group-item\'> No.of Employees: ' + feature.properties['Employees'] + ' </li></ul></div>')
.addTo(map);
});
// Use the same approach as above to indicate that the symbols are clickable
// by changing the cursor style to 'pointer'
map.on('mousemove', function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['employee_volume'] });
map.getCanvas().style.cursor = features.length ? 'pointer' : '';
});
});
// Full Screen Control
map.addControl(new mapboxgl.FullscreenControl());
// Geolocate us
map.addControl(new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
// Navigation Control
}));
</script>
</body>
</html>