百度地图JavaScript API GL获取经纬度,标记,添加文本标注,点击事件,封装

百度地图JavaScript API GL常用方法封装

在这里插入图片描述

引入百度js库

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=自己的百度应用ak"></script>

封装方法

<template><div class="map"><div id="container" class="container"></div></div>
</template>
<script>
export default {data() {return {map:null,}},props: {position: {//初始位置type: Object,default: () => {return { lng: 116.40334547586404, lat: 39.92386800168819 };}},firingLngLat:{//启用鼠标监听type:Boolean,default:false}},mounted(){this.init()},methods:{init(){this.map = new BMapGL.Map('container'); this.map.enableScrollWheelZoom(); // 启用滚轮放大缩小var point = new BMapGL.Point(this.position.lng,this.position.lat); // 改变坐标居中位置this.map.centerAndZoom(point, 10);if(this.firingLngLat){this.getLngLat()}},getMap(items){//接受的数组类型,点击标记点,返回对应的数据     基础数据=>[{longitude:经度,latitude:维度,name:标记名}]// console.log(items);let data = itemsthis.charMap()if(data.length){items.forEach((item,idnex) => {var point = new BMapGL.Point(item.longitude,item.latitude); // 创建点坐标this.map.centerAndZoom(point, 15);let img = require("@/assets/images/yard.png")var myIcon = new BMapGL.Icon(img, new BMapGL.Size(56, 56), {    imageOffset: new BMapGL.Size(0, 0 )   // 设置图片偏移   });     // 创建标注对象并添加到地图  var marker = new BMapGL.Marker(point, {icon: myIcon});   this.map.addOverlay(marker); //添加文字车牌提示var optsName = {position: new BMapGL.Point(item.longitude ,item.latitude), // 指定文本标注所在的地理位置offset: new BMapGL.Size(-40, -50) // 设置文本偏移量};// 创建文本标注对象var label = new BMapGL.Label(item.name , optsName);// 自定义文本标注样式label.setStyle({color: 'blue',borderColor: '#ccc',fontSize: '16px',height: '30px',lineHeight: '30px',fontFamily: '微软雅黑'});this.map.addOverlay(label);marker.addEventListener("click", ()=>{this.$emit('click',item)})});}},charMap(){//删除所有的标记点//获取地图上所有的覆盖物var allOverlay = this.map.getOverlays();for(var i = 0;i<allOverlay.length;i++) {if(allOverlay[i].toString()){// console.log(allOverlay[i]);this.map.removeOverlay(allOverlay[i]);}}},getLngLat(){//获取鼠标点击后的经纬度,并标记 注:只有firingLngLat 为true,该监听方法才能生效this.charMap() this.map.addEventListener('click',  (e)=> {// alert('点击位置经纬度:' + e.latlng.lng + ',' + e.latlng.lat);// console.log('点击位置经纬度:' + e.latlng.lng + ',' + e.latlng.lat);let mapll = {lng:e.latlng.lng,lat:e.latlng.lat}this.$emit("change",mapll)let data =[{name:"标记点位置",longitude:e.latlng.lng,latitude:e.latlng.lat}]this.getMap(data)})},}
}
</script>
<style lang="stylus" scoped>
.mapwidth 100%height 100%border: 1px solid #cccccc99.containerwidth 100%height 100%
</style>

使用方式

//div使用
<my-map  :position="position" @click="myMapClick"   @change="getPostion" :firingLngLat="true"   ref="maps" ></my-map>//引入上方封装的路径
import myMap from "@/components/map/maps";
components: { myMap},//参数及方法说明
position:{//默认经纬度lng:0,lat:0,
},
myMapClick(item){},//点击标注获取标注信息
getPostion(item){},//点击地图获取点击位置,firingLngLat=treu,该方法才执行this.$refs.maps.getMap([{longitude:经度,latitude:维度,name:标记名}]),//回显,接受的是一个数组

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/236166.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flink(八)【窗口】

前言 终于忙完了四门专业课的期末&#xff0c;确实挺累啊。今天开始继续学习 Flink &#xff0c;接着上次的内容。 今日摘录&#xff1a; 他觉得一个人奋斗更轻松自在。跟没有干劲的人在一起厮混&#xff0c;只会徒增压力。 -《解忧杂货店》 1、窗口 之前我们已经了解了…

Redis7--基础篇4(Redis事务)

Redis事务是什么 可以一次执行多个命令&#xff0c;本质是一组命令的集合&#xff0c;一个事务中的所有命令都会序列化&#xff0c;按顺序串行&#xff0c;而不会被其他命令插入。 其作用就是在一个队列中&#xff0c;一次性、顺序、排他的执行一系列命令。 Redis事务 VS 数据…

TZOJ 1387 人见人爱A+B

答案&#xff1a; #include <stdio.h> void time(int ah, int am, int as, int bh, int bm, int bs, int* sum_h, int* sum_m, int* sum_s) //不需要返回值所以定义void函数&#xff0c;前面6个为输入&#xff0c;然后用指针存给后面三个 {*sum_s (as bs) % 60; …

无人机助力电力设备螺母缺销智能检测识别,python基于YOLOv7开发构建电力设备螺母缺销高分辨率图像小目标检测系统

传统作业场景下电力设备的运维和维护都是人工来完成的&#xff0c;随着现代技术科技手段的不断发展&#xff0c;基于无人机航拍飞行的自动智能化电力设备问题检测成为了一种可行的手段&#xff0c;本文的核心内容就是基于YOLOv7来开发构建电力设备螺母缺销检测识别系统&#xf…

Linux 系统渗透提权-Server2204

B-3:Linux 系统渗透提权 任务环境说明: 服务器场景:Server2204(关闭链接) 用户名:hacker 密码:123456 1.使用渗透机对服务器信息收集,并将服务器中 SSH 服务端口号作为 flag 提 交; Flag:2283/tcp

Azure Machine Learning - 在 Azure 门户中创建演示应用

目录 准备环境启动向导配置搜索结果添加自动提示功能添加建议创建、下载和执行清理资源 使用 Azure 门户的“创建演示应用”向导来生成可下载的“localhost”样式的 Web 应用&#xff0c;该应用在浏览器中运行。 根据其配置&#xff0c;生成的应用在首次使用时就能正常运行&…

Wireshark之Intro, HTTP, DNS

源码地址&#x1f447; moranzcw/Computer-Networking-A-Top-Down-Approach-NOTES: 《计算机网络&#xff0d;自顶向下方法(原书第6版)》编程作业&#xff0c;Wireshark实验文档的翻译和解答。 (github.com) 目录 &#x1f33c;Introduce &#x1f3a7;前置 &#x1f3a7;过…

HTML—列表、表格、表单

1、列表 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表 1.1 无序列表 作用&#xff1a;布局排列整齐的不需要规定顺序的区域 标签&#xff1a;ul 嵌套 li&#xff0c;ul 是无序列表&#xff0c;li 是列表条目 注意事项&#…

Vue中 env 文件是如何读取的? 优先级?

Vue中 env 文件是如何读取的&#xff1f; 优先级&#xff1f; start 今天来研究一下 Vue 中 env 是如何读取的。跟着我的脚步来学习一下吧。作者&#xff1a;番茄&#xff1b;编写时间&#xff1a;2023/11/30 前情提要 env&#xff0c;使用方式是process.env。简单来说&…

redis相关题

1 什么是Redis Redis(Remote Dictionary Server) 是⼀个使⽤ C 语⾔编写的&#xff0c;开源的&#xff08;BSD许可&#xff09;⾼性能⾮关系型&#xff08;NoSQL&#xff09;的键值对数据库。Redis 可以存储键和五种不同类型的值之间的映射。键的类型只能为字符串&#xff0c;…

vue3随机生成8位字母+数字

// 随机生成8位字母数字 export const autoPassword: any () > {// console.log("自动生成");//可获取的字符串const chars ABCDEFGHIJKLMNOPQRSTUVWSYZabcdefghijklmnopqrstuvwsyz0123456789;const list [];//通过随机获取八个字符串的索引下标for (let i 0;…

阅读文献总结2023

阅读文献基于卷积神经网络多源融合的网络安全态势感知模型 阅读文献 基于卷积神经网络多源融合的网络安全态势感知模型 题目基于卷积神经网络多源融合的网络安全态势感知模型文章信息&#xff1a;年份2023发文单位山西财经大学收录刊会计算机科学 &#xff08;北大核心&#…