feat: 增强 mip-map 功能 (#586)

* feat: 增强 mip-map 功能 * fix: 更新 mip-map 缩放 * fix: Update example * fix: Fix baidu map sdk protocol * fix: Fix style bug * chore: Add comments
mipengine · Apr 4, 2019 · f7db7b8 · f7db7b8
1 parent cd88aab
commit f7db7b8
Show file tree

Hide file tree

Showing 3 changed files with 271 additions and 117 deletions.
diff --git a/components/mip-map/example/mip-map1.html b/components/mip-map/example/mip-map1.html
@@ -13,7 +13,14 @@
 </head>
 
 <body>
-  <mip-map height="400">
+  <mip-data>
+    <script type="application/json">
+      {
+        "points": [{"lng":116.403847,"lat":39.915526,"metadata":{"name":"天安门","address":"天安门"}}]
+      }
+    </script>
+  </mip-data>
+  <mip-map id="map" height="400" m-bind:points="points">
     <script type="application/json">
       {
         "ak": "hKhuzfFBrcL6zGm4s6b371NDxaUrhFPl",
@@ -40,11 +47,28 @@
           "width": 250,
           "height": 100,
           "content": "<h4>故宫博物馆</h4><p>地址：北京市东城区景山前街4号<br/>电话：(010)65131892</p></div>"
+        },
+        "extensions": {
+          "searchInfoWindow": {
+            "width": 260,
+            "height": 105,
+            "panel": "panel",
+            "enableAutoPan": true
+          }
         }
       }
     </script>
+    <template type="mip-mustache" search-info-window key="content">
+      <div>地址：{{address}}</div>
+    </template>
+    <template type="mip-mustache" search-info-window key="title">
+      {{name}}
+    </template>
   </mip-map>
+  <button on='tap:map.openSearchInfoWindow({"lng": 116.404177, "lat": 39.909652, "metadata": {"name": "天安门广场", "address": "天安门广场"}})'>去天安门广场</button>
+  <button on='tap:MIP.setData({points: [{"lng":116.396258,"lat":39.911226,"metadata":{"name":"国家大剧院","address":"国家大剧院"}},{"lng":116.408016,"lat":39.91146,"metadata":{"name":"国家博物馆","address":"国家博物馆"}}]})'>看看大剧院和博物馆</button>
   <script src="https://c.mipcdn.com/static/v2/mip.js"></script>
+  <script src="https://c.mipcdn.com/static/v2/mip-mustache/mip-mustache.js"></script>
   <script src="/mip-map/mip-map.js"></script>
 </body>