基于vue利用openlayers加载天地图，高德地图

最新推荐文章于 2024-09-18 16:29:14 发布

~HT猫L~

最新推荐文章于 2024-09-18 16:29:14 发布

阅读量4.2k

点赞数 17

分类专栏： openlayers 文章标签： vue.js openlayers 天地图

本文链接：https://blog.csdn.net/weixin_44614518/article/details/121426038

版权

本文记录了一位开发者在使用Vue和OpenLayers加载天地图及高德地图过程中遇到的挑战。文章指出许多博客教程无法直接复制运行，并提供了详细步骤，包括获取天地图API key，安装OpenLayers，以及在Vue项目中实现地图显示。同时，作者分享了高德地图的简易集成方法，希望能帮助初级开发者解决问题。

摘要由CSDN通过智能技术生成

是得好好记录一下这个曲折的过程

在这里插入图片描述

看了n篇博客，没一个是代码复制过来能显示地图的。这对于0基础但是急需快速弄出个地图显示出来及其不友好！！

而且很多博客都是一样的，不知道那些直接去复制别人的博客过来的人是怎么想的，这么做有什么意义吗。

表示很无语，但是废话不多说，进入正题！

天地图部分

1、首先默认你会用vue了，然后去openlayers官网简单做个了解，知道基础用法。

2、加载天地图得有一个key，先去天地图官网搞一个，具体步骤看我的另一篇文章，说到这个也是没有几篇博客写得很清楚的，就很。。。无助。

3、在vue中安装openlayers

npm i --save ol

这里说的vue是基于脚手架构建的。新建个页面，也就是vue文件，配置好路由。接着就是可以直接放入我的代码运行显示了。

<template>
  <div class="wrapper">
    <div>天地图</div>
    <div class="map" id="olMap"></div>
  </div>
</template>
<script>
import "ol/ol.css";
import {
    Tile as TileLayer } from "ol/layer";
import XYZ from "ol/source/XYZ";
import {
    defaults as defaultControls } from "ol/control";
import Map from "ol/Map.js";
import View from "ol/View.js";

export default {
   
  data() {
   
    return {
   
      map: null,
      parser: null,
    };
  },
  mounted() {
   
    this.initMap();
  },
  methods: {
   
    initMap() {
   
      const map = new Map