<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>地图</title></head><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.4/vue.min.js"></script><scripttype="text/javascript"src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script><scriptcharset="utf-8"type="text/javascript"src="https://map.qq.com/api/gljs?libraries=tools,geometry&v=1.exp&key=OXQ-JNFCT"></script><style type="text/css">html,body {height: 100vh;margin: 0px;padding: 0px;}#my_app {height: 100%;}#container {width: 100%;height: 80%;}#toolControl {position: absolute;top: 10px;left: 0px;right: 0px;margin: auto;width: 252px;z-index: 1001;}.toolItem {width: 30px;height: 30px;float: left;margin: 1px;padding: 4px;border-radius: 3px;background-size: 30px 30px;background-position: 4px 4px;background-repeat: no-repeat;box-shadow: 0 1px 2px 0 #e4e7ef;background-color: #ffffff;border: 1px solid #ffffff;}.toolItem:hover {border-color: #789cff;}.active {border-color: #d5dff2;background-color: #d5dff2;}#marker {background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_editor.png');}#polyline {background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polyline.png');}#polygon {background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polygon.png');}#circle {background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/circle.png');}#rectangle {background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/rectangle.png');}#ellipse {background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/ellipse.png');}.next {margin: 50px auto 0 auto;width: 300px;height: 60px;background: red;color: #fff;font-size: 40px;text-align: center;}</style><body><div id="my_app" v-cloak><div id="container"></div><div class="next" @click="nextHandler">下一步</div><div id="toolControl"><divv-for="(item) in list":key="item.id"class="toolItem":class="{'active': activeId === item.id}":id="item.id":title="item.title"@click="selectItem(item.id)"></div></div></div></body><script>var one = new Vue({el: '#my_app',data: {activeId: 'polygon', // 初始化默认值editor: '',list: [{id: 'marker',title: '点标记',},{id: 'polyline',title: '折线',},{id: 'polygon',title: '多边形',},{id: 'circle',title: '圆形',},{id: 'rectangle',title: '矩形',},{id: 'ellipse',title: '椭圆',},],map: null,locationList: [],},mounted() {this.$nextTick(() => {this.initMap();});},methods: {selectItem(id) {this.activeId = id;this.editor.setActiveOverlay(id);},initMap() {// 初始化地图this.map = new TMap.Map('container', {zoom: 17, // 设置地图缩放级别center: new TMap.LatLng(39.984104, 116.307503), // 设置地图中心点坐标});// 初始化几何图形var marker = new TMap.MultiMarker({map: this.map,});var polyline = new TMap.MultiPolyline({map: this.map,});var polygon = new TMap.MultiPolygon({map: this.map,});var circle = new TMap.MultiCircle({map: this.map,});var rectangle = new TMap.MultiRectangle({map: this.map,});var ellipse = new TMap.MultiEllipse({map: this.map,});this.editor = new TMap.tools.GeometryEditor({// TMap.tools.GeometryEditor 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditormap: this.map, // 编辑器绑定的地图对象overlayList: [// 可编辑图层 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor#4{overlay: marker,id: 'marker',},{overlay: polyline,id: 'polyline',},{overlay: polygon,id: 'polygon',},{overlay: circle,id: 'circle',},{overlay: rectangle,id: 'rectangle',},{overlay: ellipse,id: 'ellipse',},],actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式activeOverlayId: this.activeId, // 激活图层snappable: true, // 开启吸附});// 监听绘制结束事件，获取绘制几何图形this.editor.on('draw_complete', (geometry) => {console.log('所有顶点坐标集合', geometry); // 每种图形返回值不一样，需要特殊处理this.locationList.push({ ...geometry, type: this.activeId });// 多边形处理if (this.activeId === 'polygon') {this.computeArea(geometry.paths, this.locationList.length - 1);}//... 其他类型的形状 面积 自行处理});},// 计算路径围成的多边形的面积computeArea(path, index) {const area = TMap.geometry.computeArea(path);this.locationList[index].area = area;},nextHandler() {wx.miniProgram.getEnv(function (res) {console.log(res.miniprogram); // trueif (res.miniprogram) {wx.miniProgram.navigateTo({url: `/pages/test/test?lcation=${JSON.stringify(this.locationList)}`,});}});},},});</script>
</html>
