Vue integrates Gaode map API to realize positioning and custom style information form

scene

If you follow the instructions of the front-end and back-end separate version to build the local environment and run the project:

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662

After the front and rear end projects are built, Gaode map should be integrated to realize the map display and positioning function.

 

Then, on the basis of the map, locate according to the coordinates and customize the information form. The implementation effect is as follows

 

Then close the form, and you can also realize the image of positioning mark

 

Note:

Blog:
https://blog.csdn.net/badao_liumang_qizhi
Official account
Domineering procedural ape
Get programming related e-books, tutorial push and free download.

realization

Log in to Gaode open platform and create a new application

https://developer.amap.com/

 

then

 

Then create a new key for the new application. Select the Web side for the service platform here, and then submit

 

Then you can get the Key, which will be used in the following code

Then install the dependencies related to Gaode map Amap in the Vue project

npm install vue-amap

 

Then in main JS, and fill in the above key

//Introducing Gaode map
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: 'Your own gaude map key',
  plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'],
  v: '1.4.4',
  uiVersion: '1.0'
})

Add location

 

Then write map component amap vue

<template lang="html">
 <div style="width:100%;height:800px;">
    <div class="container">
      <div class="search-box">
        <input
          v-model="searchKey"
          type="search"
          id="search">
        <button @click="searchByHand">search</button>
        <div class="tip-box" id="searchTip"></div>
       <button @click="positionByHand">location</button>
      </div>

      <!--
        amap-manager:  Map management object
        vid: Map container node ID
        zooms:  Zoom level range of map display, in PC On, default range[3,18],Value range[3-18];On mobile devices, the default range[3-19],Value range[3-19]
        center:  Coordinate value of map center point
        plugin: Plug ins for maps
        events:  event
      -->

      <el-amap class="amap-box"
        :amap-manager="amapManager"
        :vid="'amap-vue'"
        :zoom="zoom"
        :plugin="plugin"
        :center="center"
        :events="events"
      >
        <!-- sign -->
        <el-amap-marker v-for="(marker, index) in carmarkers" :key="index" :position="marker.position" :vid="index" :content="marker.content" :events="marker.events"></el-amap-marker>
        <el-amap-info-window
            :position="currentWindow.position"
            :content="currentWindow.content"
            :visible="currentWindow.visible"
            :events="currentWindow.events">
        </el-amap-info-window>
      </el-amap>
    </div>
 </div>
</template>

<script>
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
let amapManager = new AMapManager()
export default {
  name:'AMap',
  data() {
    let self = this
    return {
      carmarkers :[],
      currentWindow: {
        position: [116.396624,39.908167],
        content: '111',
        events: {},
        visible: false
      },
      address: null,
      searchKey: '',
      amapManager,
      markers: [],
      searchOption: {
        city: 'whole country',
        citylimit: true
      },
      center: [116.396624,39.908167],
      zoom: 17,
      lng: 0,
      lat: 0,
      loaded: false,
      events: {
        init() {
          lazyAMapApiLoaderInstance.load().then(() => {
            self.initSearch()
          })
        },
        // Click to get the data of the address
        click(e) {
          self.markers = []
          let { lng, lat } = e.lnglat
          self.lng = lng
          self.lat = lat
          self.center = [lng, lat]
          self.markers.push([lng, lat])
          // This is done through the Gaode SDK.
          let geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: 'all'
          })
          console.log(lng+","+lat) //Console print coordinates
         
          geocoder.getAddress([lng, lat], function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
              if (result && result.regeocode) {
                console.log(result.regeocode.formattedAddress) //Console print address
                self.address = result.regeocode.formattedAddress
                self.searchKey = result.regeocode.formattedAddress
                self.$nextTick()
              }
            }
          })
        }
      },
      // Some tool plug-ins
      plugin: [
        {
          pName: 'Geocoder',
          events: {
            init (o) {
              //Console Log ("some tool plug-ins -- Address" + o.getAddress())
            }
          }
        },
        {
          // location
          pName: 'Geolocation',
          events: {
            init(o) {
              // o is an example of Gaode map positioning plug-in
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  // Set longitude
                  self.lng = result.position.lng
                  // Set dimension
                  self.lat = result.position.lat
                  // Set coordinates
                  self.center = [self.lng, self.lat]
                  self.markers.push([self.lng, self.lat])
                  // load
                  self.loaded = true
                  // After the page is rendered
                  self.$nextTick()
                }
              })
            }
          }
        },
        {
          // toolbar
          pName: 'ToolBar',
          events: {
            init(instance) {
               //Console Log ("toolbar:" + instance);
            }
          }
        },
        {
          // Eagle eye
          pName: 'OverView',
          events: {
            init(instance) {
               //Console Log ("Eagle Eye:" + instance);
            }
          }
        },
        {
          // Map type
          pName: 'MapType',
          defaultType: 0,
          events: {
            init(instance) {
               //Console Log ("map type:" + instance);
            }
          }
        },
        {
          // search
          pName: 'PlaceSearch',
          events: {
            init(instance) {
               //Console Instance + log ("search:")
            }
          }
        }
      ]
    }
  },
  methods: {
    initSearch() {
      let vm = this
      let map = this.amapManager.getMap()
      AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
        var poiPicker = new PoiPicker({
          input: 'search',
          placeSearchOptions: {
            map: map,
            pageSize: 10
          },
          suggestContainer: 'searchTip',
          searchResultsContainer: 'searchTip'
        })
        vm.poiPicker = poiPicker
        // Listen to poi selected information
        poiPicker.on('poiPicked', function(poiResult) {
          // console.log(poiResult)
           let source = poiResult.source
           let poi = poiResult.item
           if (source !== 'search') {
             poiPicker.searchByKeyword(poi.name)
           } else {
             poiPicker.clearSearchResults()
             vm.markers = []
             let lng = poi.location.lng
             let lat = poi.location.lat
             let address = poi.cityname + poi.adname + poi.name
             vm.center = [lng, lat]
             vm.markers.push([lng, lat])
             vm.lng = lng
             vm.lat = lat
             vm.address = address
             vm.searchKey = address
           }
        })
      })
    },
    searchByHand() {
      if (this.searchKey !== '') {
        this.poiPicker.searchByKeyword(this.searchKey)
      }
    },
    positionByHand() {
            this.currentWindow = {
              position: [121.492439,31.233264],
              content: `<div style="color: #1c84c6; > official account: the overriding procedure, ape </div>`,
              events: {
                close: (e) => {
                  this.currentWindow.visible = false
                }
              },
              visible: true }
            this.carmarkers = [
              {
                position:[121.492439,31.233264],
                content: `<div><img  width=50 height=50 src="https://images. cnblogs. com/cnblogs_ com/badaoliumangqizhi/1539113/o_ qrcode_ for_ gh_ f76a8d7271eb_ 258. JPG "ALT =" auto "> < / div > `,
                events: {
                  click: (e) => {
                    this.currentWindow = {
                      position: this.center,
                      content: `<div style="color: #1c84c6; > official account: the overriding procedure, ape </div>`,
                      events: {
                        close: (e) => {
                          this.currentWindow.visible = false
                        }
                      },
                      visible: true }
                  }
                }
              }
            ]
    }
  }
}
</script>

