Writing a large screen recently requires the introduction of a native Gaud map
Just think of a simple package to avoid repeated wheel!
Introduction to Gord map
Autonavi official website DEMO- visit here
If AMap is not defined, go to here
The idea is simple: create an amap.js file and write all the map functions into amap.js
<template>
<div :style="height:300px">
<! -- Basic map -->
<div id="container"></div>
</div>
</template>
<script>
import amap from "@/utils/subeiMap/amap.js";
export default {
name: 'index'.
data() { return{}},
mounted() {
// map - Initializes the display map
// Pass in the map ID
amap.mapInit("container")
}
}
</script>
Copy the codeamap.js
- Amap. Js file
import AMap from 'AMap'
let map
let marker
const isTest = false
/ / center
const locationTest = {
lat: '108.967391'.
lng: '34.272724'
}
/ / coordinates of points
const makersTest = [{
name: 'Happy Forest Zone Resettlement Community'.
address: Dongsheng Bei Lu, Xincheng District, Xi 'an city, Shaanxi Province.
DeviceStatus: 2, // status, used to display the status of each point
location: {
lat: '108.967391'.
lng: '34.272724'
}
}, {
name: 'Custom icon'.
address: Dongsheng Bei Lu, Xincheng District, Xi 'an city, Shaanxi Province.
DeviceStatus: 3, // status, used to display the status of each point
location: {
lat: '108.956843'.
lng: '34.267785'
}
}]
/ / area
const areasTest = [{
name: 'Xi 'an'.
},
{
name: 'Bright zone'.
},
{
name: 'Guangzhou'.
},
]
// Map initialization can achieve points, 1 initialization, map level, a point as the center, custom effect
function mapInit(obj) {
console.log("Initialize --")
let center
if (isTest) {
center = [locationTest.lat, locationTest.lng]
} else {
center = ['108.956843'.'34.267785']
}
map = new AMap.Map(obj, {
mapStyle: 'amap://styles/darkblue'// Customize the effect
resizeEnable: true.
rotateEnable: false.
pitchEnable: false.
expandZoomRange: true.
Zoom: 10, // Set the map level
// zooms: [9, 20], // Set the zoom level
Center: center // Set the center point
})
return map
}
// map - punctuation (single or multiple)
function map_addMaker(makers, callback) {
if (isTest) {
// Multiple test points loop
makersTest.forEach((item) => {
// Create a point
marker = new AMap.Marker({
// icon: icon, // icon
ImageSize: new amap. Size(22, 28), // icon Size(32, 32),
Position: [item.location.lat, item.location. LNG], // coordinates
offset: new AMap.Pixel(-12, 0)
})
marker.setMap(map)
marker.name = item.name
// Add a click event to the tag, passing in the corresponding argument
marker.on('click', (e) => {
// console.log("Trigger point click event" + e)
callback(e.target.name)
})
})
} else {
// Create a point
marker = new AMap.Marker({
// icon: icon, // icon
ImageSize: new amap. Size(22, 28), // icon Size(32, 32),
Position: [makers. Location. lat, makers. Location. LNG], // coordinates
offset: new AMap.Pixel(-12, 0)
})
marker.setMap(map)
marker.name = makers.name
// Add a click event to the tag, passing in the corresponding argument
marker.on('click', (e) => {
// console.log("Trigger point click event" + e)
callback(e.target.name)
})
}
}
// Map - Area display
function map_addArea(area) {
let areasData
if (isTest) {
areasData = areasTest
} else {
areasData = area
}
AMap.service('AMap.DistrictSearch'.function () {
let opts = {
Subdistrict: 1, // return to the next level
extensions: 'all'// Return the boundary coordinate group and other specific information
level: 'city'// Query the administrative level as city
}
// instantiate DistrictSearch
let district = new AMap.DistrictSearch(opts)
district.setLevel('district')
// Administrative query
areasData.forEach(item => {
district.search(`${item.name}`, function (status, result) {
// Get boundary information
let bounds = result.districtList[0].boundaries
let polygons = []
if (bounds) {
for (let i = 0, l = bounds.length; i < l; i++) {
// Generate an administrative district polygon
let polygon = new AMap.Polygon({
map: map,
strokeWeight: 1,
path: bounds[i],
FillOpacity: 0.2,
fillColor: 'rgba (71228194,0.44)'.
strokeColor: 'rgba(83,204,79,0.65)'
})
polygons.push(polygon)
}
}
})
})
})
}
// Map - pop-up layer
function map_show(makers, name, callback) {
if (isTest) {
makersTest.forEach((item) => {
if(! item.name.includes(name)) {
return
}
// Set the center point
map.setZoomAndCenter(12, [item.location.lat, item.location.lng])
callback(item)
})
} else {
makers.forEach((item) => {
if(! item.name.includes(name)) {
return
}
// Set the center point
map.setZoomAndCenter(12, [item.location.lat, item.location.lng])
callback(item)
})
}
}
// Map - custom point style
function map_addMakerStyle(makers, callback) {
if (isTest) {
// Multiple test points loop
makersTest.forEach((item) => {
// Create a point
var info = []
info.push(`<div class='waringBox'> warning < / div > `)
marker = new AMap.Marker({
Position: [item.location.lat, item.location. LNG], // coordinates
content: info.join(' ') // Use the default message form box style to display the message content
})
marker.setMap(map)
marker.name = item.name
// Add a click event to the tag, passing in the corresponding argument
marker.on('click', (e) => {
callback(e.target.name)
})
})
} else {
// Create a point
var info = []
info.push(`<div class='waringBox'> warning < / div > `)
marker = new AMap.Marker({
Position: [makers. Location. lat, makers. Location. LNG], // coordinates
content: info.join(' ') // Use the default message form box style to display the message content
})
marker.setMap(map)
marker.name = makers.name
// Add a click event to the tag, passing in the corresponding argument
marker.on('click', (e) => {
callback(e.target.name)
})
}
}
export default {
mapInit,
map_addMaker,
map_addMakerStyle,
map_addArea,
map_show
}
Copy the code