本文详细介绍了高德地图API的使用方法，包括搜索框、插件、地图类型切换、地图鹰眼、比例尺、工具条、定位服务、自定义组件等特性。提供了丰富的示例代码和实现效果，帮助开发者快速掌握高德地图的各项功能。
前言：
高德离线地图的使用场景还是很多的，但是他的api在国外，想参考api对网络差的朋友来说不是一件容易的事，对我来说一样，在这里整理下他的api内容。
注：本文是将官网api挪动出来，网好的童鞋想看原版的请点击官网入口
目录：
十九、MapType 地图类型切换插件，用来切换固定的几个常用图层
二十一、Scale 比例尺插件。位于地图右下角，用户可控制其显示与隐藏。
二十二、ToolBar 地图工具条插件，可以用来控制地图的缩放和平移。
官网入口
十七、搜索框
<template>
<div class="amap-page-container">
<el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
<el-amap vid="amapDemo" :center="mapCenter" :zoom="12" class="amap-demo">
<el-amap-marker v-for="marker in markers" :position="marker" ></el-amap-marker>
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
.search-box {
position: absolute;
top: 25px;
left: 20px;
}
.amap-page-container {
position: relative;
}
</style>
<script>
module.exports = {
data: function() {
return {
markers: [
[121.59996, 31.197646],
[121.40018, 31.197622],
[121.69991, 31.207649]
],
searchOption: {
city: '上海',
citylimit: true
},
mapCenter: [121.59996, 31.197646]
};
},
methods: {
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) {
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 center = {
lng: lngSum / pois.length,
lat: latSum / pois.length
};
this.mapCenter = [center.lng, center.lat];
}
}
}
};
</script>实现效果：
API
| 参数 | 说明 | 类型 |
|---|---|---|
| searchOption | 搜索条件 | Object |
| onSearchResult) | 搜索回调函数 | function[ {lng, lat} ] |
| default | 默认值 | String |
| ## searchOption | ||
| 属性 | 说明 | 类型 |
| --- | ---- | --- |
| city | 城市名 | String |
| citylimit | 是否限制城市内搜索 | Boolean |
onSearchResult
| 参数 | 说明 | 类型 |
|---|---|---|
| pois | 经纬度对象数组 | Object |
事件
| 事件名 | 参数 | 说明 |
|---|---|---|
| init | Object | 参数包含 { autoComplete, placeSearch} ，分别为自动补全以及地址搜索插件的高德实例 |
十八、插件
引入方式
1 - 全局引入地图插件
首先需要在项目初始化时，通过 initAMapApiLoader 引入所需要的插件。
使用插件之前一定要初始化，否则会报错！
import VueAMap from 'vue-amap';
VueAMap.initAMapApiLoader({
key: 'YOUR_KEY',
plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor']
});2 - 配置插件
全局引入后，需要给单个地图组件配置插件:
<template>
<div>
<el-amap vid="amapDemo" :plugin="plugins"></el-amap>
</div>
</template>
<script>
export default {
data() {
return {
plugins: ['MapType'];
};
};
};
</script>配置说明
插件名支持两种，不带"AMap"前缀，如"MapType",带"AMap"前缀，如"AMap.MapType"。推荐前者，以下都基于前者说明。 （v0.1.2之前版本，只支持后者）
插件的配置支持两种方式。
1 - 默认配置
只配置插件名，配置则用默认
{
plugin: ['MapType']
}2 - 自定义配置
（v0.1.2开始支持）
自定义配置对象，pName为插件名。所有属性仅支持初始化配置，不支持响应式。
{
plugin: [{
// pName为必填字段
pName: 'MapType',
defaultType: 1
}]
}十九、MapType 地图类型切换插件，用来切换固定的几个常用图层
<template>
<div class="amap-page-container">
<el-amap vid="amap" :plugin="plugin" class="amap-demo">
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data() {
return {
plugin: [{
pName: 'MapType',
defaultType: 0,
events: {
init(instance) {
console.log(instance);
}
}
}]
};
}
};
</script>实现效果：
属性
| 名称 | 类型 | 说明 |
|---|---|---|
| defaultType | Number | 初始化默认图层类型。 取值为0：默认底图 取值为1：卫星图 默认值：0 |
| showTraffic | Boolean | 叠加实时交通图层 默认值：false |
| showRoad | Boolean | 叠加路网图层 默认值：false |
事件
| 事件 | 参数 | 说明 |
|---|---|---|
| init | Object | 高德插件示例 |
二十、Overview 地图鹰眼插件。
<template>
<div class="amap-page-container">
<el-amap vid="amap" :plugin="plugin" class="amap-demo">
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data() {
return {
plugin: [{
pName: 'OverView',
events: {
init(instance) {
console.log(instance);
}
}
}]
};
}
};
</script>实现效果：
属性
| 名称 | 类型 | 说明 |
|---|---|---|
| isOpen | Boolean | 鹰眼是否展开，默认为false |
| visible | Boolean | 鹰眼是否显示，默认为true |
事件
| 事件 | 参数 | 说明 |
|---|---|---|
| init | Object | 高德插件示例 |
二十一、Scale 比例尺插件。位于地图右下角，用户可控制其显示与隐藏。
<template>
<div class="amap-page-container">
<el-amap vid="amap" :plugin="plugin" class="amap-demo">
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data() {
return {
plugin: [{
pName: 'Scale',
events: {
init(instance) {
console.log(instance);
}
}
}]
};
}
};
</script>
二十二、ToolBar 地图工具条插件，可以用来控制地图的缩放和平移。
<template>
<div class="amap-page-container">
<el-amap vid="amap" :plugin="plugin" class="amap-demo">
</el-amap>
</div>
</template>
<style>
.amap-demo {
height: 300px;
}
</style>
<script>
module.exports = {
data() {
return {
plugin: [{
pName: 'ToolBar',
events: {
init(instance) {
console.log(instance);
}
}
}]
};
}
};
</script>实现效果:
属性
| 名称 | 类型 | 说明 |
|---|---|---|
| position | String | 控件停靠位置 LT:左上角; RT:右上角; LB:左下角; RB:右下角; 默认位置：LT |
| ruler | Boolean | 标尺键盘是否可见，默认为true |
| noIpLocate | Bo |
最低0.47元/天 解锁文章
扫一扫
366
到【灌水乐园】发言
