高德地图多点标记 marker JSAPI

最新推荐文章于 2024-05-26 21:47:27 发布

letMeAlone_

最新推荐文章于 2024-05-26 21:47:27 发布

阅读量5.2k

点赞数 1

分类专栏： javascript 高德地图JSAPI 文章标签：高德地图 api jsapi javascript 多点标注

本文链接：https://blog.csdn.net/a250758092/article/details/76461470

版权

javascript 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

高德地图JSAPI

1 篇文章 0 订阅

订阅专栏

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

使用场景是：通过选择某级别的城市或省份，将该级别下的所有具体地址标注到地图上，该场景适合通过地址查询经纬度来标记，以下内容为测试代码。刚看了下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>

letMeAlone_

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
高德地图多点标记 marker JSAPI

以下内容涉及到一些简单的接口使用场景是：通过选择某级别的城市或省份，将该级别下的所有具体地址标注到地图上，该场景适合通过地址查询经纬度来标记，以下内容为测试代码。刚看了下API写的，学习阶段，仅供参考使用高德地图，创建应用获得KEY，并通过JS导入。<!doctype html><html><head> <meta charset="utf-8"> <meta http-equi
复制链接

扫一扫