高德地图开发

标签：info map const 地图开发 AMap marker new 高德

官网-api

官网-参考手册

1、原生js使用

1.1、引入js

去高德开发者平台创建一个自己key，具体步骤官网有。

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

1.2、设置地图容器

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

这是个全屏地图

html, body{
    width:100%; 
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 16px;
}
#container {
    width:100%; 
    height: 100%; 
}

1.3、设置地图初始位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="map.css" rel="stylesheet" type="text/css">
    <title>高德地图</title>
</head>
<body>
    <div id="container"></div>

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 
    <script>
         var map = new AMap.Map('container', {
            zoom:12, // 缩放级别
            center: [113.397428, 23.2], // 中心点坐标,广州
        });
    </script>
</body>
</html>

高德地图开发_ci

默认点标记

// 创建一个 Marker 实例：
 var marker = new AMap.Marker({
      position: new AMap.LngLat(113.397428, 23.2),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      title: '默认图标'
  });
  // 将创建的点标记添加到已有的地图实例：
  map.add(marker);

高德地图开发_html_02

自定义点标记

在设置图片地址image时，地址需要本地或者带绝对路径的地址，不然找不到。

let lonlat = [Math.random() + 113, Math.random() + 23]; // 随机生成经纬度

// 创建 AMap.Icon 实例：
const icon = new AMap.Icon({
  size: new AMap.Size(33, 43), // 图标尺寸
  image: require('@/assets/images/map-marker-jinji-select.png'), // Icon的图像
  imageSize: new AMap.Size(33, 43), // 根据所设置的大小拉伸或压缩图片
});

// 将 Icon 实例添加到 marker 上:
let marker = new AMap.Marker({
    position: new AMap.LngLat(lonlat[0], lonlat[1]),
    offset: new AMap.Pixel(-10, -10),
    icon: icon, // 添加 Icon 实例
    title: '自定义图标',
    zoom: 13
});
map.add(marker);

高德地图开发_css3_03

信息窗口

因为默认样式不满足需求，所以要自定义样式，在初始化InfoWindow时加上isCustom: true则可以使用自定义窗体

infoWindow = new AMap.InfoWindow({
  isCustom: true, // 使用自定义窗体
  content: this.createInfoWindow(title, content),
  offset: new AMap.Pixel(16, -45),
});

createInfoWindow(title, content) {
  const info = document.createElement('div');
  info.className = 'custom-info input-card content-window-card';
  
  // 可以通过下面的方式修改自定义窗体的宽高
  // info.style.width = "400px";
  // 定义顶部标题
  const top = document.createElement('div');
  const titleD = document.createElement('div');
  // const closeX = document.createElement('img');
  top.className = 'info-top';
  titleD.innerHTML = title;
  
  top.appendChild(titleD);
  // top.appendChild(closeX);
  info.appendChild(top);
  
  // 定义中部内容
  const middle = document.createElement('div');
  middle.className = 'info-middle';
  middle.style.backgroundColor = 'white';
  middle.innerHTML = content;
  info.appendChild(middle);
  
  // 定义底部内容
  const bottom = document.createElement('div');
  bottom.className = 'info-bottom';
  bottom.style.position = 'relative';
  bottom.style.top = '0px';
  bottom.style.margin = '0 auto';
  const sharp = document.createElement('img');
  sharp.src = 'https://webapi.amap.com/images/sharp.png';
  bottom.appendChild(sharp);
  info.appendChild(bottom);
  return info;
},

css
不要加scoped,否则不生效

