高德地图创建Marker点,1.4.15版本

介绍

本篇文章分享一下如何自定义创建一个或多个marker点

1.首先引入高德地图的JavaScript API文件：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您的key值"></script>

2.创建地图容器和地图对象：

<div id="map"></div>
<script type="text/javascript">
    var map = new AMap.Map('map', {
        zoom: 12, //初始缩放级别
        center: [116.397428, 39.90923] //初始中心点
    });
</script>

3.创建Marker点并添加到地图上：

<script type="text/javascript">
    var marker = new AMap.Marker({
        position: [116.397428, 39.90923], //Marker点坐标
        title: '这是一个Marker点', //鼠标悬停时显示的文字
        icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', //Marker点图标
        offset: new AMap.Pixel(-12,-36) //Marker点图标偏移量
    });
    marker.setMap(map); //添加Marker点到地图上
</script>

多个marker点如果要一次性全部创建出来呢?

<script type="text/javascript">
 let arr = [
        { position: [121.473701, 31.230409] },
        { position: [121.473701, 32.230409] },
        { position: [122.473701, 32.230409] },
      ];
      arr.forEach(item=>{
        let marker = new AMap.Marker({
          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
          position: item.position,
        });
        map.add(marker);
      })
</script>

其实就是外面套一层循环,很简单的.

那么问题来了,我要如何删除呢?

单个删除

<script type="text/javascript">
    var marker = new AMap.Marker({
        position: [116.397428, 39.90923], //Marker点坐标
        title: '这是一个Marker点', //鼠标悬停时显示的文字
        icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', //Marker点图标
        offset: new AMap.Pixel(-12,-36) //Marker点图标偏移量
    });
    marker.setMap(map); //添加Marker点到地图上
 //删除
  if (marker) {
    map.remove(marker);
    marker = null;
}
</script>

多个删除

<script type="text/javascript">
 let arr = [
        { position: [121.473701, 31.230409] },
        { position: [121.473701, 32.230409] },
        { position: [122.473701, 32.230409] },
      ];
 let markerList=[] //创建一个数组,储存所有marker
      arr.forEach(item=>{
        let marker = new AMap.Marker({
          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
          position: item.position,
        });
        map.add(marker);
        markerList.push(marker)
      })
//删除
 if (marker) {
    map.remove(markerList);
    marker = null;
    markerList=[]
}
</script>

大功告成!