preface
Has been trying to explore in writing code, hope to write an article, all their efforts are recorded. Next, the main development steps are as follows: 1. Introduce Amap, 2. HTML page, 3Copy the codeIntroduce the Map of Gaud
Because autonavi revision, the use of high need key+ key use.
window._AMapSecurityConfig = {
securityJsCode:'key',}import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
/ / gold key
key: ' '.// Plug-in collection (plug-in on demand)
// plugin: ['AMap.Geolocation', 'AMap.Autocomplete', 'AMap.PlaceSearch']
plugin: [
'AMap.Geocoder'.'AMap.Autocomplete'.// Enter the prompt plug-in
'AMap.PlaceSearch'.// POI search plugin
'AMap.Scale'.// Lower right thumbnail plug-in scale
'AMap.OverView'.// Map Hawk-eye plugin
'AMap.ToolBar'.// Map toolbar
'AMap.MapType'.// Class switch control, to achieve the default layer and satellite image, implementation of the traffic layer between the switch control
'AMap.PolyEditor'.// Edit polyline, edge shape
'AMap.CircleEditor'.// Circular editor plug-in
'AMap.Geolocation' // The location control is used to obtain and display the longitude and latitude location of the user host]})Copy the codeHTML page module
<template>
<div
class="amap-page-container"
style="width: 100%; height: 400px; margin-bottom: 200px; background: #ccc"
>
<! -- <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" ></el-amap-search-box>-->
<el-amap
vid="amapDemo"
:center="center"
:zoom="zoom"
class="amap-demo"
:plugin="plugin"
:events="events"
>
<el-amap-marker
v-for="(marker, index) in markers"
:position="marker"
:key="'marker' + index"
></el-amap-marker>
</el-amap>
<div class="toolbar" v-if="loaded">
<div style="font-size:15px; margin:10px 0px 10px 10px; border-bottom: 1px solid #e6e6e6;" >Address: {{address}}</div>
</div>
<div v-else>Is located</div>
<div class="addressList">
<div
class="item"
v-for="(item, index) in addressList"
:key="index"
@click="sendMapMsg(item)"
>
<div class="content" >
<div class="name">{{ item.name }}</div>
<div class="address">{{ item.address }}</div>
</div>
<div class="active">{{ index == 0 ? "Tick" : ""}}</div>
</div>
</div>
</div>
</template>
Copy the codeJs page, mainly to achieve the required positioning function.
export default {
data: function() {
let self = this;
return {
markers: [].searchOption: {
city: "The country".citylimit: false
},
zoom: 12.loaded: false.center: [121.59996.31.197646].plugin: [{pName: "Geolocation".// Whether to use high precision positioning. Default is true
enableHighAccuracy: true.// // Stop positioning after 10 seconds, default: infinity
// timeout: 10000,
// // automatically migrated coordinates are gaode coordinates, default: true
convert: true.// // Displays the location button. Default: true
//showButton: true,
// // Location button docking position, default 'LB', lower left corner
// buttonPosition: 'RB',
// // Displays a flag in the location after the location is successfully located. The default value is true
showMarker: true.// Use a circle to indicate the location accuracy range after the location is successful. Default: true
showCircle: true.// // After the location is successfully located, the location is used as the center point of the map. The default value is true
panToLocation: true.// // After successful positioning, adjust the map field of view to make the positioning position and accuracy range visible in the field of view. Default: false
zoomToAccuracy: true.events: {
init(o) {
console.log(1);
let addressInfo =
JSON.parse(sessionStorage.getItem("addressInfo")) || {};
console.log(addressInfo);
var placeSearch = new AMap.PlaceSearch();
if (addressInfo.name && addressInfo.lng && addressInfo.lat) {
console.log("Location information available");
self.lng = addressInfo.lng;
self.lat = addressInfo.lat;
self.center = [addressInfo.lng, addressInfo.lat];
self.address = addressInfo.address;
console.log(addressInfo.name)
placeSearch.search(addressInfo.name, function(status, result) {
console.log("Location result");
console.log(result);
if (result.poiList.pois.length>=1) {
self.addressList = result.poiList.pois;
self.selectedAddress = addressInfo;
console.log("Address list", self.addressList);
console.log("Current address", self.selectedAddress);
let isSelectIndex = self.addressList.findIndex(
i= > i.id == self.selectedAddress.id
);
console.log("= =");
console.log(isSelectIndex);
if(isSelectIndex ! = -1) {
self.addressList[isSelectIndex].selected = true;
} else {
self.addressList[0].selected = true;
}
self.loaded = true;
self.$nextTick();
}else{
self.loaded = true; }}); }else {
// o is an instance of the Autonavi location plugin
o.getCurrentPosition((status, result) = > {
console.log("No location information");
if (result && result.position) {
console.log("Get current location information");
console.log(result);
self.lng = result.position.lng;
self.lat = result.position.lat;
self.center = [self.lng, self.lat];
// Locate the address
self.address = result.formattedAddress;
console.log(result, "000");
placeSearch.search(self.address, function(status, resultTemp) {
console.log(resultTemp)
if (resultTemp.poiList.pois.length>=1) {
console.log("Get location address list");
console.log(resultTemp); self.addressList = resultTemp.poiList.pois; }});// Why add this line when there is no address to take the current location but do not display the list
// The list is the formattedAddress to pass through the address name
// self.addressList=self.addressList.concat(obj1)
self.loaded = true;
self.$nextTick();
}else{
self.loaded = true; }}); }}}}],address: "".events: {
click(e) {
console.log("= = = = =");
console.log(e);
let { lng, lat } = e.lnglat;
self.lng = lng;
self.lat = lat;
// This is done through the Autonavi SDK.
var geocoder = new AMap.Geocoder({
radius: 1000.extensions: "all"
});
geocoder.getAddress([lng, lat], function(status, result) {
if (status === "complete" && result.info === "OK") {
if(result && result.regeocode) { self.address = result.regeocode.formattedAddress; self.name = result.regeocode.addressComponent.city; self.$nextTick(); }}}); }},lng: 0.lat: 0.addressList: [].selectedAddress: {}}; },methods: {
sendMapMsg(e){
this.$emit('func',e);
},
handleSelectedAddress(e) {
this.selectedAddress = e;
console.log(this.selectedAddress);
letaddressInfo = { ... e,lng: e.location.lng,
lat: e.location.lat
};
sessionStorage.setItem("addressInfo".JSON.stringify(addressInfo));
//this.$router.go(-1);
},
addMarker: function() {
let lng = 121.5 + Math.round(Math.random() * 1000) / 10000;
let lat = 31.197646 + Math.round(Math.random() * 500) / 10000;
this.markers.push([lng, lat]);
},
onSearchResult(pois) {
console.log("Search Results");
console.log(pois);
this.addressList = pois;
this.address = this.addressList.address;
let latSum = 0;
let lngSum = 0;
if (pois.length > 0) {
pois.forEach(poi= > {
let { lng, lat } = poi;
lngSum += lng;
latSum += lat;
this.markers.push([poi.lng, poi.lat]);
});
let mapcenter = {
lng: lngSum / pois.length,
lat: latSum / pois.length
};
this.center = [mapcenter.lng, mapcenter.lat]; }}},watch: {
address: {
handler: function(val, oldVal) {
this.address = val;
this.$emit("sendAddress".this.address);
},
// Deep observation monitor
deep: true}}};Copy the code