1. Preparation stage
Enter the Gaode development platform (Gaode open platform | Gaode map API), log in to your account, if you do not have an account, you need to register first, and perform developer authentication. Since I have already authenticated, the direct registration process will not be displayed. up.
Open the console, select Application Management – My Applications, create a new application, fill in the application name and application type, and click New.
Next, add a Key for this new application, click Add, fill in the key name, select the service platform as Web (JS API), and select Submit
After successfully creating the Key, we get our Key and security key, which we will use in the next development. At this point our preparations are complete.
2. Page development
The introduction of JS api has officially passed two schemes. We use vue development, so we use the first scheme to install JSAPI Loader with npm
Install Loader by nmp
npm i @amap/amap-jsapi-loader --save
Create a new vue file and import JSAPI Loader
import AMapLoader from '@amap/amap-jsapi-loader';
1. Basic map usage
add map div
<div id="container"></div>
//Initialization must set height and width
#container {
width:1000px;
height: 500px;
}
define data
data() {
return {
//The map object is not declared here, you can directly use this.map assignment or use non-responsive ordinary objects to store.
//map:null,
// map loading parameters
AMapLoader: {
"key": process.env.VUE_APP_GAODE_KEY, // Applied web developer Key, required when calling load for the first time
"version": "2.0", // Specify the version of JSAPI to load, the default is 1.4.15
"plugins": [], // A list of plugins that need to be used, such as the scale 'AMap.Scale', etc.
},
// map drawing parameters
//More parameters can be accessed at https://lbs.amap.com/api/jsapi-v2/documentation#map
parameter: {
zoom: 11, // level
center: [116.397428, 39.90923], // center point coordinates
viewMode:'3D'//use 3D view
}
}
},
Map initialization loading
//Map initialization should be placed in mounted after the map container div has been added to the DOM tree
mounted() {
AMapLoader.load(this.AMapLoader).then((AMap)=>{
this.map = new AMap.Map('container', this.parameter);
}).catch(e => {
console. log(e);
})
},
page view effect
2. Map positioning
1. The map is initially loaded and positioned to the current city
If you do not pass in the center parameter when creating an AMap.Map object, you will find that the map will be automatically positioned and displayed in your city. This is the initial loading location of the JS API.
parameter: {
zoom: 11, // level
//If you do not pass in the center parameter, the map will automatically locate your city and display it
/*center: [116.397428, 39.90923],//Center point coordinates*/
viewMode:'3D'//use 3D view
}
Map initialization loading and positioning to the current city renderings
2. Browser positioning
The positioning of the map initialization loading can only obtain the city-level information. If you want to obtain the specific location, you need to use the browser to locate it. AutoNavi JS API provides the AMap.Geolocation plug-in to achieve positioning,
Introduce the location plugin AMap.Geolocation
AMapLoader:{
"key": process.env.VUE_APP_GAODE_KEY, // Applied web developer Key, required when calling load for the first time
"version": "2.0", // Specify the version of JSAPI to load, the default is 1.4.15
"plugins": ['AMap.Geolocation'], // A list of plugins that need to be used, such as the scale 'AMap.Scale', etc.
},
Initialize the plugin and add a positioning button to the bottom right corner of the map
var geolocation = new AMap. Geolocation({
// Whether to use high-precision positioning, default: true
enableHighAccuracy: true,
// Set the positioning timeout, default: infinity
timeout: 10000,
// The offset of the dock position of the positioning button
offset: [10, 20],
// After the positioning is successful, adjust the map field of view to make the positioning position and accuracy range visible, default: false
zoomToAccuracy: true,
// locate the discharge position of the button, RB means bottom right
position: 'RB'
})
this.map.addControl(geolocation);
Bind the callback function, since obtaining the current position is an asynchronous request,
geolocation.getCurrentPosition((status,result)=>{
if(status=='complete'){
//Successful callback function
this.onComplete(result);
}else{
//Failed callback function
this.onError(result);
}
});
Callback function definition, the failed callback function here is to call IP positioning to obtain current city information (the third positioning method)
//Get the callback function of positioning success
onComplete(result) {
// Do something, such as processing the location information and displaying it on the coordinate point
},
// Get the callback function of positioning failure
onError(result){
//Location failed, call ip location method
console. log(result)
this. ipPosition()
},
Successfully obtain the location, the return value of the callback function, the position in the return value is our location information, and the returned type is the basic class latitude and longitude AMap.LngLat,
Get the return value of positioning failure
3. IP positioning to obtain current city information
If you don’t need to obtain precise location, but only need city-level positioning information, it is recommended to use the AMap.CitySearch plug-in. The AMap.CitySearch plug-in is faster to obtain the location city than through the browser.
//IP positioning to obtain current city information
ipPosition(){
AMap.plugin('AMap.CitySearch', () => {
var citySearch = new AMap. CitySearch()
citySearch.getLocalCity((status, result) => {
if (status === 'complete' & amp; & amp; result.info === 'OK') {
// The query is successful, and the result is the current city information
console. log(result)
this.map.setBounds(result.bounds);
}
})
})
}
Get the return value successfully, the AMap.Bounds class in the return value contains the information of our city
IP positioning renderings
3. Add map control
The map surface can add map basic controls through plug-ins. Map surface controls include toolbar, scale bar, positioning, eagle eye, basic layer switching and other plug-ins
// Introduce toolbar plugin, scale plugin and eagle eye plugin at the same time
AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType','AMap.ControlBar'], ()=>{
// Add a toolbar control on the surface, the toolbar control integrates a combination of zoom, pan, positioning and other function buttons
this.map.addControl(new AMap.ToolBar());
// Add a scale control on the map to display the scale of the map at the current level and latitude
this.map.addControl(new AMap.Scale());
// Add an eagle eye control to the map, and display the thumbnail of the map in the lower right corner of the map
this.map.addControl(new AMap.HawkEye({isOpen:false}));
// Add a category switching control to the map to realize the control of switching between the default layer and the satellite image and the implementation of the traffic layer
this.map.addControl(new AMap.MapType());
//A map control that combines rotation, tilt, and reset.
this.map.addControl(new AMap.ControlBar());
});
Add control renderings
demo code address (GitHub – luft-mensch/gaode-map-demo), follow-up documents and codes are being continuously updated