单击并标记angularjs或Jquery中图像的不同部分_Jquery_Angularjs_Image_Tags

单击并标记angularjs或Jquery中图像的不同部分

jquery angularjs image tags

单击并标记angularjs或Jquery中图像的不同部分,jquery,angularjs,image,tags,Jquery,Angularjs,Image,Tags,我有一个基于建筑的新项目。在这里，我们将有巨大的建筑结构和工程图图像集这是我的小小尝试我不知道这是否是可能的，我想点击图像的不同部分，创建标签，并有基于这些标签的评论线程请有人帮我把弹出框放在鼠标点击图像上方的光标旁边。将为该部分创建标记，下次任何用户想要预览时，都可以将鼠标移到图像上，并将标记作为工具提示查看，然后按照该标记的注释线程进行操作我已经尝试过angular，但Jquery或任何其他js框架都可以，只要它可以工作 <body ng-controller="MainCt

我有一个基于建筑的新项目。在这里，我们将有巨大的建筑结构和工程图图像集

这是我的小小尝试

我不知道这是否是可能的，我想点击图像的不同部分，创建标签，并有基于这些标签的评论线程

请有人帮我把弹出框放在鼠标点击图像上方的光标旁边。将为该部分创建标记，下次任何用户想要预览时，都可以将鼠标移到图像上，并将标记作为工具提示查看，然后按照该标记的注释线程进行操作

我已经尝试过angular，但Jquery或任何其他js框架都可以，只要它可以工作

<body ng-controller="MainCtrl">
<br>
<div class='container-fluid'>
  <div class='alert alert-info'>
    <h4>Click the image and tag</h4>
  </div>
  <div class='row'>
    <div class='col-lg-11'>
      <div class='col-sm-11 ' >
        <img tagover src='http://www.studioats.com/wp-content/uploads/2011/05/A2-1A-First-Floor-Plan-Area-A-12x18.jpg' height='300' width='500' />
      </div>  
      <div class='col-sm-3 well'  >
        <p><span class='label label-info'>Comments</span>&nbsp;{{tagName}}</p>
        <textarea class='form-control' placeholder='comments here'></textarea>
      </div>    
    </div>
  </div>
</div>




单击图像和标记
注释{{标记名}

剧本

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {  

});


app.directive('tagover', function ($compile,$templateCache,$interpolate) {
var getTemplate = function (contentType,attrs) {
    var template = '';
    switch (contentType) {
        case 'comment':
            var template  = "<div class='' >";
                template += "<input class='form-control' type='text' ng-model='tagName' placeholder='tag name'>";
                template += "</div>";
                template += "</div>";
            break;
    }
    return template;
} //

return {
    restrict: "A",
    link: function (scope, element, attrs) {
        var popOverContent;
        var d = new Date();
        var mm = d.getMonth()+1;

        popOverContent = getTemplate("comment",attrs);
        var compiled = $compile(popOverContent)(scope);

        var options = {
            content: compiled,
            placement: "bottom",
            html: true,
            date: scope.date
        };
        $(element).popover(options);
    }
};
});

var-app=angular.module（'plunker'，[]）；
app.controller（'MainCtrl'，函数（$scope）{
});
app.directive（'tagover'，function（$compile，$templateCache，$interpolate）{
var getTemplate=函数（contentType，attrs）{
var模板=“”；
开关（contentType）{
案例“评论”：
var模板=”；
模板+=“”；
模板+=“”；
模板+=“”；
打破
}
返回模板；
} //
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
var含量过高；
var d=新日期（）；
变量mm=d.getMonth（）+1；
popOverContent=getTemplate（“注释”，attrs）；
var compiled=$compile（popOverContent）（范围）；
变量选项={
内容:汇编,，
位置：“底部”，
是的，
日期：scope.date
};
$（元素）.popover（选项）；
}
};
});

我认为这样做更容易。传单是一种映射工具，您可以在其中添加图像作为覆盖，也可以根据需要添加标记/标签。位置存储为地理坐标（经度/纬度），但我认为这没关系。如果你需要像素的位置，你可以计算它们，但我认为你不需要

下面我已经为你或在这个黑了一个简短的演示

就在传单指令之后，我添加了用于调试的

标记名

范围变量

您的应用程序需要改进的地方：

向服务添加标记，以便可以将它们存储在本地存储或数据库中
有时控制台中出现错误
```
TypeError:t.className未定义
```
不确定它是什么，它在平移地图时随机发生
检查贴图的最大边界是否正确。我还没有检查它是否是从演示代码复制的
检查是否需要鼠标移出标记。我已经对它进行了注释，这样你就可以点击标签名的输入
阅读平铺图像的工作原理，然后您可以将一个高分辨率图像分割为多个平铺，您将获得更好的用户体验，但对于开始，您可以使用一个图像，然后添加平铺
检查您是否需要分层（如一楼或二楼）。我认为可以将其添加到传单中，但您需要检查是否必须为标记添加可见性属性（如果传单未处理该属性）

angular.module（“标记应用程序”[“传单指令”]）
.控制器（“tagController”，tagController）；
//string.format帮助程序
String.prototype.format=函数（）{
var格式化=这个；
for（var i=0；i