Browse Source

增加路线

caner 2 years ago
parent
commit
710f4707a2
1 changed files with 28 additions and 2 deletions
  1. 28 2
      src/components/map.vue

+ 28 - 2
src/components/map.vue

@@ -62,7 +62,7 @@ onMounted(() => {
   AMapLoader.load({
     key: '0c5c83112cafefa77154769b4433c3df',
     version: '2.0',
-    plugins: [ 'AMap.DistrictSearch', 'AMap.Weather', 'AMap.Bounds' ],
+    plugins: [ 'AMap.DistrictSearch', 'AMap.Weather', 'AMap.Bounds', 'AMap.Driving' ],
     AMapUI: {
       version: '1.1',
       plugins: [ 'geo/DistrictExplorer' ]
@@ -98,7 +98,7 @@ onMounted(() => {
     // 添加mark
     const mark = new AMap.Marker({
       title: 'test',
-      position: [ 103.001033, 29.987722 ],
+      position: [ 103.006916, 29.983835 ],
       cursor: 'pointer',
       icon: new AMap.Icon({
         image: img36,
@@ -139,7 +139,33 @@ onMounted(() => {
         })
       })
     })
+    // 增加路线
+    const driving = new AMap.Driving({
+      map
+    })
 
+    // 根据起终点名称规划驾车导航路线
+    driving.search([
+      { keyword: '鑫源大厦', city: '雅安市' },
+      { keyword: '雅安农业大学', city: '雅安市' }
+    ], (status:string, result:Any) => {
+      if (status === 'complete') {
+        // const { routes } = result
+        // const paths = routes[0].steps.map((el: { path: Any }) => (el.path))
+        console.log('导航数据获取成功', result)
+        // const polyline = new AMap.Polyline({
+        //   path: paths,
+        //   strokeWeight: 5,
+        //   borderWeight: 5, // 线条宽度,默认为 1
+        //   strokeColor: 'red', // 线条颜色
+        //   lineJoin: 'bevel', // 折线拐点连接处样式
+        //   geodesic: true
+        // })
+        // map.add(polyline)
+      } else {
+        console.error(`获取驾车数据失败:${result}`)
+      }
+    })
     Maps = map
     AMaps = AMap
   })