初见高德地图

初始化一个高的地图

//mapDiv是高德地图的一个定高定宽的盒子的id
this.map = new AMap.Map('mapDiv', {
          zoom: 11,//是缩放级别
          center: [104.068444, 30.650597],//地图的中心点坐标
          viewMode: '3D'//使用3D视图
        });

给我们的高德添加事件

//当点击地图时调用this.showInfoClick事件
this.map.on('click', this.showInfoClick);

点击事件

this.map.on('click', this.showInfoClick);

回调函数返回一个对象

      showInfoClick(e) {
        console.log(e)//打印返回的值
        this.point.Lng = e.lnglat.getLng()
        this.point.Lat = e.lnglat.getLat()
        this.InitMarker(e.lnglat.getLng(),e.lnglat.getLat())//在地图上标出
      },

下面是打印返回的值，在lnglat中带有点击定位的经纬度

lnglat: XM
KL: 104.00046609472662
className: "AMap.LngLat"
kT: 30.714991239975152
lat: 30.714991
lng: 104.000466
pos: (2) [11577278.927928079, 3595790.3835256733]
__proto__: Object
originEvent: MouseEvent {isTrusted: true, lnglat: XM, pixel: Hy, screenX: 1341, screenY: 419, …}
pixel: Hy {className: "AMap.Pixel", x: 201, y: 90.953125}
pos: (2) [11577278.927928079, 3595790.3835256733]
target: _e {…}
type: "click"
__proto__: Object

marker

用经纬度在地图上标记出点

      InitMarker(lng, lat) {
        //初始化marker
        this.marker = new AMap.Marker({
          icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          position: new AMap.LngLat(lng, lat),
          offset: new AMap.Pixel(-11, -18)
        });
        //将marker跟地图关联
        this.marker.setMap(this.map);
        this.map.setFitView(this.marker)  //将地图范围自动适应到point
      },