12161749

src/components/statistics/Statistically.vue

@@ -625,6 +625,29 @@ export default {
                 });
             });
         },
+        calloutForLandmarkAnnotation(annotation) {
+            var div = document.createElement("div");
+            
+            div.className = "landmark";
+            
+            var title = div.appendChild(document.createElement("h1"));
+            console.log(annotation);
+            title.textContent = annotation.landmark.title;
+        
+            var section = div.appendChild(document.createElement("section"));
+        
+            var phone = section.appendChild(document.createElement("p"));
+            phone.className = "phone";
+            phone.textContent = annotation.landmark.phone;
+        
+            var link = section.appendChild(document.createElement("p"));
+            link.className = "homepage";
+            var a = link.appendChild(document.createElement("a"));
+            a.href = annotation.landmark.url;
+            a.textContent = "website";
+        
+            return div;
+        },
         //在线地图
         async onlinemap(){
             const token = "eyJraWQiOiI1NEIyRkFLODMzIiwidHlwIjoiSldUIiwiYWxnIjoiRVMyNTYifQ.eyJpc3MiOiJIS0YzNzJKU01LIiwiaWF0IjoxNzMzMTkxMzI2LCJvcmlnaW4iOiJvYS5wYW4tYW1lcmljYW4taW50bC5jb20ifQ.1czYQb-Nxh6n4kG9sVylQH32XawN92gBKXjn6i_SU0F2M9fpwbStM-gDRvfANEiEUDz5ogUmm_FQf9eBF8o9Zg";
@@ -634,6 +657,41 @@ export default {
                     done(token);
                 }
             });
+            var CALLOUT_OFFSET = new DOMPoint(-148, -78);
+            var landmarkAnnotationCallout = {
+                calloutElementForAnnotation: function(annotation) {
+                    console.log(annotation);
+                    var div = document.createElement("div");
+            
+                    div.className = "landmark";
+                    
+                    var title = div.appendChild(document.createElement("h1"));
+                    console.log(annotation);
+                    title.textContent = annotation.landmark.title;
+                
+                    var section = div.appendChild(document.createElement("section"));
+                
+                    var phone = section.appendChild(document.createElement("p"));
+                    phone.className = "phone";
+                    phone.textContent = annotation.landmark.phone;
+                
+                    var link = section.appendChild(document.createElement("p"));
+                    link.className = "homepage";
+                    var a = link.appendChild(document.createElement("a"));
+                    a.href = annotation.landmark.url;
+                    a.textContent = "website";
+                
+                    return div;
+                },
+            
+                calloutAnchorOffsetForAnnotation: function(annotation, element) {
+                    return CALLOUT_OFFSET;
+                },
+            
+                calloutAppearanceAnimationForAnnotation: function(annotation) {
+                    return ".4s cubic-bezier(0.4, 0, 0, 1.5) 0s 1 normal scale-and-fadein";
+                }
+            };
             var sanFranciscoLandmarks = [
                 { coordinate: new mapkit.Coordinate(37.7951315, -122.402986), title: "Transamerica Pyramid", phone: "+1-415-983-5420", url: "http://www.transamericapyramidcenter.com/" },
                 { coordinate: new mapkit.Coordinate(37.7954201, -122.39352), title: "Ferry Building", phone: "+1 (415) 983-8030", url: "http://www.ferrybuildingmarketplace.com" },
@@ -653,20 +711,7 @@ export default {
                 return annotation;
             });
         
-            var CALLOUT_OFFSET = new DOMPoint(-148, -78);
-            var landmarkAnnotationCallout = {
-                calloutElementForAnnotation: function(annotation) {
-                    return calloutForLandmarkAnnotation(annotation);
-                },
             
-                calloutAnchorOffsetForAnnotation: function(annotation, element) {
-                    return CALLOUT_OFFSET;
-                },
-            
-                calloutAppearanceAnimationForAnnotation: function(annotation) {
-                    return ".4s cubic-bezier(0.4, 0, 0, 1.5) 0s 1 normal scale-and-fadein";
-                }
-            };
             this.map = new mapkit.Map("map");
             this.map.showItems(annotations);
 
@@ -675,9 +720,9 @@ export default {
             //     showsMapTypeControl: true,
             //     showsZoomControl: true,
             // });
-            console.log(this.map);
             
         },
+        
         //团组酒店
         grouphotel(){
             var hoteltopten = echarts.init(document.getElementById('hoteltopten'));
@@ -1589,4 +1634,52 @@ export default {
     width: 200px;
     margin-right: 10px;
 }
+
+a:link, a:visited {
+    color: #2aaef5;
+    outline: none;
+    text-decoration: none;
+}
+.landmark {
+    width: 250px;
+    padding: 7px 0 0 0;
+    background: rgba(247, 247, 247, 0.75);
+    border-radius: 5px;
+    box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.29);
+    font-family: Helvetica, Arial, sans-serif;
+    -webkit-transform-origin: 0 10px;
+    transform-origin: 0 10px;
+}
+
+.landmark h1 {
+    margin-top: 0;
+    padding: 5px 15px;
+    background: #2aaef5;
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 16px;
+    font-weight: 300;
+}
+
+.landmark section {
+    padding: 0 15px 5px;
+    font-size: 14px;
+}
+
+.landmark section p {
+    margin: 5px 0;
+}
+
+.landmark:after {
+    content: "";
+    position: absolute;
+    top: 7px;
+    left: -13px;
+    width: 0;
+    height: 0;
+    margin-bottom: -13px;
+    border-right: 13px solid #2aaef5;
+    border-top: 13px solid rgba(0, 0, 0, 0);
+    border-bottom: 13px solid rgba(0, 0, 0, 0);
+}
+
 </style>