Use Gaode map positioning, search for surrounding merchants, and cover markers in the Vue-based H5 page
First install the Amap plug-in
npm i @amap/amap-jsapi-loader --save
Map hosting container
<template>
<div id="container"></div>
</template>
Map container style
<style scoped>
#container{<!-- -->
padding:0px;
margin: 0px;
width: 100%;
height: 800px;
}
</style>
Introduce JS API Loader, initialize the map, and add coverage markers
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import axios from "axios";
import Qs from "qs";
export default {<!-- -->
data() {<!-- -->
return {<!-- -->
map: null,
marker: [],
arr: [
{<!-- -->
name: "Ruyi Lake",
icon: "https://img1.baidu.com/it/u=3590267805,2648573622 & amp;fm=253 & amp;fmt=auto & amp;app=138 & amp;f=JPEG?w=500 & amp ;h=500",
ip1: 113.73241336023165,
ip2: 34.77923169201559,
},
],
};
},
mounted() {<!-- -->
this.initMap();
},
methods: {<!-- -->
initMap() {<!-- -->
var _this = this;
AMapLoader.load({<!-- -->
key: "xxxxx", // The applied web developer Key, required when calling load for the first time
version: "", // Specify the version of JSAPI to be loaded, the default is 1.4.15
plugins: ["AMap.Geolocation"], // List of plugins to be used, such as scale 'AMap.Scale', etc.
})
.then((AMap) => {<!-- -->
this.map = new AMap.Map("container", {<!-- -->
//Set map container id
viewMode: "3D", //Whether it is 3D map mode
zoom: 13, //Initialize map level
center: [113.73072265943132, 34.77648371816693], //Initialize the map center point position
});
for (var i = 0; i < _this.arr.length; i + + ) {<!-- -->
var content = `<div class='marker-wrap'><img src='${<!-- -->_this.arr[i].icon}' /><div class='marker-txt'> ${<!-- -->_this.arr[i].name}</div></div>`; //Customize the overlay content
var markerItem = new AMap.Marker({<!-- -->
position: [_this.arr[i].ip1, _this.arr[i].ip2], // latitude and longitude
offset: new AMap.Pixel(-13, -20), //cover offset
content: content, //custom content
});
markerItem.on("click", _this.markerClick); //Add a click event to the cover
markerItem.setExtData({<!-- --> deviceMarkId: _this.arr[i] }); //Add custom parameters for the overlay click event
_this.marker.push(markerItem); //Render the overlay on the map
}
this.map.add(this.marker);
})
.catch((e) => {<!-- -->
console.log(e);
});
},
markerClick(e) {<!-- -->
var demo = e.target.getExtData();
console.log("demo: ", demo);
},
},
};
</script>
To achieve positioning on AMAP, the domain name must start with https (official requirement, otherwise the positioning will fail), and then positioning must be turned on on the mobile phone. Positioning cannot be successful on the computer, AMap.Geolocation
initMap() {<!-- -->
var _this = this;
AMapLoader.load({<!-- -->
key: "xxxx", // The applied web developer Key, required when calling load for the first time
version: "", // Specify the version of JSAPI to be loaded, the default is 1.4.15
plugins: ["AMap.Geolocation"], // List of plugins to be used, such as scale 'AMap.Scale', etc.
})
.then((AMap) => {<!-- -->
this.map = new AMap.Map("container", {<!-- -->
//Set map container id
viewMode: "3D", //Whether it is 3D map mode
zoom: 13, //Initialize map level
// center: [113.73072265943132, 34.77648371816693], //If you use Amap's positioning, you don't need to write this, initialize the map center point position
});
const OPTIONS = {<!-- -->
// Whether to use high-precision positioning, default: true
enableHighAccuracy: true,
//Set the positioning timeout, default: infinity
timeout: 3000,
maximumAge: 0, //Location result cache is 0 milliseconds, default: 0
convert: true, //Automatically offset coordinates. The offset coordinates are Gaode coordinates. Default: true
showButton: true, //Show positioning button, default: true
// Offset of the docking position of the positioning button, default: Pixel(10, 20)
buttonOffset: new AMap.Pixel(10, 20),
// After successful positioning, adjust the map field of view so that the positioning position and accuracy range are visible within the field of view. Default: false
zoomToAccuracy: true,
showMarker: true, //After successful positioning, the point mark is displayed at the positioned position. Default: true
showCircle: true, //After successful positioning, a circle is used to indicate the positioning accuracy range. Default: true
panToLocation: true, //After successful positioning, the located position will be used as the center point of the map. Default: true
// The discharge position of the positioning button, RB means the lower right
buttonPosition: "RB",
};
var geolocation = new AMap.Geolocation(OPTIONS);
_this.map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, "complete", onComplete);
AMap.event.addListener(geolocation, "error", onError);
function onComplete(data) {<!-- -->
console.log("data: ", data);
//data is specific positioning information
}
function onError(err) {<!-- -->
console.log("err: ", err);
// Positioning error
}
})
.catch((e) => {<!-- -->
console.log(e);
});
},
Amap implements surrounding search and keyword search. The search must not exceed 80 characters and is returned in pages. The maximum value per page is 25. The search result screenshot is as follows
search() {<!-- -->
var params = {<!-- -->
key: "xxx", //Users apply for Web service API type Key on the official website of Amap
keywords: "Dennis | Yuelai Yuexi", //The location text information that needs to be retrieved. Multiple keywords are separated by "|", and the total text length cannot exceed 80 characters.
page_size: 25, //The number of data items displayed in the current page
page_num: 1, //What page is requested?
location: "113.73072265943132,34.77648371816693", //There cannot be spaces between coordinates, otherwise the request will be unsuccessful. Center point coordinates
radius: 3000, // Search radius, value range: 0-50000
output: "json", //return result format type,
};
axios({<!-- -->
url: "https://restapi.amap.com/v5/place/around?" + Qs.stringify(params),
method: "get",
headers: {<!-- -->
"Content-Type": "application/x-www-form-urlencoded",
},
}).then((res) => {<!-- -->
console.log("res: ", res);
});
},
initMap() {<!-- -->
var _this = this;
AMapLoader.load({<!-- -->
key: "xx", // The applied web developer Key, required when calling load for the first time
version: "", // Specify the version of JSAPI to be loaded, the default is 1.4.15
plugins: [], // List of plugins to be used, such as scale 'AMap.Scale', etc.
})
.then((AMap) => {<!-- -->
_this.map = new AMap.Map("container", {<!-- -->
//Set map container id
viewMode: "3D", //Whether it is 3D map mode
zoom: 13, //Initialize map level
center: [113.73072265943132, 34.77648371816693], //Initialize the map center point position
});
_this.search();
})
.catch((e) => {<!-- -->
console.log(e);
});
},
Amap realizes locating cities and detailed latitude and longitude, geolocation.getCurrentPosition, geolocation.getCityInfo
initMap() {<!-- -->
var that = this;
AMapLoader.load({<!-- -->
key: "xxx", // The applied web developer Key, required when calling load for the first time
version: "1.4.15", // Specify the version of JSAPI to be loaded, the default is 1.4.15
plugins: ["AMap.Geolocation"], // List of plugins to be used, such as scale 'AMap.Scale', etc.
})
.then((AMap) => {<!-- -->
that.map = new AMap.Map("container", {<!-- -->
resizeEnable: true,
//Set map container id
viewMode: "3D", //Whether it is 3D map mode
zoom: 16, //Initialize map level
// center: [113.73072265943132, 34.77648371816693], //Initialize the map center point position
});
const OPTIONS = {<!-- -->
// Whether to use high-precision positioning, default: true
enableHighAccuracy: true,
// Set positioning timeout, default: infinity
timeout: 3000,
maximumAge: 0, //Location result cache is 0 milliseconds, default: 0
convert: true, //Automatically offset coordinates. The offset coordinates are Gaode coordinates. Default: true
showButton: true, //Show positioning button, default: true
// Offset of the docking position of the positioning button, default: Pixel(10, 20)
buttonOffset: new AMap.Pixel(10, 20),
// After successful positioning, adjust the map field of view so that the positioning position and accuracy range are visible within the field of view. Default: false
zoomToAccuracy: true,
showMarker: true, //Display point mark at the positioned position after successful positioning, default: true
showCircle: true, //After successful positioning, a circle is used to indicate the positioning accuracy range. Default: true
panToLocation: true, //After successful positioning, the positioned position will be used as the center point of the map. Default: true
// The discharge position of the positioning button, RB means lower right
buttonPosition: "RB",
};
var geolocation = new AMap.Geolocation(OPTIONS);
that.map.addControl(geolocation);
geolocation.getCityInfo((status, result) => {<!-- -->
if (status == "complete") {<!-- -->
console.log(result)
geolocation.getCurrentPosition((status1, result1) => {<!-- -->
if (status1 == "complete") {<!-- -->
console.log(result1)
} else {<!-- -->
console.log(result1)
}
});
} else {<!-- -->
console.log(result)
}
});
})
.catch((e) => {<!-- -->
console.log(e);
});
},
