高德地图api多地点自定义显示名字+文字标识

置顶 xingxingwuxin

已于 2023-04-28 14:34:06 修改

阅读量4.0k

点赞数 5

文章标签： javascript 前端 html

于 2023-01-09 14:04:15 首次发布

本文链接：https://blog.csdn.net/fzxyxf1314/article/details/128613621

版权

<!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="https://webapi.amap.com/maps?v=1.4.15&key=62015cdf314339d6600c34a437ad8fcb"></script>
        <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

    </head>
    <style type="text/css">
        html, body, #container {
            height: 280px;
            width: 100%;
        }
    </style>

    <body>
        <div id="container"></div>
        <script>

        var park = [{
            'name' : '北京校区',
            'center' : '116.205467, 39.907761',
            'type' : 1,
            'index' :1,
            'icon' :'',
            'address': '北京市',
            'state': 1,
            'cpu': '30%',
            'subDistricts' : []
        },{
            'name' : '保定校区',
            'center' : '115.205467, 38.907761',
            'type' : 1,
            'index' :2,
            'icon' :'',
            'address': '保定市',
            'state': 2,
            'cpu': '37%',
            'subDistricts' : []
        },{
            'name' : '河北校区',
            'center' : '114.920000,37.670000',
            'type' : 1,
            'index' :3,
            'icon' :'',
            'address': '河北',
            'state': 2,
            'cpu': '45%',
            'subDistricts' : []
        }];
        var map = new AMap.Map('container', {
            resizeEnable: true,
            zoom : 10 
        });
        //点击合法marker重定向到parkInfo页面
        var _onClick = function(e) {
               // console.log(e.target)
               // console.log(e.target.De.title)
               // window.open("parkInfo.html?id="+this.G.index,"_blank");
                   
           }
        //循环输出数据库中所有的点的位置和信息
        var markers = [];
        for(var i = 0;i <= park.length;i+=1){
            var marker;//实例化marker
            marker = new AMap.Marker({
                        position: park[i].center.split(','),
                        // title: park[i].name,//鼠标移入显示停车场的名称
                        map: map,
                        index: park[i].index,
                        icon: park[i].icon,//自定义显示在地图上的图标
                        offset: new AMap.Pixel(-13, -30)

                    });


             marker.setMap(map);

            // 设置鼠标划过点标记显示的文字提示
            marker.setTitle(park[i].name);

            // 设置label标签
            // label默认蓝框白底左上角显示，样式className为：amap-marker-label
            marker.setLabel({
                offset: new AMap.Pixel(5, 5),  //设置文本标注偏移量
                content: park[i].name, //设置文本标注内容
                direction: 'right' //设置文本标注方位
            });
           
            markers.push(marker);
            //给所有的点标注添加点击事件
            AMap.event.addListener(marker, 'click', _onClick);
        }    

        //设置地图自适应
        map.setFitView();
        </script>
    </body>
</html>

高德官网文档：文本标记-点标记-示例中心-JS API 示例 | 高德地图API

第二种用法：点击地标显示地址，并且还可以取消显示的文字

直接上干货

