当前位置: 首页>前端>正文

android 高德SDK如何加载离线地图 高德地图离线api

前言:

vue-amap

效果图:

android 高德SDK如何加载离线地图 高德地图离线api,android 高德SDK如何加载离线地图 高德地图离线api_ci,第1张

目录:

 

实现步骤:(源码在最下面)

一、安装插件

二、template配置基础的地图组件

三、data里面定义相关数据

四、撒点的实现,

1、template:

2、data部分定义字段:

3、methods里面动态加点,我这里还给对应的点加弹框了

五、给每个点配置弹框

1、template:

2、data部分定义字段:

3、methods里面动态加点,我这里还给对应的点加弹框了

六、画线

1、template:

2、data部分定义字段:

七、画范围

1、template:

2、data部分定义字段:

源码:

 


实现步骤:(源码在最下面)

一、安装插件

cnpm install vue-amap --save

二、template配置基础的地图组件

<el-amap
                vid="amapDemo1"
                :center="center"
                :zoom="zoom"
                :plugin="plugin"
        >
</el-amap>

三、data里面定义相关数据

center: [108.90315, 34.21903], // 中心位置
        zoom: 14,

四、撒点的实现,

1、template:

android 高德SDK如何加载离线地图 高德地图离线api,android 高德SDK如何加载离线地图 高德地图离线api_控件_02,第2张

2、data部分定义字段:

android 高德SDK如何加载离线地图 高德地图离线api,android 高德SDK如何加载离线地图 高德地图离线api_vue-amap_03,第3张

3、methods里面动态加点,我这里还给对应的点加弹框了

android 高德SDK如何加载离线地图 高德地图离线api,android 高德SDK如何加载离线地图 高德地图离线api_字段_04,第4张

五、给每个点配置弹框

1、template:

android 高德SDK如何加载离线地图 高德地图离线api,android 高德SDK如何加载离线地图 高德地图离线api_字段_05,第5张

2、data部分定义字段:

android 高德SDK如何加载离线地图 高德地图离线api,android 高德SDK如何加载离线地图 高德地图离线api_控件_06,第6张

3、methods里面动态加点,我这里还给对应的点加弹框了

android 高德SDK如何加载离线地图 高德地图离线api,android 高德SDK如何加载离线地图 高德地图离线api_ci_07,第7张

六、画线

1、template:

android 高德SDK如何加载离线地图 高德地图离线api,android 高德SDK如何加载离线地图 高德地图离线api_ci_08,第8张

2、data部分定义字段:

android 高德SDK如何加载离线地图 高德地图离线api,android 高德SDK如何加载离线地图 高德地图离线api_vue-amap_09,第9张

七、画范围

1、template:

android 高德SDK如何加载离线地图 高德地图离线api,android 高德SDK如何加载离线地图 高德地图离线api_控件_10,第10张

2、data部分定义字段:

android 高德SDK如何加载离线地图 高德地图离线api,android 高德SDK如何加载离线地图 高德地图离线api_vue-amap_11,第11张

源码:

<template>
    <div class="mapDiv">
        <el-amap
                vid="amapDemo1"
                :center="center"
                :zoom="zoom"
                :plugin="plugin"
        >
            <!-- 在地图上标记点 -->
            <el-amap-marker
                    v-for="(marker,index) in markers"
                    :position="marker.position"
                    :events="marker.events"
                    :content="marker.content"
                    :key="index"
                    >
            </el-amap-marker>
            <!--在地图上显示窗口提示框-->
            <el-amap-info-window
                    v-if="window"
                    :position="window.position"
                    :visible="window.visible"
                    :content="window.content"
            ></el-amap-info-window>
            <!--轨迹线路-->
            <el-amap-polyline
                    :editable="polyline.editable"
                    :path="polyline.path"
                    :events="polyline.events">
            </el-amap-polyline>
            <!--圆点标记-->
            <el-amap-circle
                    v-for="circle in circles"
                    :center="circle.center"
                    :radius="circle.radius"
                    :fill-opacity="circle.fillOpacity"
                    :events="circle.events">
            </el-amap-circle>
        </el-amap>
    </div>
</template>

