1、效果

2、創(chuàng)建地圖

本文用的是高德地圖
頁面

 <div class="map" id="map"></div>
                    <div id="mouse-position" class="position_coordinate"></div>

初始化地圖

     var gaodeLayer = new TileLayer({
          title: "高德地圖",
          source: new XYZ({
            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
            wrapX: false
          })
        });
        this.map = new Map({
          layers: [gaodeLayer],
          target: 'map',
          view: new View({
            center: transform([123.23, 25.73], 'EPSG:4326', 'EPSG:3857'), //地圖初始中心點(diǎn)
            projection: 'EPSG:3857',
            zoom: 4,
            minZoom: 1

          }),
        });

3、添加經(jīng)緯度

   var mousePositionControl = new MousePosition({
          coordinateFormat: function (coordinate) {
            return formatAxirs(coordinate, '經(jīng)度:{x} 緯度:{y}', 2);
          },
          projection: 'EPSG:4326',
          className: "custom-mouse-position",
          target: document.getElementById("mouse-position"), //將位置數(shù)據(jù)放到那里
          undefinedHTML: "",
        });
        this.map.addControl(mousePositionControl);

4、完整代碼

<script>
import { Map, View } from "ol";

    import TileLayer from 'ol/layer/Tile.js';

  import XYZ from 'ol/source/XYZ.js';
  import { get as getProjection, transform } from 'ol/proj.js';
    import MousePosition from "ol/control/MousePosition";
   import { format as formatAxirs } from 'ol/coordinate';
  export default {
    data() {
  return {
         map: null,
        draw: null,
      };
    },
    mounted() {
      this.initMap();

    },
      methods: {
     //初始化地圖
      initMap() {
        var gaodeMapLayer = new TileLayer({
          title: "高德地圖",
          source: new XYZ({
            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
            wrapX: false
          })
        });
        this.map = new Map({
          layers: [gaodeMapLayer],
          target: 'map',
          view: new View({
            center: transform([103.23, 35.33], 'EPSG:4326', 'EPSG:3857'), //地圖初始中心點(diǎn)
            projection: 'EPSG:3857',
            zoom: 4,
            minZoom: 1

          }),
        });

        // 獲取鼠標(biāo)在地圖的經(jīng)緯度
        var mousePositionControl = new MousePosition({
          coordinateFormat: function (coordinate) {
            return formatAxirs(coordinate, '經(jīng)度:{x} 緯度:{y}', 2);
          },
          projection: 'EPSG:4326',
          className: "custom-mouse-position",
          target: document.getElementById("mouse-position"), //將位置數(shù)據(jù)放到那里
          undefinedHTML: "",
        });
        this.map.addControl(mousePositionControl);
      },
}
}

附css代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-796688.html

  .position_coordinate {
    color: #6a6a6a;
    position: absolute;
    font-size: 14px;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    text-align: center;
    line-height: 30px;
  }

到了這里，關(guān)于Vue+OpenLayers 創(chuàng)建地圖并顯示鼠標(biāo)所在經(jīng)緯度的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！