Foursquare Map没有't在OnsenUI标记中渲染

Foursquare Map doesn't render in OnsenUI tags

本文关键字：OnsenUI 没有 Map Foursquare      更新时间：2023-09-26

我目前正在编写一个应用程序，需要从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>

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

Onsen UI标记需要少量时间来解释和转换为html标记。因此，我认为脚本试图在html中嵌入地图，但Onsen UI标记尚未转换。不如尝试使用$timeout（）来等待转换Onsen UI标记？您收到了什么错误信息？

我在Angular Controller中使用了它，并对$scope变量进行了变异。但如果我使用其他控制器，我也必须复制所有的东西。解决问题的清晰简洁的方法被写为服务并在控制器上注入。但我的解决方案只是在控制器中进行硬编码。

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
    });
  });
相关文章：