vue如何使用原生高德地图你知道吗

当使用Vue框架并且需要在应用中使用高德地图时，可以通过以下步骤来使用原生高德地图:

步骤 1: 引入高德地图 JavaScript API

首先，在Vue项目中引入高德地图 JavaScript API，可以参照以下方式：

<script type="text/javascript" src="//webapi.amap.com/maps?v=1.4.15&key=YOURKEY"></script>

其中，YOURKEY 是在高德开发者中心中创建应用时生成的一个密钥。

步骤 2: 创建地图实例

创建一个地图实例需要指定一个容器和地图的配置项。可以参照以下代码：

<template>
  <div id="map" />
</template>

<script>
export default {
  mounted () {
    const map = new window.AMap.Map('map', {
      center: [116.397428, 39.90923],
      zoom: 13
    })
  }
}
</script>

<style lang="css" scoped>
#map {
  height: 400px;
}
</style>

在上述示例中，new AMap.Map 创建了一个地图实例，并将其添加到页面上的一个 div 元素中，该 div 元素的 id 是 map。

步骤 3: 在地图上添加标记

要在地图上添加标记，可以使用 AMap.Marker 类，如下所示：

<template>
  <div id="map" />
</template>

<script>
export default {
  mounted () {
    const map = new window.AMap.Map('map', {
      center: [116.397428, 39.90923],
      zoom: 13
    })
    const marker = new window.AMap.Marker({
      position: [116.397428, 39.90923],
      map: map
    })
  }
}
</script>

<style lang="css" scoped>
#map {
  height: 400px;
}
</style>

在上述示例中，new AMap.Marker 创建了一个标记，并将其添加到地图实例中。

步骤 4: 在地图上添加信息窗口

要在地图上添加信息窗口，可以使用 AMap.InfoWindow 类，如下所示：

<template>
  <div id="map" />
</template>

<script>
export default {
  mounted () {
    const map = new window.AMap.Map('map', {
      center: [116.397428, 39.90923],
      zoom: 13
    })
    const marker = new window.AMap.Marker({
      position: [116.397428, 39.90923],
      map: map
    })
    const infoWindow = new window.AMap.InfoWindow({
      content: '这是一个信息窗口',
      offset: new window.AMap.Pixel(0, -30)
    })
    marker.on('click', function () {
      infoWindow.open(map, marker.getPosition())
    })
  }
}
</script>

<style lang="css" scoped>
#map {
  height: 400px;
}
</style>

在上述示例中，new AMap.InfoWindow 创建了一个信息窗口，并通过 marker.on 事件监听器将其绑定到标记上。

通过以上步骤，就可以在Vue应用中使用原生高德地图了。