前端系列——vue2+高德地图web端开发(地图控件)
vue2+高德地图web端开发(地图控件)前言地图控件说明控件使用了解关键使用方法名1.在loader的plugins中进行引入2.在then中使用addControl函数进行定义完整代码结果展示前言本次文章仅围绕地图组件展开地图控件说明https://lbs.amap.com/api/jsapi-v2/documentation#control控件使用了解关键使用方法名map.addContro
·
vue2+高德地图web端开发(地图控件)
前言
本次文章仅围绕地图组件展开
地图控件说明
https://lbs.amap.com/api/jsapi-v2/documentation#control
控件使用
了解关键使用方法名
map.addControl()
没错就是这个addControl()用于在地图中添加组件
知道这个之后我们直接开始
1.在loader的plugins中进行引入
进入MapContainer.vue中找到我们的initMap函数的plugins,添加一个AMap.Scale比例尺控件
methods: {
initMap() {
AMapLoader.load({
key: '2c1c4affeb410923990fec54c5af721a', // 申请好的Web端开发者Key,首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: ['AMap.Scale'] // 需要使用的的插件列表,如比例尺'AMap.Scale'等
})
.then(AMap => {
this.map = new AMap.Map('container', {
//设置地图容器id
viewMode: '3D', //是否为3D地图模式
zoom: 10, //初始化地图级别
center: [121.473667, 31.230525] //初始化地图中心点位置
})
})
.catch(e => {
console.log(e)
})
}
},
2.在then中使用addControl函数进行定义
this.map.addControl(new AMap.Scale())
完整代码
<template>
<div id="container"></div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
data() {
return {
map: null
}
},
methods: {
initMap() {
AMapLoader.load({
key: '2c1c4affeb410923990fec54c5af721a', // 申请好的Web端开发者Key,首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Geolocation'] // 需要使用的的插件列表,如比例尺'AMap.Scale'等
})
.then(AMap => {
this.map = new AMap.Map('container', {
//设置地图容器id
viewMode: '3D', //是否为3D地图模式
zoom: 10, //初始化地图级别
center: [121.473667, 31.230525] //初始化地图中心点位置
})
this.map.addControl(new AMap.Scale())
this.map.addControl(new AMap.ToolBar())
this.map.addControl(new AMap.HawkEye())
this.map.addControl(new AMap.MapType())
this.map.addControl(new AMap.Geolocation())
})
.catch(e => {
console.log(e)
})
}
},
mounted() {
//DOM初始化完成进行地图初始化
this.initMap()
}
}
</script>
<style lang="less">
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
</style>
结果展示
更多推荐
已为社区贡献15条内容
所有评论(0)