<script>
    import Vue from 'vue'
    import VueAMap from 'vue-amap'
    Vue.use(VueAMap)
    let amapManager = new VueAMap.AMapManager()
    export default {
        props: {

        },
        data () {
            return {
                amapManager,
                center: [108.90315, 34.21903], // 中心位置
                zoom: 14,
                makerConf: {
                    position: [108.90315, 34.21903],
                    content: ''
                },
                markers: [],
                //线路
                polyline: {
                    path: [
                        [108.864231, 34.246916],
                        [108.860626, 34.254436],
                        [108.840885, 34.252024],
                        [108.839168, 34.218815],
                        [108.911609, 34.228467]
                    ],
                    events: {
                        click(e) {
                            alert('click polyline');
                        },
                        end: (e) => {
                            let newPath = e.target.getPath().map(point => [point.lng, point.lat]);
                            console.log(newPath);
                        }
                    },
                    editable: false,//是否显示线路上的点
                },
                // 当前窗口
                currentWindow: {
                    position: [0, 0],
                    content: '',
                    events: {},
                    visible: false
                },
                // 窗口信息框
                windows: [],
                window:'',
                // plugin: [
                //     'VueAMap.Scale',   //右下角缩略图插件 比例尺
                //     'VueAMap.OverView',//地图鹰眼插件
                //     'VueAMap.ToolBar', //地图工具条
                //     'VueAMap.MapType', //类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制
                //     'VueAMap.Geolocation', //定位控件,用来获取和展示用户主机所在的经纬度位置
                //     'VueAMap.loadUI',
                //     'VueAMap.Autocomplete', //输入提示插件
                //     'VueAMap.PlaceSearch', //POI搜索插件
                //     "VueAMap.PolyEditor", //编辑 折线多,边形
                //     "VueAMap.CircleEditor", //圆形编辑器插件
                // ],
                // ToolBar工具条插件、MapType插件、Scale比例尺插件、OverView鹰眼插件
                plugin: ['ToolBar',
                    // {
                    //     pName: 'MapType',
                    //     defaultType: 0,
                    //     events: {
                    //         init (o) {
                    //             console.log(o)
                    //         }
                    //     }
                    // },
                    {
                    pName: 'Scale',
                    events: {
                        init (instance) {
                            console.log(instance)
                        }
                    }
                },
                    {
                    pName: 'OverView',
                    events: {
                        init (instance) {
                            console.log(instance)
                        }
                    }
                }],

                //圆形范围
                circles: [
                    {
                        center: [108.90315, 34.21903],
                        radius: 800,
                        fillOpacity: 0.5,
                        events: {
                            click: () => {
                                alert('click');
                            }
                        }
                    }
                ]

            };
        },

        components: {},

        computed: {},

        created() {
            this.initMapData();
        },

        mounted() {
            this.markAndText();
        },

        methods: {
            // 初始化地图
            initMapData(){
                VueAMap.initAMapApiLoader({
                    // 高德的key
                    key: 'a6cc107ba8279ad6eee8d7e6498c6c8e',
                    // 插件集合
                    plugin: [
                        'AMap.Scale',   //右下角缩略图插件 比例尺
                        'AMap.OverView',//地图鹰眼插件
                        'AMap.ToolBar', //地图工具条
                        'AMap.MapType', //类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制
                        'AMap.Geolocation', //定位控件,用来获取和展示用户主机所在的经纬度位置
                        'AMapUI.loadUI',
                        'AMap.Autocomplete', //输入提示插件
                        'AMap.PlaceSearch', //POI搜索插件
                        "AMap.PolyEditor", //编辑 折线多,边形
                        "AMap.CircleEditor", //圆形编辑器插件
                    ],
                    uiVersion: '1.0.11', // 版本号

                    resizeEnable: true,
                    rotateEnable:true,
                    pitchEnable:true,
                    pitch:80,
                    rotation:-15,
                    viewMode:'3D',//开启3D视图,默认为关闭
                    buildingAnimation:true,//楼块出现是否带动画

                    expandZoomRange:true,
                    zooms:[3,28],
                    zoom: 12,
                    center: [ 108.90315, 34.21903], // 中心位置
                })
            },

            //配置撒点和对应的数据信息
            markAndText(){
                let markerData = [
                    {
                        position:[108.90315, 34.21903],
                        text:'这里第一个点'
                    },
                    {
                        position: [108.88071, 34.230738],
                        text:'这里第二个点'
                    },
                    {
                        position:[108.911609, 34.228467],
                        text:'这里第三个点'
                    },

                ];
                let markers = [];
                let windows = [];
                let self = this;
                markerData.forEach((item,i)=>{
                    markers.push({
                        position: item.position,
                        // content:'<div class="prompt">${ 111 }</div>',
                        events: {
                            click() {
                                self.windows.forEach(window => {
                                    window.visible = false;
                                });

                                self.window = self.windows[i];
                                self.$nextTick(() => {
                                    self.window.visible = true;
                                });
                            }
                        }
                    });
                    windows.push({
                        position: item.position,
                        content: `<div class="prompt">${ item.text }</div>`,
                        visible: true
                    });
                })

                this.markers = markers;
                this.windows = windows;
            },

        },

        watch: {}
    }

</script>
<style lang='less' scoped>
    .mapDiv{
        width:100%;
        height: 800px;
    }
</style>

到此就结束了


https://www.xamrdz.com/web/2w71963004.html

相关文章: