Question

我目前正在编写一个需要从foursquare显示地图的应用程序。我在简单的HTML中测试过，它运行良好。但是当我试图嵌入OnsenUI标签时，它变成了白色的空白页面。守则如下。

的Javascript

ons.ready(function() {


      navigator.geolocation.getCurrentPosition(function(data) {


    var lat = data['coords']['latitude'];
    var lng = data['coords']['longitude'];

    /* Create map. */


    L.mapbox.accessToken = 'sometokenhere';

    var map = L.mapbox.map('map', 'myname.myid').setView([lat, lng], 15);

    //map.attributionControl.addAttribution('<a href="https://foursquare.com/">Places data from Foursquare</a>');


    // Create a Foursquare developer account: https://developer.foursquare.com/
    // NOTE: CHANGE THESE VALUES TO YOUR OWN:
    // Otherwise they can be cycled or deactivated with zero notice.
    var CLIENT_ID = 'something';
    var CLIENT_SECRET = 'somewhere';

     // https://developer.foursquare.com/start/search
    var API_ENDPOINT = 'https://api.foursquare.com/v2/venues/search' +
      '?client_id=CLIENT_ID' +
      '&client_secret=CLIENT_SECRET' +
      '&v=20130815' +
      '&ll='+lat+','+lng+
      '&query=food' +
      '&callback=?';

    // Keep our place markers organized in a nice group.
    var foursquarePlaces = L.layerGroup().addTo(map);

    $.getJSON(API_ENDPOINT
      .replace('CLIENT_ID', CLIENT_ID)
      .replace('CLIENT_SECRET', CLIENT_SECRET)
      .replace('LATLON', map.getCenter().lat +
          ',' + map.getCenter().lng), function(result, status) {

      if (status !== 'success') return alert('Request to Foursquare failed');

      // Transform each venue result into a marker on the map.
      for (var i = 0; i < result.response.venues.length; i++) {
        var venue = result.response.venues[i];
        var latlng = L.latLng(venue.location.lat, venue.location.lng);
        var marker = L.marker(latlng, {
            icon: L.mapbox.marker.icon({
              'marker-color': '#BE9A6B',
              'marker-symbol': 'cafe',
              'marker-size': 'large'
            })
          })
        .bindPopup('<strong><a href="https://foursquare.com/v/' + venue.id + '">' +
          venue.name + '</a></strong>')
          .addTo(foursquarePlaces);

      }

    });
  });

    });

标记

<div id="map"></div>

该代码运行良好，但

  <script type="text/ons-template" id="detail.html">
  <ons-navigator title="Navigator" var="myNavigator">
    <ons-page>

      <div id="map"></div>
    </ons-page>

  </script>

这段代码不起作用。你能给我一个解决方法吗？谢谢

Answer 1

Onsen UI标签需要少量时间来解释并转换为html标签。所以我认为脚本试图在html中嵌入地图，但Onsen UI标签尚未转换。怎么样尝试使用$ timeout（）等待转换Onsen UI标签？你收到了什么错误信息？

Answer 2

我在Angular Controller中使用并在$ scope变量上进行变异。但如果我使用其他控制器，我也必须复制所有的东西。简洁明了的解决方法写成了Service并注入控制器。但我的解决方案只是在控制器中进行硬编码。

module.controller('RandomController',function($scope,$data){


    navigator.geolocation.getCurrentPosition(function(data) {

      var lat = data['coords']['latitude'];
      var lng = data['coords']['longitude'];


      L.mapbox.accessToken = 'Something';

      var map = L.mapbox.map('map','youraccount'); 

      map.setView([lat, lng], 13);


      var CLIENT_ID = 'your_client_id';
      var CLIENT_SECRET = 'your_client_secret';


      var API_ENDPOINT = 'https://api.foursquare.com/v2/venues/search' +
        '?client_id=' + CLIENT_ID+
        '&client_secret='+CLIENT_SECRET +
        '&v=20130815' +
        '&ll='+lat+','+lng+
        '&query=food' +
        '&callback';   


      var foursquarePlaces = L.layerGroup().addTo(map);

      $.getJSON(API_ENDPOINT
        .replace('CLIENT_ID', CLIENT_ID)
        .replace('CLIENT_SECRET', CLIENT_SECRET)
        .replace('LATLON', map.getCenter().lat +',' + map.getCenter().lng), function(result, status) {

          if (status !== 'success') return alert('Request to Foursquare failed');

          // Transform each venue result into a marker on the map.

             var venues = result.response.venues;

             var shuffled_venues = shuffle(venues);

             $scope.$apply(function(){
              $scope.products = shuffled_venues;
            });

          for (var i = 0; i < result.response.venues.length; i++) {
            var venue = result.response.venues[i];
            var latlng = L.latLng(venue.location.lat, venue.location.lng);
            var marker = L.marker(latlng, {
                icon: L.mapbox.marker.icon({
                  'marker-color': '#BE9A6B',
                  'marker-symbol': 'cafe',
                  'marker-size': 'large'
                })
              })
          .addTo(foursquarePlaces);

          }

       });
    },function(error){
      console.log(error.message);

    },{
        enableHighAccuracy: true
        ,timeout : 5000
    });

  });

Foursquare Map不会在OnsenUI标记中呈现

2 个答案: