标签: mapbox

我正在尝试使用mapbox.js创建一个经度和纬度选择器,我需要这个地图位于一个模式框中,当我点击"选择位置"按钮时会打开它.但是当这个模态打开时,地图不会完全呈现.

这是我的代码:

<div class="modal fade" id="chooseLocation" tabindex="-1" role="dialog" aria-labelledby="chooseLocation" aria-hidden="true">
    <div class="Cadd-event-modal" style="width: 600px; margin: 0px auto; margin-top: 10%;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title Cfont-1">Choose location</h4>
        </div>
        <div class="modal-body" style="width: 500px; margin: 0px auto;">

            <div id='map'></div>
            <div class='map-overlay'>
                <label for='latitude'>latitude</label><br />
                <input type='text' size='5' id='latitude' /><br />
                <label for='longitude'>longitude</label><br />
                <input type='text' size='5' id='longitude' />
            </div>


        </div>
        <div class="model-footer"></div>
    </div>
</div>

脚本

    var map = L.mapbox.map('map', 'examples.map-9ijuk24y')
           .setView([0, 0], 2);

    // get the form …

我正在将MapBox用于iPad应用程序,我们希望使用各种图像源来制作地图图像.

有没有办法获得谷歌地图瓷砖并在MapBox中显示它们？

我们可以构建url来直接获取tile,但是如果你这样做,google会阻止你,因为我们不会使用官方API.

有没有其他选择来解决这个问题？

我有一个有趣的CSS/JavaScript问题.我正在构建一个用户友好的网络地图,其中包括自愿提供的地理信息,并且需要能够以多种纸张尺寸打印,最大可达海报尺寸.对于接口,我正在使用Leaflet.js,Mapbox.js和jQuery.我接近打印的方法是设置一个预览窗口,该窗口仅在具有白色背景的全新L.Map上显示叠加(无tileLayer),其中标记与用户选择的纸张大小成比例缩放.我们的想法是地图将填充页面,标记将始终以相同的尺寸打印(圆形标记为8 mm,图标为10 mm).这是Firefox中预览窗口的屏幕截图:

有一些复杂的代码.可以这样说,每当用户改变窗口大小或纸张方向时,预览框和图标都会相应地调整大小.每当用户更改纸张尺寸时,图标会调整大小,但预览框不会,以便表示正确的尺寸比率.以下是我用来执行此操作的功能:

function adjustPreviewBox(){
    //set preview box dimensions based on print window size and paper orientation
    if ($("#paperOrientation option[value=portrait]").prop("selected")){
        var height = $("#printBox").height() - 61;
        var width = height / Math.sqrt(2);
        $("#printPreview").height(height);
        $("#printPreview").width(width);
    } else {
        //first set by horizontal dimension
        var width = $("#printBox").width() - 300;
        var height = width / Math.sqrt(2);
        //check for vertical overflow
        if (height > $("#printBox").height() - 61){
            height = $("#printBox").height() - 61;
            width = height * Math.sqrt(2);
        };
        $("#printPreview").height(height);
        $("#printPreview").width(width);
    }
}; …

我有两种将标记放在地图上的搜索方式。一种搜索基于输入表单中的搜索查询触发，另一种针对moveend事件触发（即“地图移动重做搜索”）。结果数据不一样；前者使用半径，而后者则限制在范围内）。

问题是，对于基于查询的搜索，我想使地图适合返回的标记。因此，我fitBounds()为此使用了内部委派的效果，并将平移动画设置为标记周围的最佳边界。

在动画结束时，它会触发一个moveend事件，触发我的其他类型的搜索并重置我的结果，这是我不希望的行为。

为了变通解决此问题，我可以使用setTimeout和的持续时间作为上的平移选项fitBounds()。这样，我可以关闭事件侦听器moveend，然后fitBounds花费0.25秒，然后花费setTimeout0.25秒（实际上是更长的时间），并通过回调将moveend侦听器添加回去。

这是可行的，但是如果fitBounds或panning本身具有事件或回调，则将更为实用。您能想到更好的解决方案吗？

我正在设置这样的Mapbox GL JS地图:

