高德地图 jsapi 标记多个(marker)点,添加自定义属性,获取自定义属性

高德地图 jsapi 标记多个(marker)点,添加自定义属性,获取自定义属性

var map = new AMap.Map("container", {
        zoom: 5, //级别
        pitch: 65,
        rotation: 45,
        center: [116.397428, 39.90923], //中心点坐标
        // layers: [new AMap.TileLayer.Satellite()],
        viewMode: "3D", //使用3D视图
        mapStyle: "amap://styles/grey"
      });
      map.setCity("北京");
      var startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(25, 34),
        // 图标的取图地址
        image: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png",
        // 图标所用图片大小
        imageSize: new AMap.Size(48, 48),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(-9, -3)
      });
      var markers = [
        {
          icon: startIcon,
          // "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png",
          position: [116.205467, 39.907761],
          content:
            "" +
            '<div class="custom-content-marker">' +
            '   <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">' +
            '   <div class="close-btn" οnclick="clearMarker()">X</div>' +
            "</div>",
            extData:{
               id:"阿撒旦法师打发是打发阿斯顿发生"
            }
           
        },
        {
          icon: startIcon,
          // "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png",
          position: [116.368904, 39.913423],
          content:
            "" +
            '<div class="custom-content-marker">' +
            '   <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">' +
            '   <div class="close-btn" οnclick="clearMarker()">X</div>' +
            "</div>",
            extData:{
               id:"阿撒旦法师打发是打发阿斯顿发生"
            }
        },
        {
          icon: startIcon,
          // "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png",
          position: [116.305467, 39.807761],
          content:
            "" +
            '<div class="custom-content-marker">' +
            '   <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">' +
            '   <div class="close-btn" οnclick="clearMarker()">X</div>' +
            "</div>",
            extData:{
               id:"阿撒旦法师打发是打发阿斯顿发生"
            },
            
        }
      ];
      // 添加一些分布不均的点到地图上,地图上添加三个点标记,作为参照
      markers.forEach(function(marker1) {
        var marker =new AMap.Marker({
          map: map,
          icon: marker1.icon,
          position: [marker1.position[0], marker1.position[1]],
          offset: new AMap.Pixel(-13, -30),
          label: { content: "<div class='infos'>张三</div>",
          direction: 'top' //文本标注方位 可选值:'top'|'right'|'bottom'|'left'|'center',默认值: 'right' 
          }

          // content:marker.content
        });
        marker.on('click', showInfoM);//添加点击事件
        marker.setExtData(marker1.extData)//添加marker 的自定义属性
      });
      
      function showInfoM(e){
        console.log(e.target.getExtData())//获取marker的自定义属性
        var text = '您在 [ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ] 的位置点击了marker!'
        console.log(text)
    }
      var mybounds = new AMap.Bounds(
        [114.522638, 36.661981],
        [114.473692, 36.622514]
      );
      map.setBounds(mybounds);
      var center = map.getCenter();

在这里插入图片描述

首先,你可以使用高德地图 JavaScript API 来在 Vue 中集成高德地图。然后在获取到数据后,使用 `addMarkers()` 方法添加多个标记,该方法接收一个标记数组作为参数。 接下来,你可以使用 `setAnimation()` 方法将击按钮对应的标记设置为“跳动”动画。该方法接收一个 `AMap.Marker.AnimationName` 枚举值作为参数,可以设置为 `AMap.Marker.AnimationName.BOUNCE` 来实现跳动效果。 以下是一个简单的示例代码: ```html <template> <div id="map-container"></div> <button @click="startAnimation">开始跳动</button> </template> <script> import AMapLoader from '@amap/amap-jsapi-loader' export default { data() { return { map: null, markers: [] } }, mounted() { AMapLoader.load({ key: 'your-amap-api-key', version: '2.0', plugins: ['AMap.MarkerClusterer'] }).then(AMap => { this.map = new AMap.Map('map-container', { zoom: 13, center: [116.397428, 39.90923] }) const marker1 = new AMap.Marker({ position: [116.407428, 39.90923] }) const marker2 = new AMap.Marker({ position: [116.417428, 39.90923] }) const marker3 = new AMap.Marker({ position: [116.427428, 39.90923] }) this.markers = [marker1, marker2, marker3] this.map.addMarkers(this.markers) }) }, methods: { startAnimation() { // 假设击第二个标记 this.markers[1].setAnimation(AMap.Marker.AnimationName.BOUNCE) } } } </script> ``` 在实际应用中,你需要根据实际需求修改代码,并在适当的时机添加标记和设置动画。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值