Public — >index.html
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=cb6152d432c370a781b4b2a80a84e9a6&plugin=AMap.Geocoder"></script>
<script src="/ / webapi.amap.com/ui/1.1/main.js"></script>
Copy the codeNote: this is copied in autonavi’s official website.
Error: AMap is not defined in vue. Config.
module.exports = {
configureWebpack: {
externals: {
AMap: "window.AMap".AMapUI: 'window.AMapUI'}}};Copy the codeThree, use,
Live: all need to seeThe document,The API documentation.
<! -- * @Author: * @Date: 2020-11-29 17:17:28
* @LastEditors:
* @LastEditTime: 2020-12-01 16:04:02* @filepath: * @description: Map usage * Reference blog: HTTPS://blog.csdn.net/lxy869718069/article/details/106355927
https://lbs.amap.com/api/javascript-api/example/infowindow/add-infowindows-to-multiple-markers
-->
<template>
<div class="map_box">
<! -- This is to build the map -->
<div style="width: 100vw; height: 100vh" ref="map" id="map"></div>
<div class="map_bottom">
<p>{{text}}</p>
<span @touchstart="navigation()">
<img src="https://gitee.com/Green_chicken/picture/raw/master/2020-12-1/1606810838380-navigation.png" alt="">
</span>
</div>
</div>
</template>
<script>
/ / reference AMap
import AMap from "AMap";
export default {
data() {
return {
text: "".img: "https://gitee.com/Green_chicken/picture/raw/master/2020-12-1/1606810783390-duanluhe.png".lnglat: [{text: 'new chess week | lion line 1'.lnglats: [116.368904.39.923423] {},text: 'new chess week | lion line 2'.lnglats: [116.382122.39.921176] {},text: 'new chess weeks variable | line 3 lion'.lnglats: [116.387271.39.922501] {},text: 'new chess week | lion line 4'.lnglats: [116.398258.39.914600]}],lnglats: [].// The latitude and longitude obtained by clicking on each point
};
},
created() {
this.Map_call();
},
methods: {
/ * * *@descriptionCall native navigation */
navigation() {
console.log(this.lnglats);
},
Map_call() {
this.$nextTick(() = > {
this.structure(); })},/ * * *@description: Build the map and set the center point *@param {type} Longitude lat latitude *@return {type} * /
structure() {
let that = this;
let map = new AMap.Map(this.$refs.map, {
resizeEnable: true.center: that.lnglat[0].lnglats,// Map center point
zoom: 10// Set the initial layer
});
/ * * *@description: Below is the coordinate conversion, GPS to Autonavi *@param {type}
* @return {type} * /
that.lnglat.forEach(item= > {
AMap.convertFrom(item.lnglats, 'gps'.function (status, result) {
if (result.info === 'ok') {
let marker = new AMap.Marker({
position: item.lnglats,
map: map,
// icon: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
icon: that.img,
});
marker.content = `${item.text}`;
marker.on('click', markerClick);
marker.emit('click', { target: marker });// This window opens automaticallymap.setMarker; }}); })ConvertFrom ([116.368904, 39.923423], 'GPS ', function (status, Result) {if (result.info === 'ok') {let marker = new amap. marker ({position: [116.368904, 39.923423], map: map, // icon: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png", icon: that.img, }); Marker. The content change | = ` new chess weeks lion line `; marker.on('click', markerClick); marker.emit('click', { target: marker }); // This window automatically opens map.setMarker; }}); * /
var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0.0), closeWhenClickMap: false.autoMove: true });
function markerClick(e) {
// console.log(e.target.Ce.position.lng);
// console.log(e.target.Ce.position.lat);that.lnglats = [e.target.Ce.position.lng, e.target.Ce.position.lat]; that.text = e.target.content; infoWindow.setContent(e.target.content); infoWindow.open(map, e.target.getPosition()); } map.setFitView(); }},mounted(){}};</script>
<style scoped>
.map_box {
position: relative;
}
.map_bottom {
position: absolute;
z-index: 1;
bottom: 80px;
left: 30px;
display: flex;
align-items: center;
}
.map_bottom span {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
background: #3282ff;
box-shadow: 0px 4px 9px 1px rgba(50.130.255.0.3);
border-radius: 30px;
margin-left: 30px;
}
.map_bottom span > img {
width: 30px;
height: 30px;
margin-right: 6px;
}
.map_bottom p:nth-of-type(1) {
width: 597px;
height: 88px;
background: #ffffff;
box-shadow: 0px 3px 7px 3px rgba(181.181.181.0.17);
border-radius: 10px;
line-height: 88px;
padding-left: 30px;
box-sizing: border-box;
font-size: 30px;
font-weight: bold;
color: # 333333;
}
/* Remove */ from the map
#map >>> .amap-copyright {
display: none ! important;
}
/* This hides the popup */
#map >>> .amap-info-contentContainer {
display: none ! important;
}
#map >>> .amap-icon {
height: 52px;
width: 52px;
}
#map >>> .amap-icon img {
height: 52px;
width: 52px;
}
</style>
Copy the code4. For use in vUE pages or components,This is recommended to reduce the resource loading of Amap and optimize the performance
1. Download the dependency package:
npm i webpack-require-http --save
Copy the codeNote: You should also uncheck the format of esLint code in vue.config.js, and configure it as follows in vue.config.js:
module.exports = {
lintOnSave: false.configureWebpack: {
// Introduce webpack-require-http to make resource requests in files
externals: [
require('webpack-require-http')]}}Copy the code2, use (encapsulated as a component, can pass in multiple coordinates)
<! -- * @Description: https://blog.csdn.net/lxy869718069/article/details/106355927
https://lbs.amap.com/api/javascript-api/example/infowindow/add-infowindows-to-multiple-markers
https://blog.csdn.net/qq_20567691/article/details/81191987
https://zhuanlan.zhihu.com/p/28497528
-->
<template>
<div style="height:100vh" ref="gaoDeMap">
</div>
</template>
<script>
export default {
props: {
lngLat: {
type: Array.default() {
return [
// By default, name is the name and value is the coordinate
{ name: "".value: [116.205467.39.907761]}]}}},mounted() {
/** * Get map resources */
Promise.all([require("https://webapi.amap.com/maps?v=1.4.15&key=cb6152d432c370a781b4b2a80a84e9a6&plugin=AMap.Geocoder")]).then(() = > {
this.$nextTick(() = > {
this.structure(); })})},methods: {
/ * * *@description: Build the map and set the center point *@param {type} Longitude lat latitude *@return {type} * /
structure() {
let that = this;
// This is to build the map
let map = new AMap.Map(this.$refs.gaoDeMap, {
resizeEnable: true.center: that.lngLat[0].value,// Map center point
zoom: 13// Set the initial layer
});
var geocoder = new AMap.Geocoder({
radius: 1000.extensions: "all"
});
/** **
that.lngLat.forEach(item= > {
AMap.convertFrom(item.value, 'gps'.function (status, result) {
if (result.info === 'ok') {
let marker = new AMap.Marker({
position: item.value,
map: map,
icon: ""});// This is a real time location based on the current coordinates
geocoder.getAddress(item.value, function (status, result) {
if (status === 'complete' && result.regeocode) {
const addre = result.regeocode.formattedAddress;
/* Specifies the contents of the popup box. It can also display name, so it is written as item.name */
marker.content = `${addre}`;
marker.on('click', markerClick);
marker.emit('click', { target: marker });// This window opens automaticallymap.setMarker; }}}})); })var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30), closeWhenClickMap: false.autoMove: true });
function markerClick(e) { infoWindow.setContent(e.target.content); infoWindow.open(map, e.target.getPosition()); } map.setFitView(); }}};</script>
Copy the code