<style lang="css">
.container {
  width: 100%;
  height: 100%;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid #999;
}
.search-box {
  position: absolute;
  z-index: 5;
  width: 30%;
  left: 13%;
  top: 10px;
  height: 30px;
}
.search-box input {
  float: left;
  width: 80%;
  height: 100%;
  border: 1px solid #30ccc1;
  padding: 0 8px;
  outline: none;
}
.search-box button {
  float: left;
  width: 20%;
  height: 100%;
  background: #30ccc1;
  border: 1px solid #30ccc1;
  color: #fff;
  outline: none;
}
.tip-box {
  width: 100%;
  max-height: 260px;
  position: absolute;
  top: 30px;
  overflow-y: auto;
  background-color: #fff;
}
</style>

Location of components

 

Then find the page that needs to display the map component. Here is the home page. Delete the useless content, and then

import AMap from '@/components/Amap/AMap'
export default {
  name: "index",
   components: {
      AMap
  },

Introduce components, and then display the map where necessary

<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <AMap></AMap>
    </el-row>
    <el-divider />
  </div>
</template>

In this way, we can see the function of realizing the above requirements

Note that the development of other functions can refer to the official development documents

Click a custom marker on the map and click

<el-amap-marker v-for="(marker, index) in carmarkers" :key="index" :position="marker.position" :vid="index" :content="marker.content" :events="marker.events"></el-amap-marker>

Tag

Then customize the form through

        <el-amap-info-window
            :position="currentWindow.position"
            :content="currentWindow.content"
            :visible="currentWindow.visible"
            :events="currentWindow.events">
        </el-amap-info-window>

Then in the click event of the positioning button

    positionByHand() {
            this.currentWindow = {
              position: [121.492439,31.233264],
              content: `<div style="color: #1c84c6; > official account: the overriding procedure, ape </div>`,
              events: {
                close: (e) => {
                  this.currentWindow.visible = false
                }
              },
              visible: true }
            this.carmarkers = [
              {
                position:[121.492439,31.233264],
                content: `<div><img  width=50 height=50 src="https://images. cnblogs. com/cnblogs_ com/badaoliumangqizhi/1539113/o_ qrcode_ for_ gh_ f76a8d7271eb_ 258. JPG "ALT =" auto "> < / div > `,
                events: {
                  click: (e) => {
                    this.currentWindow = {
                      position: this.center,
                      content: `<div style="color: #1c84c6; > official account: the overriding procedure, ape </div>`,
                      events: {
                        close: (e) => {
                          this.currentWindow.visible = false
                        }
                      },
                      visible: true }
                  }
                }
              }
            ]
    }

First set the coordinates and position of the custom form and the content of the form to be displayed, then set the picture coverage of the point mark, and set the click event of the point mark picture to display the above custom information form.

 

Tags: Vue

Posted by epetoke on Fri, 15 Apr 2022 04:57:45 +0930