高德地图多点标记 marker JSAPI

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

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

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


<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>

你可能感兴趣的:(javascript,高德地图JSAPI)