Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/variables/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 动态获取MapBox标记坐标_Javascript_Html_Mapbox_Mapbox Gl_Mapbox Marker - Fatal编程技术网

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)