前端vue-高德地图操作_前端高德地图

总结一下关于高德地图的基本使用

现在高德地图改版到2.0之后都是需要key来开发 ， 需要key的可以去开发者平台注册生成，现在社区又很多教程，这里就不进行讲解了，如果你需要更复杂的操作可以到高德地图的API上进行参考使用

你需要提前下载高德地图插件之后进行开发

所需要的网址如下

高德地图开发者平台 ：https://lbs.amap.com/

高德地图API地址：https://lbs.amap.com/api/jsapi-v2/guide/webcli/map-vue1

这里我采用了组件封装的方式进行使用，混合js进行开发操作

先上效果图

vue组件代码

<template>
  <div class="gaode-map" id="container">

  </div>
</template>

<script>
import { mapJs } from './gaodeMap.js'


export default {
  name: 'gaode-map',
  mixins: [mapJs]
}
</script>

<style lang="less" scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}

::v-deep .amap-logo {
  display: none!important;
  visibility: hidden!important;
}
 
::v-deep .amap-copyright {
  display: none!important;
  visibility: hidden!important;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

JS代码

// 引入高德地图插件
import AMapLoader from '@amap/amap-jsapi-loader'
import { options } from 'less'
// 编写安全密钥
window._AMapSecurityConfig = {
    securityJsCode: '你的安全密钥'
}
export const mapJs = {
    data() {
        return {
            map: null, // 初始化map     
            marker: null, // 声明点标记 
            capitals: [ 
                // 地图圆形标记数据 - 这个数据是后端给的，这边练习随便填写
                {
                    center: [116.59877, 39.932143],
                    popNum: 4
                }
            ]
        }
    },
    mounted() {
        this.initMap()
    },
    methods: {
        initMap(data) {
            AMapLoader.load({
                // 申请好的Web端开发者Key，首次调用 load 时必填
                key: "	你的key",
                // resizeEnable: true,
                // 指定要加载的 JSAPI 的版本，不写时默认为 1.4.15
                version: "2.0",
            }).then((AMap) => {

                var map = new AMap.Map("container", {
                    //是否为3D地图模式
                    viewMode: "3D",
                    //初始化地图级别（地图的远近）  
                    center: [116.59877, 39.932143], //地图开始展示的中心点
                    zoom: 17, // 缩放层级
                });

                // 添加圆点标记
                for (var i = 0; i < this.capitals.length; i += 1) {
                    var center = this.capitals[i].center;
                    var circleMarker = new AMap.CircleMarker({
                        center: center,
                        radius: 40 + Math.random() * 10,//3D视图下，CircleMarker半径不要超过64px
                        strokeColor: 'white',//边框颜色
                        strokeWeight: 2,//边框粗细
                        strokeOpacity: 0.5,//边框透明度
                        fillColor: '#3096FF',//填充色
                        fillOpacity: 0.5,//填充色透明度
                        zIndex: 10,
                        bubble: true,
                        cursor: "pointer",
                        clickable: true,
                    });
                    //添加圆形轨迹
                    circleMarker.setMap(map);
                }

                // 每个圆点添加文本
                for (var i = 0; i < this.capitals.length; i += 1) {
                    var text = new AMap.Text({
                        text: this.capitals[i].popNum,
                        anchor: "center", // 设置文本标记锚点
                        // draggable: true, // 是否可移动文本
                        cursor: "pointer",
                        angle: 10,
                        style: {
                            "background-color": "rgba(148, 199, 252,0)",
                            opacity: "1",
                            // width: "100%",
                            "border-width": 0,
                            "text-align": "center",
                            "font-size": "36px",
                            "transform":"rotate(-10deg)",
                            color: "#fff",
                        },
                        position: [this.capitals[i].center[0], this.capitals[i].center[1]],
                    });
                    text.setMap(map);


                    // 设置点标记的点击事件
                    circleMarker.on('click', markerClick) // 设置点击事件
                    function markerClick(e) {
                        console.log(e.target);
                    }
                }
            }).catch(e => {
                console.log(e); // 输出错误
            })
        },

    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

以上代码可以直接粘贴复制使用，仅供参考！