你一学就会的高德打点

95 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第2天,点击查看活动详情

  1. 在页面添加 JS API 的入口脚本标签,并将其中「您申请的key值」替换为您刚刚申请的 key;
 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>

  1. 添加 div 标签作为地图容器,同时为该 div 指定 id 属性;
<div id="container"></div>

  1. 为地图容器指定高度、宽度;
#container {width:300px; height: 180px; }

  1. 进行移动端开发时,请在 head 内添加 viewport 设置,以达到最佳的绘制性能;
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

  1. 在完成如上准备工作之后便可以开始进行开发工作了。
<div class="map">
     <div id="container"></div>
</div>
mounted() {
        this.$nextTick(() => {
            this.getMap()
        })
       }
 //初始化地图
        getMap() {

            let _this = this
            let map = new AMap.Map('container', {
                resizeEnable: true,
                center: [118.92957385629416, 32.10393442225456],
                zoom: 14
            })
            map.on('click', showInfoClick)
            function showInfoClick(e) {
                map.clearMap() //清理地图
                let lng = e.lnglat.getLng() //获取经度
                let lat = e.lnglat.getLat() //获取纬度
                _this.formData.clockLongitude = lng
                _this.formData.clockLatitude = lat

                _this.lnglat = [`${lng}`, `${lat}`] //将经纬度赋值
                // //marker点
                let marker = new AMap.Marker({
                    position: [lng, lat],
                    offset: new AMap.Pixel(-30, -60), // 标记点偏移量
                    icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
                })

                map.add(marker) //加载点
                // map.setFitView(); //缩放至地图
            }
        }