JS的高德API封装

function MapUtil() {
	var map = null;
	var geolocation = null;
	var geocoder = null;
	var inputId = null;
}

/**
* 创建或者获取
*/
MapUtil.prototype.m = function (containerId) {
	if (this.map == null) {
		this.map = new AMap.Map(containerId, {
            resizeEnable: true,
            zoom: 17,//地图显示的缩放级别
            keyboardEnable: false
    	});
	}
	return this.map;
}

/**
* 绑定输入提示的input标签
*/
MapUtil.prototype.bindSearchInput = function (inputId) {
	if (this.map == null) {
		return false;
	}
	this.inputId = inputId;
	AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],() => {
      var autoOptions = {
        input: inputId//使用联想输入的input的id
      };
      autocomplete= new AMap.Autocomplete(autoOptions);
      var placeSearch = new AMap.PlaceSearch({
            city:'',
            map:this.map
      })
      AMap.event.addListener(autocomplete, "select", (e) => {
         //TODO 针对选中的poi实现自己的功能
         var lat = e.poi.location.lat;
         var lng = e.poi.location.lng;
         this.markPoint(lng, lat);
      });
    });
}

/**
* 设置地图标记,并重新指定地图中心
*/
MapUtil.prototype.markPoint = function (lat, lng, isCenter) {
	if (this.map == null) {
		return false;
	}
	//清除之前的Marker
	this.map.clearMap();
	var icon = new AMap.Icon({
        image : './locate-needle.png',//24px*24px
        //icon可缺省,缺省时为默认的蓝色水滴图标,
        imageSize : new AMap.Size(15,30)
	});
	// 设置缩放级别和中心点
	if (isCenter || isCenter === undefined) {
		this.map.setCenter([lat, lng]);
	}
    var marker = new AMap.Marker({
    	map: this.map,
		position: [lat, lng],
		icon: icon
	});
}

/**
* 绑定鼠标点击事件,获取点击的经纬度并且Mark
*/
MapUtil.prototype.bindClickEvent = function () {
	if (this.map == null) {
		return false;
	}
	return this.map.on('click', (e) => {
		var lat = e.lnglat.getLat();
		var lng = e.lnglat.getLng();
		this.markPoint(lng, lat, false);
		return this.address(e.lnglat);
	})
}

/**
* 定位到当前所在位置,浏览器定位会出现定位不准确问题
*/
MapUtil.prototype.locate = function() {
	if (this.map == null) {
		return false;
	}
	return this.map.plugin('AMap.Geolocation', () => {
		if (this.geolocation == null) {
			this.geolocation = new AMap.Geolocation({
	            enableHighAccuracy: true,//是否使用高精度定位,默认:true
	            timeout: 10000,          //超过10秒后停止定位,默认:无穷大
	            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
	            zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
	            buttonPosition:'RB'
	        });
		}
        
        this.map.addControl(this.geolocation);
        this.geolocation.getCurrentPosition();
        //返回定位信息
        AMap.event.addListener(this.geolocation, 'complete', (data) => {
        	this.markPoint(data.position.getLng(), data.position.getLat())
        	return this.address(data.position);
        });
        //返回定位出错信息
        AMap.event.addListener(this.geolocation, 'error', function(data) {
        	console.log("定位失败");
        	return false;
        });
    });
}

/**
* 根据经纬度获取地址
*/
MapUtil.prototype.address = function(lnglat) {
	if (!lnglat) {
		return false;
	}
	if (this.geocoder == null) {
		AMap.plugin('AMap.Geocoder',() => {
			this.geocoder = new AMap.Geocoder({});
		});
	}

	return this.geocoder.getAddress(lnglat, (status, result) => {
		if (status == 'complete') {
			//如果有绑定input标签,那么设置input标签的内容
			var address = result.regeocode.formattedAddress;
			if (this.inputId != null) {
				document.getElementById(this.inputId).value = address;
			}
			return address;
		} else {
			return false;
		}
	})

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值