Question

能够通过将地理编码器传递给存储在我的数据库中的街道地址来动态地成功设置地图框视点。

但是，我不想仅仅将地图视图设置为地址，而是想在地址位置绘制标记。

Template.vendorPage.rendered = function(){


//get address from database by ID
address = function(){
    pathname =location.pathname.split("/"); 
    thisId = pathname[2]; 
    return Vendors.findOne({_id: thisId}).address
}
//set variable to the address function
thisAddress = address(); 

//draw the mapbox
L.mapbox.accessToken = '<My Token Here>';
var geocoder = L.mapbox.geocoder('mapbox.places-v1'),
    map = L.mapbox.map('map', 'alexnetsch.j786e624');

geocoder.query(thisAddress, showMap);

function showMap(err, data) {
    // The geocoder can return an area, like a city, or a
    // point, like an address. Here we handle both cases,
    // by fitting the map bounds to an area or zooming to a point.
    if (data.lbounds) {
        map.fitBounds(data.lbounds);
    } else if (data.latlng) {
        map.setView([data.latlng[0], data.latlng[1]], 16);
    }
}


}

玩了几个小时的文档，无法弄清楚。我想简单地传递标记函数'thisAddress'

似乎不是设置视口，我可以将地图设置为zoomedin并以我的标记为中心。

以下是文档中的示例，但未对地点进行地理编码。

L.mapbox.accessToken = 'pk.eyJ1IjoiYWxleG5ldHNjaCIsImEiOiJsX0V6Wl9NIn0.i14NX5hv3bkVIi075nOM2g';
var map = L.mapbox.map('map', 'examples.map-20v6611k')
    .setView([38.91338, -77.03236], 16);

L.mapbox.featureLayer({
    // this feature is in the GeoJSON format: see geojson.org
    // for the full specification
    type: 'Feature',
    geometry: {
        type: 'Point',
        // coordinates here are in longitude, latitude order because
        // x, y is the standard for GeoJSON and many formats
        coordinates: [
          -77.03221142292,
          38.913371603574 
        ]
    },
    properties: {
        title: 'Peregrine Espresso',
        description: '1718 14th St NW, Washington, DC',
        // one can customize markers by adding simplestyle properties
        // https://www.mapbox.com/foundations/an-open-platform/#simplestyle
        'marker-size': 'large',
        'marker-color': '#BE9A6B',
        'marker-symbol': 'cafe'
    }
}).addTo(map);

Answer 1

终于搞清楚了。

Template.vendorPage.rendered = function(){
    address = function(){
        pathname =location.pathname.split("/"); 
        thisId = pathname[2]; 
        return Vendors.findOne({_id: thisId}).address
    }

    thisAddress = address(); 

    //draw the mapbox
    L.mapbox.accessToken = 'pk.eyJ1IjoiYWxleG5ldHNjaCIsImEiOiJsX0V6Wl9NIn0.i14NX5hv3bkVIi075nOM2g';
    var geocoder = L.mapbox.geocoder('mapbox.places-v1'),
        map = L.mapbox.map('map', 'alexnetsch.j786e624');

    geocoder.query(thisAddress, showMap);

    function showMap(err, data) {
        // The geocoder can return an area, like a city, or a
        // point, like an address. Here we handle both cases,
        // by fitting the map bounds to an area or zooming to a point.
        if (data.lbounds) {
            map.fitBounds(data.lbounds);
        } else if (data.latlng) {
            map.setView([data.latlng[0], data.latlng[1]], 16);
        }
    }

    var addMarker;
    addMarker = function(geocoder, map, placeName) {
      return geocoder.query(placeName, function(error, result) {
        var marker;
        marker = L.marker(result.latlng);
        return marker.addTo(map);
      });
    };

    addMarker(geocoder, map, thisAddress);

Meteor.js中的Mapbox动态标记

1 个答案: