JS的高德API封装

喜欢ヅ旅行 2022-07-16 01:13 187阅读 0赞

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;
    		}
    	})
    
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，187人围观）

还没有评论，来说两句吧...

相关阅读

相关 java js 高德api_准备-入门-教程-地图 JS API | 高德地图API

本章介绍使用高德地图 JS API 开发地图应用之前的一些准备工作。注册账号并申请Key 1. 首先，注册开发者账号，成为高德开放平台开发者 2. 登陆之后，在进入「应

ゝ一世哀愁。/ 2022年11月12日 02:33/ 0 赞/ 251 阅读

相关 android 地铁地图api,入门指南-地铁图 JS API | 高德地图API

入门指南将带您迅速了解地铁图 JS API的基本使用，学习如何以easy模式创建地铁简易图，使您在最短时间内创建一个地铁图页面。准备页面在正式开始开发地图应用之前,您需

r囧r小猫/ 2022年10月16日 07:37/ 0 赞/ 288 阅读

相关 c语言获取高德地图api数据,获取搜索数据-POI搜索-示例中心-JS API 示例 | 高德地图API...

html, body, \container \{ width: 100%; height: 100%; \} 获取搜索信息搜索结果展示 // 初始化地图

女爷i/ 2022年10月15日 00:51/ 0 赞/ 162 阅读

相关 JS的高德API封装

function MapUtil() { var map = null; var geolocation = null; var geoc

喜欢ヅ旅行/ 2022年07月16日 01:13/ 0 赞/ 188 阅读

相关高德地图API的简单使用

<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

港控/mmm°/ 2022年06月03日 09:45/ 0 赞/ 394 阅读

相关 js接入高德地图API，搜索位置，实时定位，获取经纬度

1.服务端带所需数据进入 > @RequestMapping(value = "deploy", method = \{RequestMethod.GET ,

谁践踏了优雅/ 2022年05月14日 12:07/ 0 赞/ 571 阅读

相关 Java调用高德API

需求 java后台异步传查询数据库中的多个地区经纬度，地图动态展示出来。数据 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5na

你的名字/ 2022年03月02日 08:40/ 0 赞/ 141 阅读

相关高德地图 Javascript API 入门（七）

高德地图 Javascript API 入门（七）热力图插件简单例子 // 显示地图 var map=new AMap.Map("cont

悠悠/ 2022年02月23日 12:13/ 0 赞/ 359 阅读

相关高德地图API使用笔记

最近公司项目需要用到高德地图绘制路径回放功能，在这里做下笔记记录一下。首先需要加载地图库文件 // key对应为你申请的key <script

港控/mmm°/ 2021年12月23日 12:01/ 0 赞/ 489 阅读

相关【高德地图API】从零开始学高德JS API ——地址解析与逆地址解析

摘要：无论是百度LBS开放平台，还是高德LBS开放平台，其调用量最高的接口，必然是定位，其次就是地址解析了，又称为地理编码。地址解析，就是将地址转换为经纬度。而逆地址解析，就是

「爱情、让人受尽委屈。」/ 2021年07月27日 02:14/ 0 赞/ 462 阅读