popup - 信息窗口或弹出到我在地图框中的标记
问题描述
我有一个标记,我想做的是用户可以在mapbox
. 之后,我想在单击标记时查看地图中的标记并弹出用户输入的信息。我正在使用 MYPHPADMİN 来保存数据。请帮助。
<script>
var saved_markers = <?= get_saved_locations() ?>;
var user_location = [121.022606,14.786698];
mapboxgl.accessToken = 'pk.eyJ1Ijoic2FudG9zcmF2ZW4yMSIsImEiOiJja2p0b2F5dW4yMXMxMnlxbHUxajBsbzgzIn0.ie7znxWwePyJnJbjrWfPLA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: user_location,
zoom: 13
});
// geocoder here
var geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
// limit results to Australia
//country: 'IN',
});
map.addControl(new mapboxgl.NavigationControl());
var marker ;
// After the map style has loaded on the page, add a source layer and default
// styling for a single point.
map.on('load', function() {
addMarker(user_location,'load');
add_markers(saved_markers);
// Listen for the `result` event from the MapboxGeocoder that is triggered when a user
// makes a selection and add a symbol that matches the result.
geocoder.on('result', function(ev) {
alert("Search Found");
console.log(ev.result.center);
});
});
map.on('click', function (e) {
marker.remove();
addMarker(e.lngLat,'click');
//console.log(e.lngLat.lat);
document.getElementById("lat").value = e.lngLat.lat;
document.getElementById("lng").value = e.lngLat.lng;
});
function addMarker(ltlng,event) {
if(event === 'click'){
user_location = ltlng;
}
marker = new mapboxgl.Marker({draggable: true,color:"#d02922"})
.setLngLat(user_location)
.addTo(map)
.on('dragend', onDragEnd);
}
function add_markers(coordinates) {
var geojson = (saved_markers == coordinates ? saved_markers : '');
console.log(geojson);
// add markers to map
geojson.forEach(function (marker) {
console.log(marker);
// make a marker for each feature and add to the map
new mapboxgl.Marker()
.setLngLat(marker)
.addTo(map);
});
}
function onDragEnd() {
var lngLat = marker.getLngLat();
document.getElementById("lat").value = lngLat.lat;
document.getElementById("lng").value = lngLat.lng;
console.log('lng: ' + lngLat.lng + '<br />lat: ' + lngLat.lat);
}
$('#signupForm').submit(function(event){
event.preventDefault();
var lat = $('#lat').val();
var lng = $('#lng').val();
var url = 'locations_model.php?add_location&lat=' + lat + '&lng=' + lng;
$.ajax({
url: url,
method: 'GET',
dataType: 'json',
success: function(data){
alert(data);
location.reload();
}
});
});
document.getElementById('geocoder').appendChild(geocoder.onAdd(map));
</script>
解决方案
您可以在初始化标记时添加应在标记单击事件上弹出的弹出窗口:
// create the popup
var popup = new mapboxgl.Popup({ offset: 25 }).setText(
'Construction on the Washington Monument began in 1848.'
);
// create DOM element for the marker
var 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);
请参阅这个带有弹出窗口的标记的工作示例:
(请更换您的访问令牌以使其工作)
<!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" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css" rel="stylesheet" />
<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>
mapboxgl.accessToken = 'YOUR ACCESS TOKEN';
var monument = [-77.0353, 38.8895];
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: monument,
zoom: 15
});
// create the popup
var popup = new mapboxgl.Popup({ offset: 25 }).setText(
'Construction on the Washington Monument began in 1848.'
);
// create DOM element for the marker
var 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>
推荐阅读
- python - 向内容导航抽屉添加功能
- r - 仅省略某一列中不与其他 NA 重叠的 NA
- java - 使用 POST 从 Android 向 MySQL 数据库发送数据
- visual-studio - 什么会导致 Visual Studio 解决方案中的多个项目中只有一个项目的所有编译器警告被抑制?
- javascript - %javascript 在 Windows 的 Jupyter 笔记本中不起作用
- android - Android 库项目中的 Timber Android
- html - 我正在制作“视差”效果,但它不起作用
- r - 平均同时保留单例
- c# - 替换存储在字符串中的文本
- python - 你如何解决这个while循环?