#container {
   width: 100%;
   height: 100%;
   .content-window-card {
     position: relative;
     box-shadow: none;
     bottom: 0;
     left: 0;
     width: auto;
     padding: 0;
   }

   .content-window-card p {
       height: 2rem;
   }

   .custom-info {
       border: solid 1px #fff;
       background-color: #fff;
       padding: 14px 16px;
       border-radius: 8px;
       box-shadow:0px 8px 16px rgba(9, 15, 23, 0.2);
   }

   div.info-top {
       position: relative;
       background: none repeat scroll 0 0 #F9F9F9;
   }

   div.info-top div {
       display: inline-block;
       color: #3C4858;
       font-size: 16px;
       // line-height: 31px;
       margin-bottom: 16px;
   }

   div.info-bottom {
       height: 0px;
       width: 100%;
       clear: both;
       text-align: center;
   }

   div.info-bottom img {
       position: relative;
       top: 15px;
       z-index: 104;
   }

   .info-middle img {
       float: left;
       margin-right: 6px;
       width: 768px;
   }
 }

指定信息窗口显示位置
窗口默认显示位置在地图右下角，现在要求显示在点击的点标记正上方，用下述代码就行了

that.infoWindow.open(this.map, this.marker.getPosition());

找了张别人的图片，类似这样

高德地图开发_ci_04

海量点标记

https://lbs.amap.com/demo/jsapi-v2/example/mass-markers/massmarks

城市数据点citys.js

// 图标数组
    var style = [{
            url: require('@/assets/images/map-marker-jinji-normal.png'),
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(11, 11),
        }, {
            url: require('@/assets/images/map-marker-jinji-normal.png'),
            anchor: new AMap.Pixel(4, 4),
            size: new AMap.Size(7, 7),
        }, ];
        
        // 城市数据点
        var citys = [{
            "lnglat": [122.06957, 41.124484],
            "name": "盘锦市",
            "style": 1
        }, {
            "lnglat": [123.18152, 41.269402],
            "name": "辽阳市",
            "style": 1
        }, {
            "lnglat": [111.670801, 40.818311],
            "name": "呼和浩特市",
            "style": 0
        }, {
            "lnglat": [117.283042, 31.86119],
            "name": "合肥市",
            "style": 0
        }, ]
        
        //创建点位
        var mass = new AMap.MassMarks(citys, {
            opacity: 0.8,
            zIndex: 111,
            cursor: 'pointer',
            style: style
        });
        
        var marker = new AMap.Marker({content: ' ', map: map});//创建一个普通Marker点
    
    //绑定移入事件
      mass.on('mouseover', function (e) {
          marker.setPosition(e.data.lnglat);
      });
  
      mass.setMap(map);//把massMarks 添加到地图实例

鼠标移入单个海量点标记，更换图标

mapSjysStyle: [
  // 默认图标
  {
    url: require('@/assets/images/marker.png'),
    anchor: new AMap.Pixel(20, 20),
    size: new AMap.Size(40, 40),
  },
  // 划过时的图标
  {
    url: require('@/assets/images/marker_hover.png'),
    anchor: new AMap.Pixel(20, 20),
    size: new AMap.Size(40, 40),
  },
],

// 海量点标记
const that = this;
const dataList= JSON.parse(JSON.stringify(that.dataList));
that.massSjys = new AMap.MassMarks(dataList, {
  // opacity: 0.8,
  zIndex: 100,
  cursor: 'pointer',
  style: that.mapSjysStyle,
});
// 移入显示点标记
that.mass.on('mouseover', (e) => {
  // 移入更换图标
  e.data.style = 1;
})
that.mass.on('mouseout', (e) => {
  // 移入更换成默认图标
  e.data.style = 0;
});
that.map.add(that.mass);
that.map.setFitView(that.mass);

鼠标移入点标记，显示图片窗体

AMap.event.addListener(that.marker, 'mouseover', () => {
  infoWindow.open(that.map, that.marker.getPosition());
});

鼠标离开点标记，隐藏图片窗体

AMap.event.addListener(that.marker, 'mouseout', () => {
  map.clearInfoWindow();
});

画一条线

https://lbs.amap.com/demo/javascript-api/example/overlayers/polyline-draw-and-edit

