Question

我正在尝试构建一个使用传单贴图来显示某些对象位置的简单应用。应用程序的页面在ng-view中加载，具体取决于app.js中不同路由的定义：

var myapp = angular.module('myapp', ['ngRoute']);
   // configure our routes
myapp.config(function($routeProvider, $locationProvider) {
   $locationProvider.html5Mode(true);
   $locationProvider.hashPrefix('!');
   $routeProvider
   .when('/sites', {
           templateUrl: 'partials/sites2',
           controller: 'user_controller',
   })
 ...

的index.html

<html  ng-app="myapp">
   <head>
    <% include ../views/partials/head %>
    </head>
    <% include ../views/partials/header %>
    <% include ../views/partials/menu %>
    <div ng-view></div>  
    <% include ../views/partials/footer %>
</html>

controller.js

var map_s;
myapp.controller('user_controller', function($scope) {

map_s = L.map('map_sites', {
        mapTypeId: 'satellite'
}).setView([33.1746, 22.1640], 4);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=...', {
    maxZoom: 18,
    id: 'mapbox.streets'
}).addTo(map_s);


var MarkerIcon = L.icon({
    iconUrl: 'images/icons/ico.png',
    iconAnchor:   [25, 50] 
});

function markerOnClick(e) {
    console.log('click test');
}    

$scope.marker = [];
for (var i = 0; i < $scope.markerlist.length; i++){
    var lon = $scope.markerlist[i].lon;
    var lat = $scope.markerlist[i].lat; 
    var markerLocation = new L.LatLng(lat, lon);
    $scope.marker[i] = new L.Marker(markerLocation,{
        icon: MarkerIcon,
        zIndexOffset: 1000
    });
    //map_s.on('click', markerOnClick).addLayer(marker[i]);
    $scope.marker[i].on('click', markerOnClick); 
    $scope.marker[i].addTo(map_s);
};  
});

和sites2.html

<!DOCTYPE html>
<html ng-app="myapp">
   <body>
      <div id="map_sites" style="height: 800px;"></div>
   </body>
</html>

地图加载良好，并且所有标记都显示在正确的位置。问题是对象不可点击，我无法让它们响应任何事件。我尝试使用zIndexOffset值但没有正面结果。我想问题是地图包含在ng-view中的事实，但是我无法弄清楚到底出了什么问题。如何解决问题并使我的标记响应点击事件？

小册子地图和angularjs上的可点击标记

0 个答案: