工单位置详情

plugs/think-plugs-ticket/src/view/ticket/detail.html

@@ -52,9 +52,57 @@
                                     </div>
                                 </td>
                             </tr>
+                            {if $vo.lat && $vo.lng}
+                            <tr>
+                                <td>位置</td>
+                                <td>
+                                    <div id="map" style="height: 320px;"></div>
+                                </td>
+                            </tr>
+                            {/if}
                             </tbody>
                         </table>
                     </div>
+                    {if $vo.lat && $vo.lng}
+                    <script src="https://map.qq.com/api/gljs?v=1.exp&key=T6XBZ-L33CB-TMFUL-JQ4D6-MKBTK-KNBED"></script>
+                    <script>
+                        function initMap() {
+                            //定义地图中心点坐标
+                            var center = new TMap.LatLng("{$vo.lat}", "{$vo.lng}")
+                            //定义map变量，调用 TMap.Map() 构造函数创建地图
+                            var map = new TMap.Map(document.getElementById('map'), {
+                                center: center,//设置地图中心点坐标
+                                zoom: 17.2,   //设置地图缩放级别
+                                pitch: 30,  //设置俯仰角
+                            });
+                            var marker = new TMap.MultiMarker({
+                                map: map,
+                                styles: {
+                                    // 点标记样式
+                                    marker: new TMap.MarkerStyle({
+                                        width: 20, // 样式宽
+                                        height: 30, // 样式高
+                                        anchor: { x: 10, y: 30 }, // 描点位置
+                                    }),
+                                },
+                                geometries: [
+                                    // 点标记数据数组
+                                    {
+                                        // 标记位置(纬度，经度，高度)
+                                        position: center,
+                                        id: 'marker',
+                                    },
+                                ],
+                            });
+                        }
+                        var mapInit = setInterval(function () {
+                            if (window.TMap) {
+                                clearInterval(mapInit)
+                                initMap()
+                            }
+                        }, 500)
+                    </script>
+                    {/if}
                 </div>
             </div>
         </div>