mapboxgl.accessToken = 'pk.my_token';
var cityBoundaries   = new mapboxgl.GeoJSONSource({ data: 'http://domain.com/city_name.geojson' } );
var map              = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v8',
  center: [cityLongitude,cityLatitude],
  zoom: 13
});

然后我将这样的GeoJSON数据加载到地图上,如下所示:

map.on('style.load', function(){
  map.addSource('city', cityBoundaries);
  map.addLayer({
    'id': 'city',
    'type': 'line',
    'source': 'city',
    'paint': {
      'line-color': 'blue',
      'line-width': 3
    }
  });
});

此时,我有一个以我指定的位置为中心的地图new mapboxgl.Map,并且它处于缩放级别13.因此,地图上只能看到一块GeoJSON数据.我想重新居中并重新缩放地图,以便可以看到整个GeoJSON数据.

在Mapbox JS中,我会通过将GeoJSON数据加载到a featureLayer然后将地图拟合到其边界来实现:

map.fitBounds(featureLayer.getBounds());

Mapbox GL JS 的fitBounds文档表明它需要格式为的边界[[minLng, minLat], [maxLng, maxLat]].

有没有办法确定此GeoJSON图层的混合/最大纬度和经度值？

我有一些外部HTML(由GeoJSON生成),其中包含地图上的标记列表.项目的示例是:

<ul id="marker-list">
    <li data-lat="53.3895673" data-lng="-1.4725166">Marker 1</li>
</ul>

然后我有以下jQuery监听其中一个项目的click事件,然后应该关注这些坐标并触发标记上的click事件(打开它的弹出窗口).

$(document).on('click', '#marker-list li', function(e){
    e.preventDefault();
    var latlngPoint = new L.latLng($(this).attr('data-lat'), $(this).attr('data-lng'));
    map.setView(latlngPoint, 18);
    map.fireEvent('click', {
        latlng: latlngPoint,
        layerPoint: map.latLngToLayerPoint(latlngPoint),
        containerPoint: map.latLngToContainerPoint(latlngPoint)
    });
});

该setView工作正常,但弹出窗口没有被打开...

添加:

map.on('click', function(e){
   console.log(e);
});

显示click事件被触发,但它不会导致弹出窗口打开...如何让弹出窗口打开？有没有办法定位标记？

我的应用显示了用户标记.基本上,用户标记显示当前用户在地图上的位置,但我还在地图上放置了其他标记.最后,它掩盖了我的用户标记.我希望我的用户标记位于地图的顶部.我希望它最后呈现,所以它显示在最顶层.

任何的想法？

我使用的是Android MapBox SDK 5.1.0-SNAPSHOT。如何绘制以米为单位的坐标和半径的圆？

有一个想法来绘制多面多边形。但这是很成问题的。

我试图创建一个带有单击弹出窗口的标记，到目前为止， 问题是当我试图将弹出窗口的内容设置为我的自定义标签时

let popup = new mapboxgl.Popup()
    .setHTML("<custom-tag></custom-tag>") 

我知道setDOMContent的选项，但是我没有设法正确使用它……它应该与document.createElement（'custom-tag'）一起使用，因此，如果您可以帮助我如何将其与自定义组件一起使用。谢谢您的帮助！

对于我的应用程序中的导航功能,我使用的是Mapbox SDK.以下是我正在使用的片段.

func showNavigationMap() {

    let origin = Waypoint(coordinate: currentLocation.coordinate, name: "Your Location")

    guard pickUpCoordinate != nil, dropOffCoordinate != nil else {
        showAlertMessage("Locations not generated")
        return
    }

    let pickUpLocation = Waypoint(coordinate: pickUpCoordinate, name: "Pickup Location")
    let deliveryLocation = Waypoint(coordinate: dropOffCoordinate, name: "Delivery Location")

    let options = NavigationRouteOptions(waypoints: [origin, pickUpLocation, deliveryLocation])

    Directions.shared.calculate(options) { (waypoints, routes, error) in
        guard let route = routes?.first else {
            self.showAlertMessage("No possible routes detected")
            return
        }

        self.mapNavigationViewController = NavigationViewController(for: route)

        self.mapNavigationViewController.delegate = self

        self.present(self.mapNavigationViewController, animated: true, completion: …