vue:(一) 使用高德地图

最新推荐文章于 2024-07-16 16:09:32 发布

小强有个dream

最新推荐文章于 2024-07-16 16:09:32 发布

阅读量330

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_36413371/article/details/102401873

版权

vue 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

2.在vue中的配置

 'AMap' is not defined // 在vue中eslint会报错，所以需要先配置下webpack

Vue-cli2.x项目配置

// build目录下有webpack.base.conf.js配置文件，添加下面的字段
 externals: {
    swiper: 'Swiper',
    AMap: 'AMap', // 引入地图对象，引入后 new AMap() 才不会报错
  },

Vue-cli3.X项目配置

// 在项目根目录下创建 vue.config.js文件
module.exports = {
  configureWebpack: {
    externals: {
      AMap: "AMap",
      Loca: "Loca",
      AMapUI: "AMapUI"
    }
  }
};

然后在文件中， import AMap from ‘AMap’ 引入使用
或者直接使用这个官方插件 vue-amap

// 实现了中心点及缩放级别设置。覆盖物的自定义图标的偏移量。

移动端点击闪烁的问题

// 在被点击的元素设置css:-webkit-tap-highlight-color:transparent; (去掉点击高亮)
坐标拾取

// 第一个是腾讯的，第二个是高德的。两个地图的图标是不一样的
高德地图开发 – 地图JS API – 示例中心 (不懂参数的话看参考手册)

// 看到右侧的运行，是不是感觉简单的像个一似的。（百度地图也有示例中心哦，也是在开放平台）


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>地图显示</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
      }
      #container {
        position: relative;
        width: 1620px;
        height: 780px;
      }
      /* 标记点 */
      .icon-wrapper {
        font-size: 0;
        display: flex;
        align-items: center;
      }
      .icon-wrapper img {
        width: 41px;
        height: 56px;
        display: inline-block;
        vertical-align: middle;
      }
      .icon-wrapper span {
        vertical-align: middle;
        display: inline-block;
        padding: 3.5px 14px;
        color: #fff;
        font-size: 14px;
        background-color: #d81e06;
        border-radius: 26px;
      }
      /* 去掉高德logo */
      .amap-copyright,
      .amap-logo {
        display: none !important;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <!-- 一：初始化地图---0图层 -->
    <script src="http://webapi.amap.com/maps?v=1.4.7&key=81e620db64d30deb3028e685b91696b3"></script>
    <script>
      var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 16 //初始化地图层级
      })
      // 二:使用插件（异步多个）：通过AMap.plugin方法按需引入插件----3控件
      // 缩放插件
      AMap.plugin(['AMap.ToolBar'], function() {
        var toolbar = new AMap.ToolBar({
          liteStyle: true
        })
        map.addControl(toolbar)
      })
      // 三：实例化标记点
      var markers = [],
        marker1,
        marker2,
        marker3
      addMarker()
      function addMarker() {
        var location =
          'http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
        // 标记点一--（点覆盖物 new AMap.Marker创建）
        marker1 = new AMap.Marker({
          position: [108.789408, 29.523336], // 简写
          offset: new AMap.Pixel(-20, -130), // 像素点
          content: `
          <div class="custom-content-marker" id="marker1">
            <div class="icon-wrapper">
              <img class="icon" src="${location}">
              <span class="text">城东支行</span>
            </div>
          </div>`, // content 属性取值为用户自定义的 DOM 节点或者 DOM 节点的 HTML 片段
          extData: {
            id: 0
          } // 利用 extData 属性给覆盖物添加 id，获取特定的覆盖物。
        })
        marker1.setMap(map) // 添加或删除图层setMap(null)
        markers.push(marker1)
        // 标记点二
        marker2 = new AMap.Marker({
          position: [108.77236, 29.530634],
          offset: new AMap.Pixel(-20, -130),
          content: `
          <div class="custom-content-marker" id="marker2">
            <div class="icon-wrapper">
              <img class="icon" src="${location}">
              <span class="text">黔江分行</span>
            </div>
          </div>`,
          extData: {
            id: 1
          }
        })
        marker2.setMap(map)
        markers.push(marker2)
        // 标记点三：
        marker3 = new AMap.Marker({
          position: [108.787026, 29.521603],
          offset: new AMap.Pixel(-20, -130),
          content: `
          <div class="custom-content-marker" id="marker3">
            <div class="icon-wrapper">
              <img class="icon" src="${location}">
              <span class="text">金三角自助银行</span>
            </div>
            </div>`,
          extData: {
            id: 3
          }
        })
        marker3.setMap(map)
        markers.push(marker3)
      }
      // 四 ： 创建并添加覆盖物群组，并将 marker 传给 OverlayGroup
      var overlayGroups = new AMap.OverlayGroup(markers)
      map.add(overlayGroups)
      // 五：设置平移地图中心点及缩放级别（还有平移的方式）
      map.setZoomAndCenter(16, [108.789408, 29.523336])
      // map.setZoom(16)
      // map.panTo([108.789408, 29.523336])
      setTimeout(function() {
        document.getElementById('marker1').onclick = function(e) {
          e.stopPropagation()
          console.log('点击了marker0标记点')
        }
      }, 1000)
    </script>
  </body>
</html>