使用Vue和OpenLayers添加标记（Marker）的组件

最新推荐文章于 2025-04-24 14:33:19 发布
最新推荐文章于 2025-04-24 14:33:19 发布
阅读量467 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/TechNovaX/article/details/132946182
js 专栏收录该内容
499 篇文章 ¥59.90 ¥99.00
订阅专栏
本文介绍如何在Vue项目中利用OpenLayers库创建地图组件并添加标记。通过创建Vue项目，安装OpenLayers，定义地图组件，实现添加标记的方法，以及在父组件中使用该组件，详细阐述了实现过程。示例代码展示了如何在地图上添加标记，并提供了运行项目的步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在本篇文章中，我们将探讨如何使用Vue和OpenLayers来添加标记（Marker）到地图上的组件。我们将使用Vue作为JavaScript框架，并结合OpenLayers库来实现地图功能。下面是一个详细的步骤指南，包含相应的源代码。

步骤1：创建Vue项目
首先，我们需要创建一个Vue项目。打开终端并执行以下命令：

vue create marker-app

然后按照提示选择适合你的配置选项。完成后，进入项目目录：

cd marker-app

步骤2：安装OpenLayers
接下来，我们需要安装OpenLayers库。在终端中运行以下命令：

npm install ol

步骤3：创建地图组件
在Vue项目中创建一个名为Map.vue的组件，并在其中添加以下代码：


                

                
                
        

    

    
  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
            

        


    



                



	

		

			

				
					
openlayers地图离线开发demo-添加marker

				
			

			

				

					oliver666666的博客
				

				

					12-01
					
					754
					
				

			

		

		

			
				
openlayers离线地图开发

			
		

	



                

            
              



	

		

			

				
					
105：vue+openlayers 引用组件来添加marker （示例代码）

				
			

			

				

					大剑师兰特的GIS世界
				

				

					08-30
					
					847
					
				

			

		

		

			
				
本示例的目的是介绍演示如何在vue+openlayers中调用ol-marker-feature控件，来添加marker。

			
		

	



              


  
              

                


	

		

			

				
					
openlayers实现本地图片作为背景，添加marker标记

				
			

			

				

					06-09
				

			

		

		

			
				
刚刚使用openlayers做了一个简单的小例子，注释很全，很简单，将本地的图片作为背景，能够按照坐标添加任意个标记

			
		

	





	

		

			

				
					
OpenLayers-添加Marker

				
			

			

				

					
				

				

					10-30
					
					6089
					
				

			

		

		

			
				
在OpenLayers Map添加Marker。
1.创建Marker图层
Maker由Marker图层进行管理

var marker_layer = new OpenLayers.Layer.Markers("markers");

2. 创建Marker对象


 1 //创建Marker 位置
 2 var pos = new new OpenLayers.LonLat

			
		

	



		

			
		



	

		

			

				
					
主脏canvas双图层实现图片查看组件【流畅、附源码】（支持标注、缩放、拖拽，修改，删除，拖拽移动，修改框框大小）后续优化中

					
最新发布

				
			

			

				

					前端开发工程师
				

				

					04-24
					
					1065
					
				

			

		

		

			
				
在工业质检领域的智能化转型浪潮中，面临一个典型的可视化需求场景：通过计算机视觉算法检测出产品表面瑕疵后，需要在前端界面高精度还原检测结果，实现瑕疵位置的可视化标注与交互式查验。

			
		

	





	

		

			

				
					
100.Vue3 + OpenLayers：使用 marker-feature 添加 Marker

				
			

			

				

					小彭的博客
				

				

					03-12
					
					735
					
				

			

		

		

			
				
是一个强大的开源地图库，可以帮助开发者快速构建 Web 地图应用。本文将详细介绍如何在。（OpenStreetMap）底图，并在。端口），你应该可以看到地图，以及点击。这样，你的 优快云 文章就完成了！在前端 GIS（地理信息系统）开发中，：OpenLayers 默认使用。就会出现在指定经纬度的位置。项目还没有创建，可以使用。投影，因此如果你的坐标是。发生此错误，可以使用。，请确保所有数据一致。

			
		

	





	

		

			

				
					
Vue.js 和 OpenLayers：使用组件添加标记

				
			

			

				

					CodeWhizZ的博客
				

				

					08-31
					
					211
					
				

			

		

		

			
				
结合这两个工具，我们可以创建一个灵活且易于使用的地图应用程序，并使用组件来添加标记。本文将介绍如何使用 Vue.js 和 OpenLayers 创建一个简单的地图应用程序，并使用组件来添加标记。然后，我们创建了一个标记对象和一个标记图层，并将标记添加到地图上。本文提供了一个简单的示例，演示了如何使用 Vue.js 和 OpenLayers 创建一个地图应用程序，并使用组件来添加标记。请注意，我们在这里使用了一个名为 marker.png 的图标文件作为标记的图标。你将看到一个带有一个标记的地图。

			
		

	





	

		

			

				
					
vue+openlayers简单示例

				
			

			

				

					10-19
				

			

		

		

			
				
例如，你可以创建一个名为`Marker.vue`的新组件，用于在地图上添加可拖动的标记。这需要监听鼠标事件，更新标记的位置，并反映在Vue的数据模型上。同时，你还可以创建自定义的图层组件，以便加载自定义的数据格式，...

			
		

	





	

		

			

				
					
