vue2使用高德地图案例

以下是一个简单的 Vue2 使用高德地图的示例：

1. 安装高德地图 JavaScript API

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=你的高德地图 API Key"></script>

2. 在 Vue 组件中引入高德地图 JavaScript API

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

<script>
export default {
  mounted() {
    // 创建地图
    const map = new AMap.Map('map', {
      zoom: 10,
      center: [116.397428, 39.90923]
    });
  }
};
</script>

<style>
#map {
  width: 100%;
  height: 600px;
}
</style>

3. 添加控件和标记

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

<script>
export default {
  mounted() {
    // 创建地图
    const map = new AMap.Map('map', {
      zoom: 10,
      center: [116.397428, 39.90923]
    });

    // 添加缩放控件
    map.addControl(new AMap.Scale());

    // 添加标记
    const marker = new AMap.Marker({
      position: [116.397428, 39.90923],
      title: '北京市'
    });
    marker.setMap(map);
  }
};
</script>

<style>
#map {
  width: 100%;
  height: 600px;
}
</style>

以上是一个简单的 Vue2 使用高德地图的示例，更多高级功能请参考高德地图 JavaScript API 文档。