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
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.