Joh*_*ing 6 mapbox mapbox-gl mapbox-gl-js
有一个示例说明如何使点可拖动（具有图层），还有一个示例说明如何使用自定义图像设置标记，但是当它没有时，我如何使该自定义图像可在地图上拖动与之相关的层？！
小智 4
我从我发现的另一个例子中想出了这个，并将两者混合在一起。它满足了我想要的...我记得在寻找答案时看到了这个（几次），所以我回来分享。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add custom icons with Markers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
#marker6060 {
background-image: url('https://placekitten.com/g/60/60/');
background-size: cover;
width: 60px;
height: 60px;
border-radius: 50%;
cursor: pointer;
}
#marker5050 {
background-image: url('https://placekitten.com/g/50/50/');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
#marker4040 {
background-image: url('https://placekitten.com/g/40/40/');
background-size: cover;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
}
</style>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'YOURS, NOT MINE.';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-65.017, -16.457],
zoom: 5
});
var element6060 = document.createElement('div');
element6060.id = 'marker6060';
var marker6060 = new mapboxgl.Marker({
element: element6060,
draggable: true,
color: '#000000'
})
.setLngLat([-66.324462890625, -16.024695711685304])
.addTo(map);
element6060.addEventListener('click', function() {
var message = 'Kitty 6060';
window.alert(message);
});
var element5050 = document.createElement('div');
element5050.id = 'marker5050';
var marker5050 = new mapboxgl.Marker({
element: element5050,
draggable: true,
color: '#000000'
})
.setLngLat([-61.2158203125, -15.97189158092897])
.addTo(map);
element5050.addEventListener('click', function() {
var message = 'Kitty 5050';
window.alert(message);
});
var element4040 = document.createElement('div');
element4040.id = 'marker4040';
var marker4040 = new mapboxgl.Marker({
element: element4040,
draggable: true,
color: '#000000'
})
.setLngLat([-63.29223632812499, -18.28151823530889])
.addTo(map);
element4040.addEventListener('click', function() {
var message = 'Kitty 4040';
window.alert(message);
});
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add custom icons with Markers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
#marker6060 {
background-image: url('https://placekitten.com/g/60/60/');
background-size: cover;
width: 60px;
height: 60px;
border-radius: 50%;
cursor: pointer;
}
#marker5050 {
background-image: url('https://placekitten.com/g/50/50/');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
#marker4040 {
background-image: url('https://placekitten.com/g/40/40/');
background-size: cover;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
}
</style>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'YOURS, NOT MINE.';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-65.017, -16.457],
zoom: 5
});
var element6060 = document.createElement('div');
element6060.id = 'marker6060';
var marker6060 = new mapboxgl.Marker({
element: element6060,
draggable: true,
color: '#000000'
})
.setLngLat([-66.324462890625, -16.024695711685304])
.addTo(map);
element6060.addEventListener('click', function() {
var message = 'Kitty 6060';
window.alert(message);
});
var element5050 = document.createElement('div');
element5050.id = 'marker5050';
var marker5050 = new mapboxgl.Marker({
element: element5050,
draggable: true,
color: '#000000'
})
.setLngLat([-61.2158203125, -15.97189158092897])
.addTo(map);
element5050.addEventListener('click', function() {
var message = 'Kitty 5050';
window.alert(message);
});
var element4040 = document.createElement('div');
element4040.id = 'marker4040';
var marker4040 = new mapboxgl.Marker({
element: element4040,
draggable: true,
color: '#000000'
})
.setLngLat([-63.29223632812499, -18.28151823530889])
.addTo(map);
element4040.addEventListener('click', function() {
var message = 'Kitty 4040';
window.alert(message);
});
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add custom icons with Markers No Layer, Draggable</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
#marker6060 {
background-image: url('https://placekitten.com/g/60/60/');
background-size: cover;
width: 60px;
height: 60px;
border-radius: 50%;
cursor: pointer;
}
#marker5050 {
background-image: url('https://placekitten.com/g/50/50/');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
#marker4040 {
background-image: url('https://placekitten.com/g/40/40/');
background-size: cover;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
}
</style>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'YOURS, NOT MINE.';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-65.017, -16.457],
zoom: 5
});
var element6060 = document.createElement('div');
element6060.id = 'marker6060';
var marker6060 = new mapboxgl.Marker({
element: element6060,
draggable: true
})
.setLngLat([-66.324462890625, -16.024695711685304])
.addTo(map);
element6060.addEventListener('click', function() {
var message = 'Kitty 6060';
window.alert(message);
});
var element5050 = document.createElement('div');
element5050.id = 'marker5050';
var marker5050 = new mapboxgl.Marker({
element: element5050,
draggable: true
})
.setLngLat([-61.2158203125, -15.97189158092897])
.addTo(map);
element5050.addEventListener('click', function() {
var message = 'Kitty 5050';
window.alert(message);
});
var element4040 = document.createElement('div');
element4040.id = 'marker4040';
var marker4040 = new mapboxgl.Marker({
element: element4040,
draggable: true
})
.setLngLat([-63.29223632812499, -18.28151823530889])
.addTo(map);
element4040.addEventListener('click', function() {
var message = 'Kitty 4040';
window.alert(message);
});
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
| 归档时间： |
|
| 查看次数： |
1356 次 |
| 最近记录： |