marker

README.md

@@ -21,8 +21,8 @@
 
 本项目实现demo内容有：
 
-> - [ ] 使用起步
-> - [ ] 打点(一个点、多个点、带popup的点)
+> - [x] 使用起步
+> - [x] 打点(一个点、多个点、带popup的点)
 > - [x] 使用
 
 ## 使用起步

src/router/routes.js

@@ -6,6 +6,34 @@ const routes = [
     icon: 'el-icon-s-home',
     component: () => import('@/views/home')
   },
+  {
+    path: '/marker',
+    redirect: '/marker/one',
+    name: 'marker',
+    text: '打点',
+    icon: 'el-icon-s-help',
+    component: () => import('@/views/marker'),
+    children: [
+      {
+        path: '/marker/one',
+        name: 'oneMarker',
+        text: '打一个点',
+        component: () => import('@/views/marker/one')
+      },
+      {
+        path: '/marker/markers',
+        name: 'markers',
+        text: '打多个点',
+        component: () => import('@/views/marker/markers')
+      },
+      {
+        path: '/marker/popup',
+        name: 'popup',
+        text: '打点带popup',
+        component: () => import('@/views/marker/popup')
+      }
+    ]
+  },
   {
     path: '/base',
     redirect: '/base/start',
@@ -21,34 +49,6 @@ const routes = [
         component: () => import('@/views/base/start')
       }
     ]
-  },
-  {
-    path: '/test',
-    redirect: '/test/test1',
-    name: 'test',
-    text: '测试',
-    icon: 'el-icon-s-help',
-    component: () => import('@/views/test'),
-    children: [
-      {
-        path: '/test/test1',
-        name: 'test1',
-        text: '测试1',
-        component: () => import('@/views/test/test1')
-      },
-      {
-        path: '/test/test2',
-        name: 'test2',
-        text: '测试2',
-        component: () => import('@/views/test/test2')
-      },
-      {
-        path: '/test/hh',
-        name: 'hh',
-        text: 'hh',
-        component: () => import('@/views/test/hh')
-      }
-    ]
   }
 ]
 

src/views/home/index.vue

@@ -53,9 +53,9 @@ export default {
         maxZoom: 18, // 最大缩放
         minZoom: 1, // 最小缩放
         layers: [normal], // 地图图层
-        zoomControl: false,  // 是否显示放大缩小按钮
-        attributionControl: false,  // 是否关闭leaflet广告链接（在地图的右下角）
-        closePopupOnClick: true,  // 点击地图是否关闭popup
+        zoomControl: false, // 是否显示放大缩小按钮
+        attributionControl: false, // 是否关闭leaflet广告链接（在地图的右下角）
+        closePopupOnClick: true // 点击地图是否关闭popup
       })
       // 地图模式切换
       L.control.layers(baseLayers, null).addTo(map)

src/views/test/index.vue → src/views/marker/index.vue

 <template>
-  <div>
+  <div style="width: 100%; height: 100%;">
     <router-view></router-view>
   </div>
 </template>

src/views/marker/markers/index.vue

+<template>
+  <div class="map" id="map"></div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet.chinatmsproviders'
+import 'leaflet/dist/leaflet.css'
+
+// 常量
+// 定位中心点
+const center = [30.659791980587134, 104.0633797645569]
+
+export default {
+  mounted () {
+    this.init()
+  },
+  methods: {
+    init () {
+      const map = L.map('map', {
+        center: center,
+        zoom: 13,
+        maxZoom: 18,
+        minZoom: 1,
+        zoomControl: false,
+        attributionControl: false,
+        closePopupOnClick: true
+      })
+
+      L.tileLayer
+        .chinaProvider('GaoDe.Normal.Map', {
+          maxZoom: 18,
+          minZoom: 1,
+          ak: '您申请的key值'
+        })
+        .addTo(map)
+
+      // marker icon自定义
+      const Icon = L.Icon.extend({
+        options: {
+          iconUrl: require('@/assets/gis/monitor.png'),
+          iconSize: [36, 39],
+          iconAnchor: [18, -5]
+        }
+      })
+      const icon = new Icon()
+
+      // 造100个点
+      const arr = new Array(100)
+      const markers = []
+      arr.fill(1).forEach((item, i) => {
+        let marker = new L.Marker(
+          i % 2 === 0 ? [center[0] + i * 0.01 * Math.random(), center[1] + i * 0.01 * Math.random()] : [center[0] - i * 0.01 * Math.random(), center[1] - i * 0.01 * Math.random()],
+          {
+            icon: icon
+          }
+        )
+        const content = `
+          <b>Hello world!</b><br/>
+          我是成都<br/>
+          编号：${i + 1}
+        `
+        marker.bindPopup(content)
+        marker.on('click', e => {
+          console.log('marker被点击了')
+        })
+        markers.push(marker)
+      })
+      // 批量打点
+      L.layerGroup(markers).addTo(map)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.map {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/marker/one/index.vue

+<template>
+  <div class="map" id="map"></div>
+</template>
+
+<script>
+import L from 'leaflet'
+import 'leaflet.chinatmsproviders'
+import 'leaflet/dist/leaflet.css'
+
+// 常量
+// 定位中心点
+const center = [30.659791980587134, 104.0633797645569]
+
+export default {
+  mounted () {
+    this.init()
+  },
+  methods: {
+    init () {
+      const map = L.map('map', {
+        center: center,
+        zoom: 13,
+        maxZoom: 18,
+        minZoom: 1,
+        zoomControl: false,
+        attributionControl: false,
+        closePopupOnClick: true
+      })
+
+      // 采用addTo添加地图图层，一般addTo用的比较多
+      L.tileLayer
+        .chinaProvider('GaoDe.Normal.Map', {
+          maxZoom: 18,
+          minZoom: 1,
+          ak: '您申请的key值'
+        })
+        .addTo(map)
+      // 或采用addLayer添加地图图层
+      // const tileLayer = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
+      //   maxZoom: 18,
+      //   minZoom: 1,
+      //   ak: '您申请的key值'
+      // })
+      // map.addLayer(tileLayer)
+
+      // marker icon自定义
+      const Icon = L.Icon.extend({
+        options: {
+          iconUrl: require('@/assets/gis/monitor.png'),
+          iconSize: [36, 39],
+          iconAnchor: [18, -5]
+        }
+      })
+
+      const content = `
+        <b>Hello world!</b><br/>
+        我是成都<br/>
+        时间戳：${+new Date()}
+      `
+
+      L.marker(center, {
+        icon: new Icon()
+      })
+        .addTo(map)
+        .bindPopup(content)
+        .openPopup()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.map {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/test/hh/index.vue → src/views/marker/popup/index.vue

 <template>
   <div>
-    hhhhhhhhhh
+    起步
   </div>
 </template>

src/views/test/test1/index.vue

-<template>
-  <div class="about">
-    1
-  </div>
-</template>

src/views/test/test2/index.vue

-<template>
-  <div class="about">
-    2
-  </div>
-</template>