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.