高德地图实时定位显示图标和名字

前言：最近公司项目有个需要展示人员的实时定位和轨迹回放的需求，查阅了一些资料，最后决定用高德地图去实现。
注：人员的实时位置用的uniapp做的打包的app实时上传登录者的位置信息上传到后台，pc端获取实时位置进行展示，app的开发与打包下篇文章会讲到
一、引入高德地图
1、首先想用高德api需要申请一个自己的key，百度搜索高德api，点击进入

2、登录之后，点击控制台然后切换到我的应用，添加一个新应用，系统会自动生成一个key，把key复制下来，script引入高德api的时候需要用到

3、项目中引入高德api

<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.4&key=567b2e43d3f921c6df6da0c2b55830be&plugin=AMap.MarkerClusterer,AMap.DistrictSearch,Map3D&plugin=AMap.Autocomplete,AMap.Walking,AMap.PlaceSearch,AMap.PolyEditor,AMap.CircleEditor,AMap.Transfer,AMap.Driving,AMap.CitySearch,AMap.Heatmap,AMap.Size'></script>

注：key换成自己在高德平台申请的key就可以用了
4、如果想要用高德的ui组件的话需要引入ui组件的api

<script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>

二、创建地图实例
这里先声明一些全局变量

	var position = null;
    var zoomNum = null;
    var markers = [];
    var cluster = [];
    var gmarker = null;
    var map = null;
    var marker = null;
    var timer = null;

	position = new AMap.LngLat(123.429096, 41.796767);
    zoomNum = 10;
    map = new AMap.Map("container", {
        zoom: zoomNum, //地图默认放大多少倍
        center: position, //初始位置经纬度
        resizeEnable: true,
        topWhenClick: true, //点击时图标置顶
    });	

三、写一个方法请求后台数据获取经纬度添加图标并显示图标的位置（这里用的是layui写的项目所以用的layui封装好的方法layui.use([‘commonAjax’]去请求后台数据，基于你的项目去修改请求的方式，拿到后台数据即可）

function getData() {
        layui.use(['commonAjax'], function() {
            var commonAjax = layui.commonAjax;
            commonAjax.ajax('JdyWzxx/select', 'get', 'json', {
                pageSize: 9999
            }, '', function(res) {
                if (res.success) {
                    map.clearMap()
                    if (cluster) {
                        map.remove(cluster);
                    }
                    markers = [];
                    for (var i = 0; i < res.data.length; i += 1) {
                        if (res.data[i].SB_STATE == '0') {
                            // startArr.push(res.data[i])
                            markers.push(gmarker = new AMap.Marker({
                                icon: 'images/mapicon/map_icon_ry_org.png',//自己引入的图标
                                position: [res.data[i].LON, res.data[i].LAT],
                                name: res.data[i].USER_NAME
                            }))
                            gmarker.setLabel({
                                offset:  new  AMap.Pixel(0,  0),
                                   //设置文本标注偏移量
                                                content:   "<div οnclick=\"openLayer('" + res.data[i].USER_ID + "," + res.data[i].USER_NAME + "')\">" + res.data[i].USER_NAME + "</div>",
                                  //设置文本标注内容
                                                direction:   'top'  //设置文本标注方位
                            });
                        }
                    }
                    addCluster()
                    var sts = [{
                        url: "images/mapicon/icon_total_green.png",
                        size: new AMap.Size(31, 42),
                        textColor: '#ffffff',
                        offset: new AMap.Pixel(0, 0),
                        imageOffset: new AMap.Pixel(0, 5),
                        textSize: 16,
                    }, {
                        url: "images/mapicon/icon_total_blue.png",
                        size: new AMap.Size(31, 42),
                        textColor: '#ffffff',
                        offset: new AMap.Pixel(0, 0),
                        imageOffset: new AMap.Pixel(0, 5),
                        textSize: 16,
                    }, {
                        url: "images/mapicon/icon_total_orange.png",
                        size: new AMap.Size(31, 42),
                        offset: new AMap.Pixel(0, 0),
                        imageOffset: new AMap.Pixel(0, 5),
                        textColor: '#ffffff',
                        textSize: 16,
                    }];

                    function addCluster() {
                        cluster = new AMap.MarkerClusterer(map, markers, {
                            minClusterSize: 10,
                            gridSize: 60,
                            maxZoom: 18,
                            styles: sts
                        });
                    }
                }
            })
        })
    }

四、写一个定时器，每隔十秒调用一次，更新位置，定时器先清再创建

	if (timer) {
        clearInterval(timer)
    }
    timer = setInterval(function() {
        getData()
    }, 10000)

实现的效果如下图：

注：人员的轨迹回放用到的高德的巡航轨迹做的，接下来的文章会详细更新，请持续关注
下面附上高德api的地址，感兴趣的童鞋可以看一下：
自定义点标记：https://lbs.amap.com/demo/javascript-api/example/marker/custom-icon-content
高德地图API：https://lbs.amap.com/api/javascript-api/reference/plugin#AMap.MarkerClusterer