vue 高德地图点击标记点弹出对应信息弹窗

＊且听风吟

已于 2023-03-28 18:42:13 修改

阅读量2.5k

点赞数 4

分类专栏： # Vue 2.x 文章标签： vue.js javascript 前端

于 2023-03-28 18:40:25 首次发布

本文链接：https://blog.csdn.net/HH18700418030/article/details/129735637

版权

新建文件 amap.vue：

<template>
  <div id="amapcontainer" style="width: 1200px; height: 720px"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
     
  securityJsCode: '' // '「申请的安全密钥」',
}
export default {
     
  data () {
     
    return {
     
      map: null,
      markerList: [],
      infoWindow: '',
      mapList: [
        {
     
          name: '小王',
          address: '广东省广州市海珠区',
          lnglats: [113.312566, 23.085073]
        }, {
     
          name: '小张',
          address: '广东省广州市黄埔区',
          lnglats: [113.480794, 23.137896]
        }, {
     
          name: '小李',
          address: '广东省广州市荔湾区',
          lnglats: [113.220556, 23.10718]
        },
        {
     
          name: '小