<!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="https://webapi.amap.com/maps?v=1.4.15&key=62015cdf314339d6600c34a437ad8fcb"></script>
    	<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    	<!-- UI组件库 1.0 -->
    	<script src="http://webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
	</head>
	<style type="text/css">
		html, body, #container {
            height: 280px;
            width: 100%;
        }
	</style>

	<body>
		<div id="container"></div>
	</body>
		<script>

    // //初始化地图对象，加载地图
    // var map = new AMap.Map("container", {resizeEnable: true});
    // var lnglats = [
    //     [116.368904, 39.923423],
    //     [116.382122, 39.921176],
    //     [116.387271, 39.922501],
    //     [116.398258, 39.914600]
    // ];
    // var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
    // for (var i = 0, marker; i < lnglats.length; i++) {
    //     var marker = new AMap.Marker({
    //         position: lnglats[i],
    //         map: map
    //     });
    //     marker.content = '我是第' + (i + 1) + '个Marker';
    //     marker.on('click', markerClick);
    //     marker.emit('click', {target: marker});
    // }
    // function markerClick(e) {
    //     infoWindow.setContent(e.target.content);
    //     infoWindow.open(map, e.target.getPosition());
    // }
    // map.setFitView();


		var park = [{
			'name' : '昌平校区',
			'center' : '116.37895,40.109008',
			'type' : 1,
			'index' :122,
			'icon' :'',
			'address': '北京市昌平区',
			'state': 122,
			'cpu': '50%',
			'subDistricts' : []
		},{
			'name' : '海淀2校区',
			'center' : '116.292553,39.96316',
			'type' : 1,
			'index' :123,
			'icon' :'',
			'address': '北京市海淀区',
			'state': 123,
			'cpu': '50%',
			'subDistricts' : []
		},{
			'name' : '西城校区',
			'center' : '116.392798,39.884803',
			'type' : 1,
			'index' :124,
			'icon' :'',
			'address': '北京市西城区',
			'state': 124,
			'cpu': '50%',
			'subDistricts' : []
		},{
			'name' : '总部',
			'center' : '116.509449,39.960598',
			'type' : 1,
			'index' :128,
			'icon' :'images/zongbu.png',
			'address': '北京市朝阳区',
			'state': 128,
			'cpu': '50%',
			'subDistricts' : []
		}];
		var map = new AMap.Map('container', {
	        resizeEnable: true,
	        zoom : 10 
		});
		// //点击合法marker重定向到parkInfo页面
		// var _onClick = function(e) {
  //  			// console.log(e.target)
  //  			// console.log(e.target.De.title)
  //  			// window.open("parkInfo.html?id="+this.G.index,"_blank");
   				
  //  		}

   		var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
		//循环输出数据库中所有的点的位置和信息
		var markers = [];
		for(var i = 0;i <= park.length;i+=1){
			var marker;//实例化marker
			marker = new AMap.Marker({
    					position: park[i].center.split(','),
    					title: park[i].name,//鼠标移入显示停车场的名称
    					map: map,
    					index: park[i].index,
				        icon: park[i].icon,//自定义显示在地图上的图标
				        offset: new AMap.Pixel(-13, -30)

    				});


			 marker.setMap(map);
		    // 设置鼠标划过点标记显示的文字提示
		    marker.setTitle(park[i].name);

		    marker.content = park[i].name;
	        marker.on('click', markerClick);
	        marker.emit('click', {target: marker});
		    
		    // 设置label标签
		    // label默认蓝框白底左上角显示，样式className为：amap-marker-label
		    // marker.setLabel({
		    //     offset: new AMap.Pixel(2, 2),  //设置文本标注偏移量
		    //     content: park[i].name, //设置文本标注内容
		    //     direction: 'right' //设置文本标注方位
		    // });
		   
    		markers.push(marker);
    		
    		//给所有的点标注添加点击事件
    		// AMap.event.addListener(marker, 'click', _onClick);
		}	
		function markerClick(e) {
	        infoWindow.setContent(e.target.content);
	        infoWindow.open(map, e.target.getPosition());
	    }

		//设置地图自适应
		map.setFitView();
	</script>
	<style type="text/css">
	@media(min-width: 410px) {
        .batss {
            margin-top: -14.5%;
        }
       
    }
    @media(max-width: 415px) {
        .batss {
            margin-top: -14.5%;
        }
       
    }

    @media(max-width: 396px) {
        .batss {
            margin-top: -15.3%;
        }
       
    }
	</style>
</html>

星星一直在努力，加油

demo:下载：

借鉴：高德地图api的自定义地点标注_bearkeeping的博客-CSDN博客_高德地图提供的接口可以增加地图上的地标吗