vue高德地图实现动态切换坐标点 vue实现自定义窗口展示 vue高德地图实现点击坐标点展示自定义窗体 js高德地图自定义坐标点 web高德地图 vue高德地图

糖葫芦加冰

已于 2024-03-20 09:10:47 修改

阅读量3.2k

点赞数 10

分类专栏： vue 文章标签： javascript vue.js html5

于 2020-11-25 21:02:28 首次发布

本文链接：https://blog.csdn.net/weixin_38356321/article/details/109527638

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

先来看下效果：

首先注册高德账号获取到高德密钥 key

高德开放平台 | 高德地图API

概述-地图 JS API 1.4 | 高德地图API

官网注册成为开发者个人公司都可以然后进去控制台

1.我的应用中创建新的应用

2.在应用中点击添加创建新的key

下面开始实现你想要的功能：

我是基于vue开发的所以这里就用了vue-cli 可自行去vue官网安装cli脚手架

vue create vue-map 安装vue脚手架命令下面是我的文件目录 Home.vue是主要实现功能的代码

在入口index.html中引入高德js文件引入的cdn地址key的参数就是你应用中创建的key

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>高德地图</title>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=高德申请的key"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

在Home.vue 文件中进行开发

我这里写的大小800px的正方形。

<template>
  <div class="home">
    <div class="map" id="container"></div>
  </div>
</template>

<style lang="less" scoped>
.map{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 800px;
  height: 800px;
}
</style>

1. 初始化地图控件

<script>
// @ is an alias to /src
export default {
  name: 'Home',
  components: {
    
  },
  data () {
    return {
      map: '',
      infoWindow: '',
      marker: '',
      timer: '',
      n: 0,
      list: [
        {
          name: '杭州雷峰塔景区',
          longitude: '120.148849',
          latitude: '30.230934',
          people: Math.floor(Math.random() * 100000)
        },
        {
          name: '杭州西湖区河坊街',
          longitude: '120.092207',
          latitude: '30.274405',
          people: Math.floor(Math.random() * 100000)
        },
        {
          name: '杭州西湖断桥残雪',
          longitude: '120.151195',
          latitude: '30.258105',
          people: Math.floor(Math.random() * 100000)
        },
        {
          name: '杭州西湖风景名胜区-曲院风荷',
          longitude: '120.135502',
          latitude: '30.251182',
          people: Math.floor(Math.random() * 100000)
        },
        {
          name: '杭州西湖风景名胜区-曲院风荷',
          longitude: '120.135502',
          latitude: '30.251182',
          people: Math.floor(Math.random() * 100000)
        },
        {
          name: '银泰百货(西湖店)',
          longitude: '120.165667',
          latitude: '30.243768',
          people: Math.floor(Math.random() * 100000)
        },
        {
          name: '湘湖国家旅游度假区',
          longitude: '120.209336',
          latitude: '30.133265',
          people: Math.floor(Math.random() * 100000)
        },
        {
          name: '杭州动物园',
          longitude: '120.133069',
          latitude: '30.212224',
          people: Math.floor(Math.random() * 100000)
        }
      ]
    }
  },
  methods: {
    // 初始化地图控件方法
    initMap() {
      this.map = new AMap.Map(document.getElementById("container"), {
        mapStyle: 'amap://styles/darkblue',
        resizeEnable: false,
        center: [this.list[0].longitude, this.list[0].latitude],//地图中心点
        zoom: 13,//地图显示的缩放级别
        keyboardEnable: false,
        zoomEnable: true,
        dragEnable: true,
        animateEnable: true
      });
      // 循环初始化所有坐标点
      this.list.forEach(v => {
        this.initMarker({ lng: v.longitude, lat: v.latitude }, v)
      })
      // 通过定时器对地图坐标进行轮播
      this.setInter()
    },
    // 初始化坐标点的icon
    initMarker(location, item) {
      // console.log('Location', location, item)
      // 生成坐标点icon
      let icon = new AMap.Icon({
        size: new AMap.Size(20, 26),
        image: require("../assets/images/dn-marker-icon.png"),
        imageSize: new AMap.Size(20, 26)
      });
      // 坐标点 生成方法
      this.marker = new AMap.Marker({
        icon: icon, // 坐标点图标
        position: [location.lng, location.lat], // 左边点的经纬度
        offset: new AMap.Pixel(0, -30) // 坐标点偏移量
      });
      // 坐标点添加点击事件 用来打开自定义窗口 也可直接添加窗口自动全部打开状态
      this.marker.on('click', (e) => {
        // console.log('marker 添加点击事件：', e, e.pixel.x, e.pixel.y)
        this.initInfoWindow(location.lng, location.lat, item)
        // 点击当前标点移动至地图中心点
        this.setCenter(location.lng, location.lat)
        this.infoWindow.open(this.map, e.lnglat)
      })
      // 初始化坐标点自定义窗口
      this.initInfoWindow(location.lng, location.lat, item)
      // 打开窗口的方法 这里也可以通过 点击坐标点打开
      this.infoWindow.open(this.map, {Q: location.lat, R: location.lng, lat: location.lat, lng: location.lng})
      // 
      this.marker.setMap(this.map)
    },
    // 初始化信息窗体
    initInfoWindow(lng, lat, item) {
      // console.log('创建了信息窗体')
      this.infoWindow = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        anchor: 'bottom-center',
        content: this.createInfoWindow(item),
        offset: new AMap.Pixel(0, -20),
        autoMove: true,
        closeWhenClickMap: false
      });
    },
    // 创建信息窗体
    createInfoWindow(item) {
      return `
        <div class="dn-info-window">
          <div class="dn-info-name">${item.name}</div>
          <div class="dn-info-num">实时人数：<span>${item.people}</span></div>
        </div>
      `
    },
    // 轮循坐标点方法
    setInter() {
      this.timer = setInterval(() => {
        // 轮播当前标点移动至地图中心点
        this.setCenter(this.list[this.n].longitude, this.list[this.n].latitude)
        this.initMarker({ lng: this.list[this.n].longitude, lat: this.list[this.n].latitude }, this.list[this.n])
        if (this.n == (this.list.length - 1)) {
          this.n = 0
        } else {
          this.n++
        }
      }, 10000)
    },
    // 当前标点移动至地图中心
    setCenter (long, lati) {
      this.map.setCenter([long, lati])
    }
  },
  mounted () {
    this.initMap()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>

样式代码


<style lang="less" scoped>
.map{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 800px;
  height: 800px;
}
// 自定义窗体的样式  
/deep/.info-window {
  padding: 10px;
  background: rgba(4, 77, 145, 0.753);
  color: #3196FA;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;

  .info-name {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
  }

  .info-num {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #A5A3A1;

    >span {
      font-size: 14px;
      color: #3196FA;

      &.active-color {
        color: #EF4864;
      }
    }
  }
}

</style>

这篇文章主要记录自己使用高的地图的方法。欢迎大家下方指导。下篇更新高德地图搜索地点功能