openlayers在地图上添加maker

				
			

			

				

					冰雪为融的博客
				

				

					08-07
					
					1129
					
				

			

		

		

			
				
如下图所示，点击地图的时候，显示一个小红点





初始化一个图层


function initMaker() {

makerLayer = new ol.layer.Vector({

source: null,

style: null,

zIndex: 11

})

map.addLayer(makerLayer)

}

点击地图的时候添加


map.on('click', function(e) {

/...

			
		

	





	

		

			

				
					
OpenLayers3.x使用features集群实现同一markers层添加多marker标记

				
			

			

				

					YZero_cn的博客
				

				

					09-20
					
					1922
					
				

			

		

		

			
				
目录



前言

需要实现的目标

1.需求

2.问题复现

3.解决方法

4.项目适配

结尾

前言

openlayers从2.x到3.x的大版本更新中代码风格有非常大的变化，之后的版本变化均不大，建议找案例时注意版本区别，将2.x的代码改造成在3.x及以后版本可用的程度，要求对openlayers和js都有比较高的掌握。如果只需要即学即用，最好找同版本的代码。

本文中用到的代码，别人的一部分已经标注了链接地址，我写的一部分先上传至csdn：，等我学会了怎么在服务器建资源站，...

			
		

	





	

		

			

				
					
openlayers-map-marker:使用openlayers地图创建标记。 带有弹出窗口，地图多边形，地图事件的地图标记

				
			

			

				

					05-24
				

			

		

		

			
				
具有Openlayers 6.3的地图标记
使用openlayers地图创建标记，使用弹出窗口创建简单的地图标记。
地图html 
 < head >
	< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css " type =" text/css " >
	< script src =" https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js " > </ script >
	< link href =" map.css " rel =" stylesheet " >
	< scri

			
		

	





	

		

			

				
					
Openlayer 添加一个Mark标签

				
			

			

				

					西柚2015地信小白GISer
				

				

					01-19
					
					1152
					
				

			

		

		

			
				
主要思路就是在地图上添加一个点，设置这个点的样式为一个Icon图片


var vectorSource = new VectorSource();//新建矢量图层

//WKT转Feature之前有文章写到
let wkt = "Point(11584213.17 3588634.87)";
let format = new WKT();
//获取wkt要素
let feature = format.readFeature(wkt);
//新建图标样式
var iconStyle = new Style(

			
		

	





	

		

			

				
					
openlayers vector marker

				
			

			

				

					freellf的专栏
				

				

					11-16
					
					490
					
				

			

		

		

			
				
http://stackoverflow.com/questions/9895951/how-to-display-multiple-markers-with-individual-framecloud-popups-in-openlayers

			
		

	





	

		

			

				
					
openlayers加载瓦片地图并手动标记坐标点

				
			

			

				

					qq_38196449的博客
				

				

					04-28
					
					996
					
				

			

		

		

			
				
这里面有个注释掉的方法，读者可以打开试试，其实就是标记的时候打印经纬度，一般这个值我们都用来存储数据库中。将ol.js、ol.css放在根目录下，当然还有你的瓦片地图也放在根目录下。创建一个项目，普通原生前端项目就行。marker.png是标记坐标点的。

			
		

	





	

		

			

				
					
vue+div.canvas图像标注功能实现

				
			

			

				

					tangdou369098655的博客
				

				

					09-15
					
					9206
					
				

			

		

		

			
				
main.js
import Vue from 'vue'
import 'vueui-widgets/dist/index.css'
import VueUI from 'vueui-widgets'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.use(...

			
		

	





	

		

			

				
					
vue下利用canvas实现在线图片标注

				
			

			

				

					qq_38223135的博客
				

				

					06-13
					
					6082
					
				

			

		

		

			
				
web端实现在线图片标注在此做下记录，功能类似微信截图时的标注，包含画线、框、箭头和文字输入，思路是利用canvas画布，先把要标注的图片使用drawImage方法画在画布上，然后定义画线、框、箭头和文字输入的方法调用，组件代码如下：


<template>
  <div class="draw">
    <div class="drawTop" ref="drawTop" v-if="lineStep == lineNum">
      <div...

			
		

	





	

		

			

				
					
vue实现图片框选标注

				
			

			

				

					qq_39352780的博客
				

				

					03-11
					
					3317
					
				

			

		

		

			
				
前端有一个需求，对上传的图片进行检测识别，通过返回的接口坐标数据，对图片的某些区域进行框选并标注。

			
		

	





	

		

			

				
					
便利贴--7{OpenLayers,vue项目1，添加地图的路径和标点数据}

				
			

			

				

					hacker12356的博客
				

				

					01-12
					
					891
					
				

			

		

		

			
				
便利贴--7{OpenLayers,vue项目1，添加地图的路径和标点数据}

			
		

	





	

		

			

				
					
vue2 openlayers 点击标记

				
			

			

				

					04-05
				

			

		

		

			
				
要在Vue2中使用OpenLayers点击标记，可以按照以下步骤操作：  1. 安装OpenLayers：使用npm或yarn安装OpenLayers。  2. 导入OpenLayers：在Vue组件中导入OpenLayers。  ``` import ol from 'openlayers'; ```  3. ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值