scorpio 2 роки тому
батько
коміт
84a8d78fc0

+ 1 - 1
src/views/project/componens/info6.vue

@@ -148,7 +148,7 @@ export default {
         .projectAnnualInvestment({ projectId: 111 })
         .then(res => {
           if (res.code === 200) {
-            console.log(res.data())
+            console.log(res.data)
           }
         })
     },

+ 50 - 10
src/views/project/componens/map-picker.vue

@@ -8,6 +8,13 @@
       <template #header
         ><h4 class="full-width text-left">地理位置</h4></template
       >
+      <input
+        v-model="keyword"
+        id="input"
+        placeholder="搜索位置"
+        style="z-index: 9999"
+        @keyup.enter="searchKeyword"
+      />
       <div class="flex flex-center flex-justify-start flex-col">
         <div id="container" class="map"></div>
         <el-divider />
@@ -79,7 +86,11 @@ export default {
   data() {
     return {
       show: false,
-      aMap: null
+      aMap: null,
+      keyword: '',
+      auto: null,
+      lnglat: [], // 经纬度数组 [lng,lat]
+      placeSearch: null
     }
   },
   methods: {
@@ -87,10 +98,9 @@ export default {
       AMapLoader.load({
         key: '6577c6fd4841e6c69d5fb1bd15bd4696', // 申请好的Web端开发者Key,首次调用 load 时必填
         version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
-        plugins: ['AMap.Scale', 'AMap.Marker'] // 需要使用的的插件列表,如比例尺'AMap.Scale'等
+        plugins: ['AMap.Scale', 'AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表,如比例尺'AMap.Scale'等
       })
         .then(AMap => {
-          this.aMap = AMap
           this.map = new AMap.Map('container', {
             // 设置地图容器id
             viewMode: '2D', // 是否为3D地图模式
@@ -98,25 +108,55 @@ export default {
             mapStyle: 'amap://styles/whitesmoke',
             center: [this.latitude, this.longitude] // 初始化地图中心点位置
           })
-          this.addMarker()
+          this.addMarker(this.latitude, this.longitude)
           this.addEvent()
+          this.mapSearchInit()
         })
         .catch(e => {
           console.log(e)
         })
     },
-    addMarker() {
-      console.log('addMark')
-      const marker = new this.aMap.Marker({
-        position: new this.aMap.LngLat(this.latitude, this.longitude), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
-        title: '大理'
+    addMarker(lng, lat) {
+      console.log('位置', lng, lat) // lnglat=[经度,纬度]
+      const marker = new AMap.Marker({
+        position: [lng, lat]
       })
-      this.map.add(marker)
+      marker.setMap(this.map)
     },
     addEvent() {
       this.map.on('click', event => {
         console.log(event)
       })
+    },
+    /** 初始化搜索工具 */
+    mapSearchInit() {
+      // 绑定自动提示
+      const autoOptions = {
+        input: 'input'
+      }
+      this.auto = new AMap.Autocomplete(autoOptions)
+      // 注册placeSearch组件
+      this.placeSearch = new AMap.PlaceSearch({
+        city: '大理'
+      })
+      console.log(this.auto, this.placeSearch)
+    },
+    /** 关键词搜索 */
+    searchKeyword() {
+      console.log(this.keyword)
+      this.placeSearch.search(this.keyword, function (status, result) {
+        // 查询成功时,result即对应匹配的POI信息
+        console.log(status)
+        console.log(result)
+      })
+    },
+
+    // 当选中某条搜索记录时触发
+    selectSite(e) {
+      console.log(e)
+      this.lnglat = [e.poi.location.lng, e.poi.location.lat]
+      this.placeSearch.setCity(e.poi.adcode)
+      this.placeSearch.search(e.poi.name)
     }
   }
 }