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 then verify the developer. 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 use
add map div
<div id="container"></div>
//初始化必须设置高度和宽度
#container {
width:1000px;
height: 500px;
}define data
data() {
return {
//此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
//map:null,
//地图加载参数
AMapLoader:{
"key": process.env.VUE_APP_GAODE_KEY, // 申请好的Web端开发者Key，首次调用 load 时必填
"version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
"plugins": [], // 需要使用的插件列表，如比例尺'AMap.Scale'等
},
//地图绘制参数
//更多参数可访问 https://lbs.amap.com/api/jsapi-v2/documentation#map
parameter:{
zoom:11,//级别
center: [116.397428, 39.90923],//中心点坐标
viewMode:'3D'//使用3D视图
}
}
},Map initialization loading
//地图初始化应该在地图容器div已经添加到DOM树之后,所以放到mounted里面
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,//级别
//不传入center参数，地图将自动定位到您所在城市并显示
/*center: [116.397428, 39.90923],//中心点坐标*/
viewMode:'3D'//使用3D视图
}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, // 申请好的Web端开发者Key，首次调用 load 时必填
"version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
"plugins": ['AMap.Geolocation'], // 需要使用的插件列表，如比例尺'AMap.Scale'等
},Initialize the plugin and add a positioning button to the bottom right corner of the map
var geolocation = new AMap.Geolocation({
// 是否使用高精度定位，默认：true
enableHighAccuracy: true,
// 设置定位超时时间，默认：无穷大
timeout: 10000,
// 定位按钮的停靠位置的偏移量
offset: [10, 20],
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
zoomToAccuracy: true,
// 定位按钮的排放位置, RB表示右下
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'){
//成功的回调函数
this.onComplete(result);
}else{
//失败的回调函数
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)
//获取定位成功的回调函数
onComplete(result) {
//做一些事情，比如将位置信息进行处理展示在坐标点上
},
//获取定位失败的回调函数
onError(result){
//定位失败，调用ip定位方式
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定位获取当前城市信息
ipPosition(){
AMap.plugin('AMap.CitySearch', ()=> {
var citySearch = new AMap.CitySearch()
citySearch.getLocalCity((status, result)=> {
if (status === 'complete' && result.info === 'OK') {
// 查询成功，result即为当前所在城市信息
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
// 同时引入工具条插件，比例尺插件和鹰眼插件
AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType','AMap.ControlBar'], ()=>{
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
this.map.addControl(new AMap.ToolBar());
// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
this.map.addControl(new AMap.Scale());
// 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
this.map.addControl(new AMap.HawkEye({isOpen:false}));
// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
this.map.addControl(new AMap.MapType());
//组合了旋转、倾斜、复位在内的地图控件。
this.map.addControl(new AMap.ControlBar());
});
Add control renderings
demo code address ( https://github.com/luft-mensch/gaode-baidu-map-demo ), follow-up documents and codes are being continuously updated