var path = [
      [116.403322, 39.920255],
      [116.410703, 39.897555],
      [116.402292, 39.892353],
      [116.389846, 39.891365]
    ]
          var polyline = new AMap.Polyline({
      path: path,
      isOutline: true,
      outlineColor: '#ffeeff',
      borderWeight: 3,
      strokeColor: "#3366FF",
      strokeOpacity: 1,
      strokeWeight: 6,
      // 折线样式还支持 'dashed'
      strokeStyle: "solid",
      // strokeStyle是dashed时有效
      strokeDasharray: [10, 5],
      lineJoin: 'round',
      lineCap: 'round',
      zIndex: 50,
    })
        map.add([polyline]);
    map.setFitView();

画一堆线

https://lbs.amap.com/demo/jsapi-v2/example/overlayers/polyline-draw

datalist = [
      [
        [
          116.32873535156249,
          40.01499435375046
        ],
        [
          116.52099609375,
          40.019201307686785
        ],
        [
          116.49902343749999,
          40.12849105685408
        ]
      ],
      [
        [
          116.66931152343749,
          40.0360265298117
        ],
        [
          116.72973632812499,
          40.14948820651523
        ],
        [
          116.81213378906249,
          40.01499435375046
        ]
      ]
    ]
      lineList = [];
      datalist.forEach((item, index) => {
        lineList.push(
          new AMap.Polyline({
            path: item,
            isOutline: true,
            outlineColor: '#FFC77B',
            borderWeight: 1,
            strokeColor: '#FFC77B',
            strokeOpacity: 1,
            strokeWeight: 3,
            // 折线样式还支持 'dashed'
            strokeStyle: 'solid',
            // strokeStyle是dashed时有效
            strokeDasharray: [10, 5],
            lineJoin: 'round',
            lineCap: 'round',
            // cursor: 'pointer',
            zIndex: 3,
            // 自定义属性 业务数据信息
            extData: datalist[index],
          }),
        );
      });
      
     map.add(lineList);
      // 缩放地图到合适的视野级别
      map.setFitView(lineList );

鼠标移入线，让线高亮，显示信息窗体；移出线，线恢复颜色，隐藏信息窗体

// 移入线 让线高亮 显示信息窗体
      lineList .forEach((item, index) => {
        item.on('mouseover', (e) => {
          const datas = e.target.getExtData();
          // 缩放地图到合适的视野级别
          //   this.map.setFitView([item]);
          // 当折线被点击时，改变颜色，注意要写上zIndex
          item.setOptions({
            outlineColor: '#FF4E4E',
            strokeColor: '#FF4E4E',
            zIndex: 20,
          });
          const title = '<div class="info-title">信息</div>';
          const content = `名称：${datas.name}`;
          that.infoWindow = new AMap.InfoWindow({
            isCustom: true, // 使用自定义窗体
            content: that.createInfoWindow(title, content),
            offset: new AMap.Pixel(16, -45),
          });
          // 找出这条线上第一个点的坐标，作为信息窗体显示的位置，这块需要自己改
          const zuobiao = [
            this.datalist[index].coordsList[0].lng,
            this.datalist[index].coordsList[0].lat,
          ];
          console.log(66666, zuobiao);
          // 鼠标移入点标记，显示图片窗体
          that.infoWindow.open(that.map, zuobiao);
        });
        item.on('mouseout', (e) => {
          const mycolor = this.getPolineColor(this.SjysDatalist, e.target.getExtData().ndbkvIndex);
          // 移出线，恢复默认色
          item.setOptions({
            outlineColor: mycolor,
            strokeColor: mycolor,
            zIndex: 20,
          });
          // 鼠标离开线，隐藏图片窗体
          that.map.clearInfoWindow();
        });
      });

所有code

const icon = new AMap.Icon({
  size: new AMap.Size(33, 43), // 图标尺寸
  image: require('@/assets/images/map-marker-jinji-select.png'), // Icon的图像
  imageSize: new AMap.Size(33, 43), // 根据所设置的大小拉伸或压缩图片
});

