|
|
@@ -12,70 +12,99 @@
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- let height = window.innerHeight;
|
|
|
- height = height - 100;
|
|
|
- this.$el.style.height = height + "px";
|
|
|
+ getMap() {
|
|
|
+ var _this = this
|
|
|
+ this.http.post( this.port.map.mapList, {},
|
|
|
+ res => {
|
|
|
+ if (res.code == "ok") {
|
|
|
+ var list = res.data;
|
|
|
|
|
|
- var map = new AMap.Map('container', {
|
|
|
- resizeEnable: true,
|
|
|
- zoom: 5
|
|
|
- });
|
|
|
- map.clearMap();
|
|
|
- var markers = [] ,
|
|
|
- infoWindow ,
|
|
|
- data=[{"fLong":'112.00003','fLati':'30.2345'},{"fLong":'115.00003','fLati':'18.2345'},{"fLong":'114.00003','fLati':'38.2345'},{"fLong":'116.00003','fLati':'38.2345'}];
|
|
|
+ var map = new AMap.Map('container', {
|
|
|
+ resizeEnable: true,
|
|
|
+ zoom: 5
|
|
|
+ });
|
|
|
+ map.clearMap();
|
|
|
+ var markers = [] ,
|
|
|
+ infoWindow ,
|
|
|
+ data = list;
|
|
|
|
|
|
- var marker;
|
|
|
- for(var i in data){
|
|
|
- var jfong=[ data[i].fLong , data[i].fLati ];
|
|
|
- marker = new AMap.Marker({
|
|
|
- position: jfong,
|
|
|
- zIndex: 101,
|
|
|
- map:map
|
|
|
- });
|
|
|
- marker.setMap(map);
|
|
|
- marker.orderON=data[i].orderON;
|
|
|
- marker.tranOFID=data[i].tranOFID;
|
|
|
- marker.fhadd=data[i].fhadd;
|
|
|
- marker.sAdd=data[i].sAdd;
|
|
|
- marker.status=data[i].status;
|
|
|
- marker.on('click', function(data){
|
|
|
- var MyComponent = Vue.extend({
|
|
|
- template: "<div class='window'>" +
|
|
|
- "<div class='info-top'><div>方恒假日酒店<span>价格:318</span></div><i class='el-icon-close' @click='closeInfoWindow()'></i></div>" +
|
|
|
- "<div class='info-middle'>" +
|
|
|
- "地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里<br>" +
|
|
|
- "电话：010-64733333<br>" +
|
|
|
- "经度：" + data.lnglat.lng + "<br>" +
|
|
|
- "纬度：" + data.lnglat.lat + "<br>" +
|
|
|
- "<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>" +
|
|
|
- "</div>" +
|
|
|
- "</div>",
|
|
|
- methods:{
|
|
|
- closeInfoWindow:function() {
|
|
|
- map.clearInfoWindow();
|
|
|
- }
|
|
|
+ var marker;
|
|
|
+ for(var i in data){
|
|
|
+ var jfong=[ data[i].ylng , data[i].xlat];
|
|
|
+ marker = new AMap.Marker({
|
|
|
+ position: jfong,
|
|
|
+ zIndex: 101,
|
|
|
+ map:map
|
|
|
+ });
|
|
|
+ marker.setMap(map);
|
|
|
+ marker.msg = data[i];
|
|
|
+ marker.on('click', function(data){
|
|
|
+ console.log(data)
|
|
|
+ var str = "<div class='window'>" +
|
|
|
+ "<div class='info-top'><div>"+ data.target.msg.companyName +"</div><i class='el-icon-close' @click='closeInfoWindow()'></i></div>" +
|
|
|
+ "<div class='info-middle'>";
|
|
|
+ for(var i in data.target.msg.list){
|
|
|
+ str += "<div class='info-item'><a @click='jumpToMold("+ data.target.msg.list[i].id +")'>" + data.target.msg.list[i].modelName + "（" + data.target.msg.list[i].modelNo + "）</a>"
|
|
|
+ if(data.target.msg.list[i].state=='0'){
|
|
|
+ str += "<span class='info-state'><span class='info-ball' style='background:#CD2626;'></span>静止</span>"
|
|
|
+ } else {
|
|
|
+ str += "<span class='info-state'><span class='info-ball' style='background:#00CD66;'></span>运行</span>"
|
|
|
+ }
|
|
|
+ str += "</div>"
|
|
|
+ }
|
|
|
+ str += "</div>" +
|
|
|
+ "</div>"
|
|
|
+
|
|
|
+ var MyComponent = Vue.extend({
|
|
|
+ template: str ,
|
|
|
+ methods:{
|
|
|
+ closeInfoWindow:function() {
|
|
|
+ map.clearInfoWindow();
|
|
|
+ },
|
|
|
+ jumpToMold:function(id) {
|
|
|
+ _this.$router.push("/moldList/" + id);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ var component= new MyComponent().$mount();
|
|
|
+ infoWindow.setContent(component.$el);
|
|
|
+ infoWindow.open(map, data.lnglat);
|
|
|
+ });
|
|
|
}
|
|
|
+
|
|
|
+ infoWindow = new AMap.InfoWindow({
|
|
|
+ isCustom: true,
|
|
|
+ draggable: true, //是否可拖动
|
|
|
+ showShadow: true,
|
|
|
+ autoMove: true,
|
|
|
+ offset: new AMap.Pixel(0, -31),
|
|
|
+ content:""
|
|
|
+ });
|
|
|
+
|
|
|
+ marker.setMap(map);
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: res.msg,
|
|
|
+ type: "error"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error => {
|
|
|
+ this.$message({
|
|
|
+ message: error,
|
|
|
+ type: "error"
|
|
|
});
|
|
|
- var component= new MyComponent().$mount();
|
|
|
- infoWindow.setContent(component.$el);
|
|
|
- infoWindow.open(map, data.lnglat);
|
|
|
});
|
|
|
}
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getMap();
|
|
|
|
|
|
- infoWindow = new AMap.InfoWindow({
|
|
|
- isCustom: true,
|
|
|
- draggable: true, //是否可拖动
|
|
|
- showShadow: true,
|
|
|
- autoMove: true,
|
|
|
- offset: new AMap.Pixel(0, -31),
|
|
|
- content:""
|
|
|
- });
|
|
|
-
|
|
|
- marker.setMap(map);
|
|
|
+ this.$el.style.height = (window.innerHeight - 100) + "px";
|
|
|
+ const that = this;
|
|
|
+ window.onresize = function temp() {
|
|
|
+ this.$el.style.height = (window.innerHeight - 100) + "px";
|
|
|
+ };
|
|
|
}
|
|
|
}
|
|
|
|
