前言:
高德地图文档很少,没有案例,又想学习一下高德地图基本使用 此致敬礼 记录一下
文档地址:https://elemefe.github.io/vue-amap
直接看最后推荐
引入
方式一:全局引入
npm install -S vue-amap
main.js写入
// 引入vue-amap
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
// 高德的key
key: 'YOUR_KEY',
// 插件集合
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
// 高德 sdk 版本,默认为 1.4.4
v: '1.4.4'
});
页面写入
<template>
<div class="amap-page-container">
<div :style="{width:'100%',height:'800px'}">
<el-amap vid="amap" :plugin="plugin" class="amap-demo" rotateEnable="true" :center="center">
</el-amap>
</div>
</div>
</template>
<script type="text/javascript">
export default {
data() {
const self = this;
return {
center: [121.59996, 31.197646],
plugin: [{
pName: "MapType",//卫星与地图切换
defaultType: 1,
events: {
init(o) {
console.log(o);
},
},
}]
}
},
methods: {}
}
</script>
就可以得到一个简单的页面
方式二
按需引入
npm install -S vue-amap
页面写入
<template>
<div id="container" style="width: 100%; height: 100%; resize: both"></div>
</template>
<script>
export default {
data() {
return {
map: null,
};
},
async created() {
this.initMap();
},
methods: {
//初始化地图
initMap() {
let AMap = window.AMap;
let _this = this;
// 地图的初始化
_this.map = new AMap.Map("container", {
zooms: [1, 19.9],
center: [106.323597, 29.516401], //106.323238, lat: 29.515816
});
},
},
};
</script>
<style>
#container {
height: 100%;
}
</style>
你也可以得到一个地图
插件:
文档地址:https://elemefe.github.io/vue-amap/#/zh-cn/plugins/base
谷歌官方插件库:https://lbs.amap.com/api/javascript-api/guide/abc/plugins/
//在mainjs中plugin数组引入插件
"AMap.Autocomplete", //输入提示插件
"AMap.PlaceSearch", //POI搜索插件
"AMap.Scale", //右下角缩略图插件 比例尺
"AMap.OverView", //地图鹰眼插件
"AMap.ToolBar", //地图工具条
"AMap.MapType", //类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制
"AMap.PolyEditor", //编辑 折线多,边形
"AMap.CircleEditor", //圆形编辑器插件
"AMap.Geolocation" //定位控件,用来获取和展示用户主机所在的经纬度位置
使用
<el-amap vid="amap" :plugin="plugin" class="amap-demo" rotateEnable="true" :center="center">
//在data里面配置地图
zoom:16,
center:[121.406051,31.179695],
plugin:[{pName:'MapType'}]// //pName为必填字段 里面配置要进行查询文档
贼菜 理解错了
自我感觉比较有用的链接
地图控件(官方):https://lbs.amap.com/api/javascript-api/reference/map-control
例: main.js
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
// 高德的key
key: 'yourkey',
// 插件集合
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Buildings'],
// 高德 sdk 版本,默认为 1.4.4
v: '1.4.4'
});
页面
<template>
<div class="amap-page-container">
<div :style="{width:'100%',height:'800px'}">
<el-amap vid="amap" :plugin="plugin" class="amap-demo" rotateEnable="true" :center="center">
</el-amap>
</div>
</div>
</template>
<script type="text/javascript">
export default {
data() {
const self = this;
let AMap = window.AMap;
return {
center: [121.59996, 31.197646],
plugin: [{
pName: "MapType",
defaultType: 1,
showTraffic:true,//交通图层
showRoad:true,//路网图层
events: {
init(o) {
o.hide();//隐藏控件
o.show();//显示控件
},
},
}]
}
},
methods: {}
}
</script>
官网html写法
mapObj = new AMap.Map("imap",{
center:new AMap.LngLat(116.368904,39.913423),
zoom:16
});
mapObj.plugin(["AMap.MapType"],function(){
//地图类型切换
var type= new AMap.MapType({
defaultType:1 //使用3D地图
});
mapObj.addControl(type);
});
另一种写法 推荐!!!
index.html
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=yourkey"></script>
vue.config.js引入
module.exports = {
configureWebpack: {
externals: {
'AMap': 'AMap' // 高德地图配置
}
}
}
页面
<template>
<div class="home">
<div id="map-container" style="width:100%; height:500px"></div>
</div>
</template>
<script>
import AMap from "AMap";
export default {
name: 'Home',
data(){
return {
map:null
}
},
components: {
},
created(){
let that = this;
that.$nextTick(() => {
//初始化地图
that.initMap();
});
},
methods:{
initMap(){
let that = this;
//自带的插件使用
// that.map = new AMap.Map("map-container", {
// resizeEnable: true,
// zoom: 7,
// center: [120.6641561, 31.3063851] //地图中心点
// });
// AMap.plugin(["AMap.ToolBar"], function() {
// //加载工具条
// var tool = new AMap.ToolBar();
// that.map.addControl(tool);
// });
//还原html写法
var buildings = new AMap.Buildings({
'zooms':[16,18],
'zIndex':10,
'heightFactor':2//2倍于默认高度,3D下有效
});//楼块图层
that.map = new AMap.Map('map-container', {
center: [116.397428, 39.90923],
viewMode:'3D',
pitch:60,
rotation:-35,
features:['bg','road','point'],//隐藏默认楼块
mapStyle:'amap://styles/light',
layers: [new AMap.TileLayer.Satellite(),buildings],//高德默认标准图层
zoom: 16
});
}
}
}
</script>
<style type="text/css">
#container {width:300px; height: 180px; }
</style>