Javascript 动态获取MapBox标记坐标
我不熟悉Javascript 动态获取MapBox标记坐标,javascript,html,mapbox,mapbox-gl,mapbox-marker,Javascript,Html,Mapbox,Mapbox Gl,Mapbox Marker,我不熟悉MapBox,这可能是一个非常简单的解决方案,我试图实现的是获取标记的坐标,当我在搜索框中搜索任何地址/位置时,该坐标会弹出。标记是可拖动的,移动时应获取更新的坐标 请查看以下代码: 找到用户 正文{margin:0;padding:0;} #映射{位置:绝对;顶部:0;底部:0;宽度:50%;} .坐标{ 背景:rgba(0,0,0,0.5); 颜色:#fff; 位置:绝对位置; 底部:40px; 左:10px; 填充物:5px10px; 保证金:0; 字体大小:11px; 线高:1
MapBox
,这可能是一个非常简单的解决方案,我试图实现的是获取标记的坐标,当我在搜索框中搜索任何地址/位置时,该坐标会弹出。标记
是可拖动的,移动时应获取更新的坐标
请查看以下代码:
找到用户
正文{margin:0;padding:0;}
#映射{位置:绝对;顶部:0;底部:0;宽度:50%;}
.坐标{
背景:rgba(0,0,0,0.5);
颜色:#fff;
位置:绝对位置;
底部:40px;
左:10px;
填充物:5px10px;
保证金:0;
字体大小:11px;
线高:18px;
边界半径:3px;
显示:无;
}
mapboxgl.accessToken='pk.eyj1ijoichjpbmnla2fkaxdhciisimeoijja2nuaxv6dtkwym5ymnhznmuwa3fjy2w1in0.G1hnzymI0eheZ76GLljEtQ';
var map=new mapboxgl.map({
容器:'映射',//容器id
风格:'mapbox://styles/mapbox/streets-v11',
中心:[-96,37.8],//起始位置
缩放:2//开始缩放
});
addControl(新的mapboxgl.NavigationControl());
var geocoder=新MapboxGeocoder({
accessToken:mapboxgl.accessToken,
标记:{
颜色:“橙色”,
德拉格布尔:是的
},
mapboxgl:mapboxgl
});
地图添加控制(地理编码器);
请添加您的Mapboxgl AccessToken。给您,这应该完全符合您的要求wanted@PrinceKadiwar你是否介意分享一下这是你想要的还是你找到了另一种解决方案?这似乎是解决问题的方法,因为您无法监听geocoder.mapMarker
事件。var lngLat=e.target.getLngLat()
只能是var lngLat=marker.getLngLat()代码>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = '';
var coordinates = document.getElementById('coordinates');
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-79.4512, 43.6568],
zoom: 13
});
const geocoder = new MapboxGeocoder({
mapboxgl: mapboxgl,
accessToken: mapboxgl.accessToken,
marker: false
})
geocoder.on('result', e => {
const marker = new mapboxgl.Marker({
draggable: true
})
.setLngLat(e.result.center)
.addTo(map)
marker.on('dragend',function(e){
var lngLat = e.target.getLngLat();
console.log(lngLat['lat'])
console.log(lngLat['lng'])
})
})
map.addControl(geocoder)