const feiIcon = new AMap.Icon({
  size: new AMap.Size(33, 43), // 图标尺寸
  image: require('@/assets/images/map-marker-feijinji-select.png'), // Icon的图像
  imageSize: new AMap.Size(33, 43), // 根据所设置的大小拉伸或压缩图片
});

export default {
  name: 'mapview',
  data() {
    return {
      map: null,
      marker: null, // 地图容器
      moren: require('@/assets/images/img-table-nopic.png'),
      mapStyle: [
        {
          url: require('@/assets/images/map-marker-jinji-normal.png'),
          anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(10, 10),
        },
        {
          url: require('@/assets/images/map-marker-feijinji-normal.png'),
          anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(10, 10),
        },
      ],
    };
  },

// 构建自定义信息窗体
    createInfoWindow(title, content) {
      const info = document.createElement('div');
      info.className = 'custom-info input-card content-window-card';

      // 可以通过下面的方式修改自定义窗体的宽高
      // info.style.width = "400px";
      // 定义顶部标题
      const top = document.createElement('div');
      const titleD = document.createElement('div');
      // const closeX = document.createElement('img');
      top.className = 'info-top';
      titleD.innerHTML = title;

      top.appendChild(titleD);
      // top.appendChild(closeX);
      info.appendChild(top);

      // 定义中部内容
      const middle = document.createElement('div');
      middle.className = 'info-middle';
      middle.style.backgroundColor = 'white';
      middle.innerHTML = content;
      info.appendChild(middle);

      // 定义底部内容
      const bottom = document.createElement('div');
      bottom.className = 'info-bottom';
      bottom.style.position = 'relative';
      bottom.style.top = '0px';
      bottom.style.margin = '0 auto';
      const sharp = document.createElement('img');
      sharp.src = 'https://webapi.amap.com/images/sharp.png';
      bottom.appendChild(sharp);
      info.appendChild(bottom);
      return info;
    },

// 地图
    mapFun() {
      const that = this;
      that.map = new AMap.Map('container', {
        zoom: 13,
        center: [that.diseaseList[0].jingdu, that.diseaseList[0].weidu],
      });
      
      if (!that.diseaseList) return;
      const diseaseList = JSON.parse(JSON.stringify(this.diseaseList));
      // 转为MassMarks需要的数据格式
      diseaseList.map((itsm) => {
        const obj = itsm;
        obj.lnglat = [obj.jingdu, obj.weidu]; // 经纬度数组 点标记位置
        obj.style = obj.fenleimch === '急' ? 0 : 1;
        return obj;
      });
      // 海量点标记
      const mass = new AMap.MassMarks(diseaseList, {
        opacity: 0.8,
        zIndex: 1,
        cursor: 'pointer',
        style: that.mapStyle,
      });

      // 点标记
      that.marker = new AMap.Marker({
        position: new AMap.LngLat(diseaseList[0].jingdu, diseaseList[0].weidu),
        offset: new AMap.Pixel(-17, -33),
        icon: diseaseList[0].fenleimch === '非' ? feiIcon : icon, // 添加 Icon 实例
        zIndex: 22,
        // map: that.map,
      });
      
      // 移入显示点标记，显示marker,弹出自定义的信息窗体
      mass.on('mouseover', (e) => {
        const icons = e.data.fenleimch === '非' ? feiIcon : icon; // 选中的图标
        that.marker.setIcon(icons); // 设置点标记的显示图标，
        that.marker.setPosition(e.data.lnglat); // 设置覆盖物位置
        that.map.add(that.marker);
        
        const title = `<span style="font-weight:bold;font-size:18px;color:#1B222C">${e.data.leixingmch}</span>   ${e.data.jingdu},${e.data.weidu}   ${e.data.shijian}`;
        const content = `<img src='${e.data.tupian ? this.$website.imagesUrl + e.data.tupian : that.moren}' 
                              class='${e.data.tupian ? 'normal-img' : 'error-img'}'>
                        `;
        that.infoWindow = new AMap.InfoWindow({
          isCustom: true, // 使用自定义窗体
          content: that.createInfoWindow(title, content),
          offset: new AMap.Pixel(16, -45),
        });
        // 鼠标移入点标记，显示图片窗体
        that.infoWindow.open(that.map, that.marker.getPosition());
      });
      
      mass.on('mouseout', () => {
        // 鼠标离开点标记，隐藏图片窗体
        that.map.clearInfoWindow();
        // 鼠标离开点标记，隐藏图标标记
        that.marker.setMap(null);
      });
      //   that.map.setFitView();
      mass.setMap(that.map);
    },

    // 画事件统计折线
    AddSjtjPolyline() {
      const that = this;
      this.SjtjPolylineList = [];
      this.SjtjLineDatalist.forEach((item, index) => {
        this.SjtjPolylineList.push(
          new AMap.Polyline({
            path: item.coordsList,
            isOutline: true,
            outlineColor: '#FFC77B',
            borderWeight: 1,
            strokeColor: '#FFC77B',
            strokeOpacity: 1,
            strokeWeight: 3,
            // 折线样式还支持 'dashed'
            strokeStyle: 'solid',
            // strokeStyle是dashed时有效
            strokeDasharray: [10, 5],
            lineJoin: 'round',
            lineCap: 'round',
            // cursor: 'pointer',
            zIndex: 3,
            // 自定义属性 业务数据信息
            extData: this.SjtjLineDatalist[index],
          }),
        );
      });
      // 移入线 让线高亮 显示信息窗体
      this.SjtjPolylineList.forEach((item, index) => {
        item.on('mouseover', (e) => {
          console.log(333333333333, e.target.getExtData());
          const datas = e.target.getExtData();
          // 当折线被点击时，改变颜色，注意要写上zIndex
          item.setOptions({
            outlineColor: '#FF4E4E',
            strokeColor: '#FF4E4E',
            zIndex: 20,
          });
          const title = '<div class="info-title">事件信息</div>';
          const content = `${datas.brief}<br /> ${datas.eventDesc},<br /> ${datas.startTime}`;
          that.infoWindow = new AMap.InfoWindow({
            isCustom: true, // 使用自定义窗体
            content: that.createInfoWindow(title, content),
            offset: new AMap.Pixel(16, -45),
          });
          const zuobiao = [
            this.SjtjLineDatalist[index].coordsList[0].lng,
            this.SjtjLineDatalist[index].coordsList[0].lat,
          ];
          console.log(66666, zuobiao);
          // 鼠标移入点标记，显示图片窗体
          that.infoWindow.open(that.map, zuobiao);
        });
        item.on('mouseout', () => {
          // 移出线，恢复默认色
          item.setOptions({
            outlineColor: '#FFC77B',
            strokeColor: '#FFC77B',
            zIndex: 20,
          });
          // 鼠标离开线，隐藏图片窗体
          that.map.clearInfoWindow();
        });
      });
      this.map.add(this.SjtjPolylineList);
      // 缩放地图到合适的视野级别
      this.map.setFitView(this.SjtjPolylineList);
    },
    // 隐藏事件统计折线
    hideSjtjPolyline() {
      this.SjtjPolylineList.forEach((item) => {
        item.hide();
      });
    },
    // 显示事件统计折线
    showSjtjPolyline() {
      // 缩放地图到合适的视野级别
      this.map.setFitView(this.SjtjPolylineList);
      this.SjtjPolylineList.forEach((item) => {
        item.show();
      });
    },

等待地图加载完成

this.map.on('complete', () => {
   this.middleDieaseListWarn(params)
 })

高德地图开发（一、引入地图）高德地图开发（三、地图marker点标记）

标签：info,map,const,地图,开发,AMap,marker,new,高德
From： https://blog.51cto.com/u_12881709/5960143