【vue】vue集成高德地图

朱雀 2022-10-07 05:56 305阅读 0赞

> `前言`

vue2.x集成高德地图参考这篇文章：[https://blog.csdn.net/athwang/article/details/108236551][https_blog.csdn.net_athwang_article_details_108236551]  
ps：此处要注意，如果文件报错，关闭当前文件的eslint 验证，我在评论中有说到。

> `实现简单标注`

参考这两篇文章：  
[https://lbs.amap.com/demo/amap-ui/demos/amapui-amaploader/amapui-amaploader1][https_lbs.amap.com_demo_amap-ui_demos_amapui-amaploader_amapui-amaploader1]  
[https://developer.amap.com/api/amap-ui/reference-amap-ui/overlay/simplemarker][https_developer.amap.com_api_amap-ui_reference-amap-ui_overlay_simplemarker]  
示例代码：

initPage(SimpleMarker, map) { 
    
      //创建SimpleMarker实例
      new SimpleMarker({ 
    
        //前景文字
        iconLabel: 'A',
    
        //图标主题
        iconTheme: 'default',
    
        //背景图标样式
        iconStyle: 'red',
    
        //...其他Marker选项...，不包括content
        map: map,
        position: [121.489331, 31.286376]
      });
    
      //创建SimpleMarker实例
      new SimpleMarker({ 
        //前景文字
        iconLabel: { 
          innerHTML: '<i>B</i>', //设置文字内容
          style: { 
            color: '#fff' //设置文字颜色
          }
        },
        //图标主题
        iconTheme: 'fresh',
        //背景图标样式
        iconStyle: { 
          src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201804%2F18%2F20180418103346_nilns.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626420549&t=2cb411bcdc4f64460c87b123bbc2f31a',
          style: { 
            width: '30px',
            height: '30px',
            'border-radius': '15px',
            border: '1px solid #fff'
          }
        },
    
    
        //...其他Marker选项...，不包括content
        map: map,
        position: [121.489073, 31.285422]
      });
    }

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70]  
标注样式实现方式：两种

iconStyle: '<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201804%2F18%2F20180418103346_nilns.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626420549&t=2cb411bcdc4f64460c87b123bbc2f31a" style="width:30px; height:30px; border-radius: 15px; border: 2px solid #fff;"></img>',

iconStyle: { 
      src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201804%2F18%2F20180418103346_nilns.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626420549&t=2cb411bcdc4f64460c87b123bbc2f31a',
      style: { 
        width: '30px',
        height: '30px',
        'border-radius': '15px',
        border: '2px solid #fff'
      },
    },

添加点击事件  
参考文章：[https://www.cnblogs.com/xiaomg/articles/10432907.html][https_www.cnblogs.com_xiaomg_articles_10432907.html]  
`我用的这种方式`  
参考文章2：[https://blog.csdn.net/hangzhou728/article/details/111280566][https_blog.csdn.net_hangzhou728_article_details_111280566]  
源码

<template>
      <div class="map">
        <div class="container">
          <el-amap
            :amap-manager="amapManager"
            :vid="'amap-vue'"
            :zoom="zoom"
            :plugin="plugin"
            :center="center"
            :events="events"
          >
            <el-amap-marker
              v-for="(marker, index) in markers"
              :position="marker"
              :key="index"
            ></el-amap-marker>
          </el-amap>
        </div>
    
        <SiteInformation
          v-model="siteInformation.isShow"
          :data="siteInformation.data"
          v-if="siteInformation.isShow"
        />
      </div>
    </template>
    
    <script>
    /** * amap-manager： 地图管理对象 * vid：地图容器节点的ID * zooms： 地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默认范围[3-19]，取值范围[3-19] * center： 地图中心点坐标值 * plugin：地图使用的插件 * events： 事件 */
    import SiteInformation from './SiteInformation2'
    import {  AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
    let amapManager = new AMapManager()
    export default { 
      name: 'AMap',
      data() { 
        let that = this
        return { 
          siteInformation: {  isShow: false, data: null },
          simpleMarkerData: [
            { 
              id: 1,
              icon: 'https://bkimg.cdn.bcebos.com/pic/cb8065380cd791235fcb3e88ae345982b2b78027?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg',
              name: '南山站',
              createDate: '2021-05-01 08:00:00',
              principal: '李教授',
              telPhone: '15012345678',
              uploadDate: '2021-06-01 07:30:22',
              bugNumber: 7382,
              imageNumber: 3517,
              position: [121.489331, 31.286376],
    
            },
            { 
              id: 2,
              icon: 'https://taojin-his.cdn.bcebos.com/9c16fdfaaf51f3de426e012a9aeef01f3b2979a4.jpg',
              name: '北山站',
              createDate: '2021-05-01 08:00:00',
              principal: '张教授',
              telPhone: '13712345678',
              uploadDate: '2021-06-01 07:30:22',
              bugNumber: 7382,
              imageNumber: 3517,
              position: [121.488231, 31.285276]
            }
          ],
          amapManager,
          markers: [],
          center: [112.938888, 28.228272],
          zoom: 17,
          lng: 0,
          lat: 0,
          loaded: false,
          events: { 
            init() { 
              lazyAMapApiLoaderInstance.load().then(() => { 
                that.initMap()
              })
            },
            // 点击地图事件
            click(e) { 
              that.markers = []
              let {  lng, lat } = e.lnglat
              that.lng = lng
              that.lat = lat
              console.log('lng=' + lng, 'lat=' + lat)
              that.center = [lng, lat]
              that.markers.push([lng, lat])
              // 这里通过高德 SDK 完成。
              let geocoder = new AMap.Geocoder({ 
                radius: 1000,
                extensions: 'all'
              })
            }
          },
          // 一些工具插件
          plugin: [
            { 
              pName: 'Geocoder',
              events: { 
                init(o) {  }
              }
            },
            { 
              // 定位
              pName: 'Geolocation',
              events: { 
                init(o) { 
                  // o是高德地图定位插件实例
                  o.getCurrentPosition((status, result) => { 
                    if (result && result.position) { 
                      // 设置经度
                      that.lng = result.position.lng
                      // 设置维度
                      that.lat = result.position.lat
                      // 设置坐标
                      that.center = [that.lng, that.lat]
                      that.markers.push([that.lng, that.lat])
                      // load
                      that.loaded = true
                      // 页面渲染好后
                      that.$nextTick()
                    }
                  })
                }
              }
            },
            { 
              // 工具栏
              pName: 'ToolBar',
              events: { 
                init(instance) { 
                  // console.log("工具栏:"+instance);
                }
              }
            },
            { 
              // 鹰眼
              pName: 'OverView',
              events: { 
                init(instance) { 
                  // console.log("鹰眼:"+instance);
                }
              }
            },
            { 
              // 地图类型
              pName: 'MapType',
              defaultType: 0,
              events: { 
                init(instance) { 
                  // console.log("地图类型:"+instance);
                }
              }
            },
            { 
              // 搜索
              pName: 'PlaceSearch',
              events: { 
                init(instance) { 
                  // console.log("搜索:"+instance)
                }
              }
            }
          ]
        }
      },
      components: {  SiteInformation },
      methods: { 
        // 初始化地图
        initMap() { 
          let that = this
          let map = that.amapManager.getMap()
          AMapUI.loadUI(['overlay/SimpleMarker'], function (SimpleMarker) { 
            that.initSimpleMarker(SimpleMarker, map, that.simpleMarkerData)
          })
        },
        // 初始化标注
        initSimpleMarker(SimpleMarker, map, simpleMarkerData) { 
          let that = this
          if (simpleMarkerData != null && simpleMarkerData.length > 0) { 
            simpleMarkerData.forEach(sm => { 
              // 创建实例
              let aMarker = new SimpleMarker({ 
                id: sm.id,
                // 附加数据
                extData: sm,
                // 开启点击
                clickable: true,
                // 前景文字
                iconLabel: { 
                  innerHTML: sm.name,
                  style: { 
                    color: '#fff'
                  }
                },
                // 图标主题 fresh/default
                iconTheme: 'fresh',
                // 背景图标样式
                iconStyle: { 
                  src: sm.icon,
                  style: { 
                    width: '60px',
                    height: '60px',
                    'border-radius': '50%',
                    border: '2px solid #fff',
                    'box-shadow': '10px 10px 5px #888888'
                  }
                },
                containerClassNames: 'myMarker',
                map: map,
                position: sm.position
              })
              // 添加点击事件
              aMarker.on
              // 绑定点击事件
              AMap.event.addListener(aMarker, 'click', function (
                e
              ) { 
                that.siteInformation.isShow = true
                that.siteInformation.data = e.target.getExtData()
              })
            })
          }
        }
      }
    }
    </script>
    
    <style lang="less" scoped>
    .map { 
      width: 100%;
      height: calc(100vh - 100px);
    
      .container { 
        width: 100%;
        height: 100%;
        position: relative;
      }
    }
    </style>

[https_blog.csdn.net_athwang_article_details_108236551]: https://blog.csdn.net/athwang/article/details/108236551
[https_lbs.amap.com_demo_amap-ui_demos_amapui-amaploader_amapui-amaploader1]: https://lbs.amap.com/demo/amap-ui/demos/amapui-amaploader/amapui-amaploader1
[https_developer.amap.com_api_amap-ui_reference-amap-ui_overlay_simplemarker]: https://developer.amap.com/api/amap-ui/reference-amap-ui/overlay/simplemarker
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70]: /images/20221005/d86513a941db43cc8cc7aa0ffee934aa.png
[https_www.cnblogs.com_xiaomg_articles_10432907.html]: https://www.cnblogs.com/xiaomg/articles/10432907.html
[https_blog.csdn.net_hangzhou728_article_details_111280566]: https://blog.csdn.net/hangzhou728/article/details/111280566