Procházet zdrojové kódy

Merge remote-tracking branch 'origin/master'

licailing před 5 roky
rodič
revize
950930b655

+ 1 - 1
src/main/map/.prettierrc.js

@@ -2,5 +2,5 @@ module.exports = {
     semi: true,
     singleQuote: true,
     tabWidth: 4,
-    trailingComma: 'all',
+		trailingComma: 'all',
 };

+ 2 - 0
src/main/map/public/index.html

@@ -8,6 +8,8 @@
 		<title>叮咚外卖</title>
 		<script charset="utf-8"
 			src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=GLFBZ-ZR2W6-76XSA-MF7CQ-GDJ6Z-6FB5K"></script>
+			<script charset="utf-8"
+				src="https://map.qq.com/api/gljs?v=1.exp&key=GLFBZ-ZR2W6-76XSA-MF7CQ-GDJ6Z-6FB5K&libraries=visualization"></script>
   </head>
   <body>
     <noscript>

+ 10 - 1
src/main/map/src/router/index.js

@@ -18,8 +18,17 @@ const routes = [
         name: 'ChooseLocation',
         component: () => import('../views/ChooseLocation.vue'),
     },
+    {
+        path: '/heat3D',
+        name: 'heat3D',
+        component: () => import('../views/Heat3D.vue'),
+    },
+    {
+        path: '/polylineRoutePlan',
+        name: 'polylineRoutePlan',
+        component: () => import('../views/PolylineRoutePlan.vue'),
+    },
 ];
-;
 const router = new VueRouter({
     mode: 'history',
     base: process.env.BASE_URL,

+ 37 - 0
src/main/map/src/utils/Post.js

@@ -0,0 +1,37 @@
+/***
+ * postJsCode.js
+ * 预注入webview javascript code
+ * web端使用:
+ * window.APP.invokeClientMethod('getList', { page: 1 , size: 10}, callback);
+ * * */
+function clientMethod() {
+    var APP = {
+        __GLOBAL_FUNC_INDEX__: 0,
+        invokeClientMethod: function(type, params, callback) {
+            var name;
+            if (typeof callback === 'function') {
+                var callbackName = '__CALLBACK__' + APP.__GLOBAL_FUNC_INDEX__++;
+                APP[callbackName] = callback;
+            }
+            window.ReactNativeWebView.postMessage(
+                JSON.stringify({ type, params, callback: name }),
+            );
+        },
+        invokeWebMethod: function(callback, args) {
+            if (typeof callback === 'string') {
+                var func = APP[callback];
+                if (typeof func === 'function') {
+                    setTimeout(function() {
+                        func.call(this, args);
+                    }, 0);
+                }
+            }
+        },
+    };
+    window.APP = APP;
+    window.webviewCallback = function(data) {
+        window.APP['invokeWebMethod'](data.callback, data.args);
+    };
+}
+
+export { clientMethod };

+ 94 - 0
src/main/map/src/views/Heat3D.vue

@@ -0,0 +1,94 @@
+<template>
+    <div id="container"></div>
+</template>
+<script>
+import { mapState } from 'vuex';
+import axios from 'axios';
+import { clientMethod } from '../utils/Post';
+clientMethod();
+
+export default {
+    name: '',
+    data() {
+        return {
+            heatData: [],
+        };
+    },
+    computed: {
+        ...mapState(['userInfo']),
+    },
+    mounted() {
+        window.APP.invokeClientMethod('getList', { page: 0 }, data => {
+            console.log(data);
+        });
+        // this.$nextTick(() => {
+        //     this.getData();
+        //     this.initMap();
+        // });
+    },
+    methods: {
+        getData() {
+            axios.get('http://dingdong.izouma.com/merchant/heatMap', {
+                longitude: '118.734661',
+                latitude: '31.981746',
+            });
+        },
+        initMap() {
+            var heatAddBtn = document.getElementById('heatAddBtn');
+            var heatDecBtn = document.getElementById('heatDecBtn');
+            var setStyleBtn = document.getElementById('setStyleBtn');
+
+            //初始化地图
+            var map = new TMap.Map('container', {
+                zoom: 12, //设置地图缩放级别
+                pitch: 45, // 设置地图俯仰角
+                center: new TMap.LatLng(39.909897147274364, 116.39756310116866), //设置地图中心点坐标
+                mapStyleId: 'style1', //个性化样式
+            });
+            //初始化热力图并添加至map图层
+            var heat = new TMap.visualization.Heat({
+                max: 180, // 热力最强阈值
+                min: 0, // 热力最弱阈值
+                height: 40, // 峰值高度
+                radius: 30, // 最大辐射半径
+            })
+                .addTo(map)
+                .setData(this.heatData); //设置数据
+
+            heatAddBtn.addEventListener(
+                'click',
+                () => {
+                    var radius = heat.getRadius() + 5;
+                    heat.setRadius(radius);
+                },
+                false,
+            );
+
+            heatDecBtn.addEventListener(
+                'click',
+                () => {
+                    var radius = heat.getRadius() - 5;
+                    if (radius > 0) {
+                        heat.setRadius(radius);
+                    }
+                },
+                false,
+            );
+
+            setStyleBtn.addEventListener('click', () => {
+                heat.setGradientColor({
+                    0.6: '#673198',
+                    0.8: '#e53390',
+                    0.9: '#ffc95a',
+                });
+            });
+        },
+    },
+};
+</script>
+<style lang='less' scoped>
+#container {
+    width: 100vw;
+    height: 100vh;
+}
+</style>

+ 22 - 0
src/main/map/src/views/Home.vue

@@ -74,6 +74,28 @@ export default {
             }
         },
     },
+    watch: {
+        '$route.query'() {
+            if (this.$route.query.location) {
+                this.userLoaction = {
+                    lat: this.$route.query.location.split(',')[1],
+                    lng: this.$route.query.location.split(',')[0],
+                };
+            }
+            if (this.$route.query.merchantLocation) {
+                this.merchantLoaction = {
+                    lat: this.$route.query.merchantLocation.split(',')[1],
+                    lng: this.$route.query.merchantLocation.split(',')[0],
+                };
+            }
+
+            this.$nextTick(() => {
+                setTimeout(() => {
+                    this.initMap();
+                }, 1000);
+            });
+        },
+    },
     mounted() {
         if (this.$route.query.location) {
             this.userLoaction = {

+ 42 - 0
src/main/map/src/views/PolylineRoutePlan.vue

@@ -0,0 +1,42 @@
+<template>
+    <iframe id="iframe" frameborder="0" scrolling="no" :src="src"> </iframe>
+</template>
+<script>
+window.addEventListener(
+    'message',
+    function(event) {
+        if (event.origin === 'https://3gimg.qq.com') {
+            var loc = event.data;
+            console.log(loc);
+            if (window.ReactNativeWebView) {
+                window.ReactNativeWebView.postMessage(JSON.stringify(loc));
+            }
+        }
+    },
+    false,
+);
+export default {
+    name: '',
+    data() {
+        return {
+            location: '',
+        };
+    },
+    computed: {
+        src() {
+            return '  https://apis.map.qq.com/tools/routeplan/eword=故宫博物馆&epointx=116.39710&epointy=39.917200?key=GLFBZ-ZR2W6-76XSA-MF7CQ-GDJ6Z-6FB5K&referer=Dingdong';
+        },
+    },
+    created() {
+        // if (this.$route.query.location) {
+        //     this.location = this.$route.query.location;
+        // }
+    },
+};
+</script>
+<style lang='less' scoped>
+#iframe {
+    width: 100vw;
+    height: 100vh;
+}
+</style>