263：vue+openlayers 高德地图坐标转换 WGS84-GCJ02

在Vue和OpenLayers中，要实现高德地图的WGS84-GCJ02坐标转换，你可以使用高德地图的API来进行转换。以下是一个简单的示例代码：

首先，确保你已经安装并导入了高德地图的JavaScript API库。

<!-- 在你的index.html或者相应的HTML文件中引入高德地图API -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_AMAP_KEY"></script>

然后，在你的Vue组件中，你可以使用OpenLayers的transform方法来转换坐标。

<template>
  <div id="map" class="map"></div>
</template>
 
<script>
export default {
  name: 'MapComponent',
  mounted() {
    // 初始化OpenLayers地图
    this.map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        center: [0, 0],
        zoom: 2
      })
    });
 
    // 假设你有一个WGS84坐标
    var wgs84Coordinate = [116.397428, 39.90923]; // 例如北京天安门的WGS84坐标
 
    // 使用高德地图的API转换坐标
    this.convertToGCJ02(wgs84Coordinate).then(gcj02Coordinate => {
      // 在这里处理转换后的GCJ02坐标
      console.log('GCJ02 Coordinate:', gcj02Coordinate);
    });
  },
  methods: {
    convertToGCJ02(wgs84Coordinate) {
      // 返回一个Promise，在转换完成后解决
      return new Promise((resolve, reject) => {
        // 使用高德地图的API进行坐标转换
        AMap.convertFrom(wgs84Coordinate, 'gps', function(status, result) {
          if (result.info === 'ok') {
            // 转换成功，result.locations是转换后的坐标
            resolve(result.locations);
          } else {
            // 转换失败，可以根据result.info进行错误处理
            reject(result.info);
          }
        });
      });
    }
  }
};
</script>
 
<style>
.map {
  width: 100%;
  height: 400px;
}
</style>

在上面的代码中，convertToGCJ02方法是一个Promise函数，它调用高德地图的API来转换WGS84坐标到GCJ02坐标。当转换完成后，它将通过Promise的resolve方法返回转换后的坐标。

请确保替换YOUR_AMAP_KEY为你的高德地图API的key，并确保你已经在高德地图开放平台注册并申请了API的使用权限。