angularjs - 如何在单击标记时重定向到下一页并显示有关标记的详细信息？

Question

我正在使用 Leaflet 在我的混合应用程序中显示 map 。在 map 上我有多个标记。我想当用户单击标记时重定向到下一页，并显示有关标记的详细信息。下面是我获取标记的纬度和经度的 JSON 数据。

下面是我的 JSON 数据

[{"store_id":"1","store_name":"Wall Mart","store_address":"Forum Mall, Kormangala","store_latitude":"12.929328","store_longitude":" 77.605117","store_phone":"9848484848"},
{"store_id":"2","store_name":"Lifestyle","store_address":"K R pooram","store_latitude":"12.961398","store_longitude":"77.553128","store_phone":"858585858"},
{"store_id":"3","store_name":"More","store_address":"Katriguppe","store_latitude":"12.989943","store_longitude":"77.689106","store_phone":"8796543210"}]

HTML 代码

<div id="map" style="width: 100%; height: 100%"></div>

Controller

var map = L.map('map', {
        center: new L.LatLng(12.96340871,77.59699345),
        zoom: 12,
        maxZoom: 18,
        minZoom: 6 
    });
    mapLink = 
        '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; ' + mapLink + ' Contributors',
        maxZoom: 18,
        }).addTo(map);

 $http.get('json.php').success(function(data) {
        // Loop through the 'locations' and place markers on the map
        console.log(JSON.stringify(data));
        angular.forEach(data, function(location, key){
 // alert(location.store_name);
            var marker = L.marker([location.store_latitude, location.store_longitude]).addTo(map);

            });
        });

谢谢

Answer 1

您应该使用标记的 click事件来绑定(bind)一些 ridirect 功能。路由操作可以通过 Angular 中的 $location 服务来实现:

angular.forEach(data, function(location, key){
  var marker = L.marker([location.store_latitude, location.store_longitude]).addTo(map);
  marker.click(function(e) {
    $location.path('/some_route');
  })    
});