Attach a popup to a marker instance
Attach a Popup
to a Marker and display it on click.
TUTORIAL
Custom Markers
If you would like to customize your markers with images or other HTML functionality, see our Custom Markers tutorial and the related video tutorial.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Attach a popup to a marker instance</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
#marker {
background-image: url('https://docs.mapbox.com/mapbox-gl-js/assets/washington-monument.jpg');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
.mapboxgl-popup {
max-width: 200px;
}
</style>
<div id="map"></div>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const monument = [-77.0353, 38.8895];
const map = new mapboxgl.Map({
container: 'map',
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/light-v11',
center: monument,
zoom: 15
});
// create the popup
const popup = new mapboxgl.Popup({ offset: 25 }).setText(
'Construction on the Washington Monument began in 1848.'
);
// create DOM element for the marker
const el = document.createElement('div');
el.id = 'marker';
// create the marker
new mapboxgl.Marker(el)
.setLngLat(monument)
.setPopup(popup) // sets a popup on this marker
.addTo(map);
</script>
</body>
</html>
import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
const markerRef = useRef();
useEffect(() => {
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const monument = [-77.0353, 38.8895];
mapRef.current = new mapboxgl.Map({
container: mapContainerRef.current,
style: 'mapbox://styles/mapbox/light-v11',
center: monument,
zoom: 15
});
const popup = new mapboxgl.Popup({ offset: 25 }).setText(
'Construction on the Washington Monument began in 1848.'
);
new mapboxgl.Marker(markerRef.current)
.setLngLat(monument)
.setPopup(popup)
.addTo(mapRef.current);
return () => mapRef.current.remove();
}, []);
return (
<>
<div
ref={markerRef}
style={{
backgroundImage:
"url('https://docs.mapbox.com/mapbox-gl-js/assets/washington-monument.jpg')",
backgroundSize: 'cover',
width: '50px',
height: '50px',
borderRadius: '50%',
cursor: 'pointer'
}}
></div>
<div ref={mapContainerRef} style={{ height: '100%' }} />
</>
);
};
export default MapboxExample;
このexampleは役に立ちましたか?