vue-quasar引入高德地图及如何添加点标记

一.前提

1. 首先，注册开发者账号，成为高德开放平台开发者

2. 登陆之后，在进入「应用管理」 页面「创建新应用」

3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI )」

二.步骤

在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；

[HTML](javascript:void(0);)

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

2. 添加div标签作为地图容器，同时为该div指定id属性；

[HTML](javascript:void(0);)

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

3. 为地图容器指定高度、宽度；

[CSS](javascript:void(0);)

#container {width:300px; height: 180px; }  

4. 进行移动端开发时，请在head内添加viewport设置，以达到最佳的绘制性能；

[HTML](javascript:void(0);)

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 

三.示例

1.vue中引入地图

npm install vue-amap --save 或是 yarn add vue-amap --save

2.在index.template.html中添加：

   <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=647eb0d442857cca8463994de130a5f6&plugin=AMap.Driving"></script>

3.在vue单页面中创建一个div，

  <div id="container" class="full-width window-height"></div>

4.script内容

<script>
mounted () {
    this.$nextTick(function () {
      this.mapGet()
    })
  },
 methods: {
  mapGet (data) {
    var map = new window.AMap.Map('container', {
        resizeEnable: true,
        zoom: 11,
        showIndoorMap: false, // 是否在有矢量底图的时候自动展示室内地图，PC默认true,移动端默认false
        dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
        keyboardEnable: false, // 地图是否可通过键盘控制，默认为true
        doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
        zoomEnable: true, // 地图是否可缩放，默认值为true
        rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false
        viewMode: '3D'
      })
     console.log(map)
     window.AMap.plugin('AMap.Geolocation', function () {
     var geolocation = new window.AMap.Geolocation({
        // 是否使用高精度定位，默认：true
        enableHighAccuracy: true,
        // 设置定位超时时间，默认：无穷大
        timeout: 10000,
        // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
        buttonOffset: new window.AMap.Pixel(10, 20),
        //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        zoomToAccuracy: true,
        //  定位按钮的排放位置,  RB表示右下
        buttonPosition: 'RB'
      })

      geolocation.getCurrentPosition()
      window.AMap.event.addListener(geolocation, 'complete', onComplete)
      window.AMap.event.addListener(geolocation, 'error', onError)

    function onComplete (data) {
      // data是具体的定位信息
    }

    function onError (data) {
      // 定位出错
    }
  })
  // 点标记:
  // 创建一个 Icon
  var Icon = new window.AMap.Icon({
    // 图标尺寸
    size: new window.AMap.Size(42, 42),
    // 图标的取图地址
    // image: ' url(//at.alicdn.com/t/font_2017354_e8snexl0lea.svg#iconfont) format(svg)',
    image: '../../../statics/img/shop.svg',
    // 图标所用图片大小
    imageSize: new window.AMap.Size(145, 45),
    // 图标取图偏移量
    imageOffset: new window.AMap.Pixel(-9, -3)
  })
  var Icon1 = new window.AMap.Icon({
    // 图标尺寸
    size: new window.AMap.Size(42, 42),
    // 图标的取图地址
    // image: ' url(//at.alicdn.com/t/font_2017354_e8snexl0lea.svg#iconfont) format(svg)',
    image: '../../../statics/img/warning.svg',
    // 图标所用图片大小,根据所设置的大小拉伸或压缩图片
    imageSize: new window.AMap.Size(138, 45),
    // 图标取图偏移量
    imageOffset: new window.AMap.Pixel(-9, -3)
    // 图像相对展示区域的偏移量
  })

  // 将 icon 传入 marker
  var Marker = new window.AMap.Marker({
    position: new window.AMap.LngLat(120.551865, 31.297238),
    // 基点位置
    icon: Icon,
    offset: new window.AMap.Pixel(-13, -30)
    // 相对于基点的偏移位置
  })
  var Marker1 = new window.AMap.Marker({
    position: new window.AMap.LngLat(120.537309, 31.283473),
    icon: Icon,
    offset: new window.AMap.Pixel(-13, -30)
  })
  var Marker2 = new window.AMap.Marker({
    position: new window.AMap.LngLat(120.559067, 31.291211),
    icon: Icon1,
    offset: new window.AMap.Pixel(-13, -30)
  })
  // 将 markers 添加到地图
  // map.add([Marker])
  var markerList = [Marker, Marker1, Marker2]
  map.add(markerList)
  // 设置鼠标划过点标记显示的文字提示
  Marker.setTitle('零售店-1')
  // 设置label标签
  // label默认蓝框白底左上角显示，样式className为：amap-marker-label
  Marker.setLabel({
    offset: new window.AMap.Pixel(0, 0),
    // 设置文本标注偏移量
    content: "<div class='info'>零售店-1</div>",
    // 设置文本标注内容
    direction: 'right'
    // 设置文本标注方位
  })
  // 设置鼠标划过点标记显示的文字提示
  Marker1.setTitle('零售店-1')
  // 设置label标签
  // label默认蓝框白底左上角显示，样式className为：amap-marker-label
  Marker1.setLabel({
    offset: new window.AMap.Pixel(0, 0),
    // 设置文本标注偏移量
    content: "<div class='info'>零售店-1</div>",
    // 设置文本标注内容
    direction: 'right'
    // 设置文本标注方位
  })
  // 设置鼠标划过点标记显示的文字提示
  Marker2.setTitle('风险警报')
  // 设置label标签
  // label默认蓝框白底左上角显示，样式className为：amap-marker-label
  Marker2.setLabel({
    offset: new window.AMap.Pixel(10, 0),
    // 设置文本标注偏移量
    content: "<div class='infos'>风险警报</div>",
    // 设置文本标注内容
    direction: 'left'
    // 设置文本标注方位
  })
  var that = this
  Marker.on('click', function () {
    that.ShowOption = true
   })
    // 点击点标注出现弹出框
   }
  }
}
</script>

弹出框没写