高德地图多点标记 marker JSAPI

来源：互联网发布：挂载linux是什么编辑：程序博客网时间：2024/04/29 16:31

以下内容涉及到一些简单的接口

使用场景是：通过选择某级别的城市或省份，将该级别下的所有具体地址标注到地图上，该场景适合通过地址查询经纬度来标记，以下内容为测试代码。刚看了下API写的，学习阶段，仅供参考

使用高德地图，创建应用获得KEY，并通过JS导入。

<!doctype html><html><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">    <title>地理编码</title>    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>    <!---->    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=0c64f99ed596762bcb311cf2b6495f81&plugin=AMap.Geocoder"></script>    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script></head><body ><div id="container"></div><select name="search" style="position: relative;z-index: 100;left: 20%;" id='search'>    <option value='guangzhou'>广州</option>    <option value='shenzhen'>深圳</option></select><script type="text/javascript">//新建地图对象    var map = new AMap.Map("container", {        resizeEnable: true    });var marker_list={};//用于存储各城市的marker,方便根据城市隐藏//测试数据var test={'guangzhou':['广州大学','暨南大学'],'shenzhen':['大梅沙','小梅沙']};//初始创建地理编码对象var geocoder= new AMap.Geocoder({            city: "guangzhou", //城市，默认：“全国”            radius: 1000        });</script><script type="text/javascript" src="js.max/jquery-3.1.1.min.js"></script><script type="text/javascript">    /**     * @param {Object} lng 经度     * @param {Object} lat  纬度     * @param {Object} title 标记内容     * @param {Object} city 该标记所属的城市     */    function marker(lng,lat,title,city)    {    var marker = new AMap.Marker({        position:[lng,lat],        title:title,        map:map    });    marker_list[city].push(marker);//将该标记存入JSON中格式如：{'guangzhou':[marker1,marker2]};   //每个标记触发的事件    marker.on('click',function(){        //点击标记触发事件    });    }    $('#search').on('change',function(){        //获取当前选择的城市        var cur_city=$(this).val();        geocoder.setCity(cur_city);//设置地理编码的城市        marker_list[cur_city]=new Array();//为JSON数据创建一个数组，根据城市来存储marker        for(l in test[cur_city])//循环遍历所有城市的数组,为每个点创建一个marker        {            geocoder.getLocation(test[cur_city][l],function(statu,GeocodeResult){                var g=GeocodeResult;            if(statu=='complete')            {//创建该城市的标记存储数组。                for(i in g.geocodes)                {    marker(g.geocodes[i].location.lng,g.geocodes[i].location.lat,g.geocodes[i].formattedAddress,cur_city);                if(i==0)//把地图中心设置在某城市的第一个标注点                {                    var lnglat=new AMap.LngLat(g.geocodes[i].location.lng,g.geocodes[i].location.lat);                    map.setCenter(lnglat);//设置城市的中心，该参数为LngLat对象                    map.setZoom('12');//设置缩放级别，越小,地图越不详细                    }                   }//取消除了将要显示的标记，其他城市的标记全部隐藏        marker_list&&(function(){            for(key in marker_list)//每次改变城市，将其他城市的标注全部隐藏，这就是marker_list的作用        {            key!=cur_city&&(function(){                for(i in marker_list[key])            {                console.log(marker_list[key].length);                marker_list[key][i].hide();            }})()        }        })()                }            else            {                console.log('查询地址失败');            }            });        }    })</script></body></html>

阅读全文

0 0