vue+高德,百度地图

1,npm安装vue-amap
npm install vue-amap --save
2,main.js引入

import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({key: '',plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation', 'AMap.Geocoder'],
});
html页面引入
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=****"></script>
<script src="//webapi.amap.com/maps?v=1.4.15&key=****&&plugin=AMap.MarkerClusterer,AMap.Autocomplete,AMap.MapType,AMap.PolyEditor,AMap.MouseTool,AMap.AdvancedInfoWindow,AMap.Scale,AMap.ToolBar,AMap.RangingTool,Geocoder"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.4.11"></script>

3,amap.js 定位

export const location =  {initMap(id){let mapObj = new AMap.Map(id, {})let geolocation;mapObj.plugin(['AMap.Geolocation'], function () {geolocation = new AMap.Geolocation({enableHighAccuracy: true, //  是否使用高精度定位,默认:truetimeout: 10000, //  超过10秒后停止定位,默认:无穷大maximumAge: 0, // 定位结果缓存0毫秒,默认:0convert: true, // 自动偏移坐标,偏移后的坐标为高德坐标,默认:trueshowButton: true, //  显示定位按钮,默认:truebuttonPosition: 'LB',  // 定位按钮停靠位置,默认:'LB',左下角buttonOffset: new AMap.Pixel(10, 20), //  定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)showMarker: true, //  定位成功后在定位到的位置显示点标记,默认:trueshowCircle: true, //  定位成功后用圆圈表示定位精度范围,默认:truepanToLocation: true,  //  定位成功后将定位到的位置作为地图中心点,默认:truezoomToAccuracy: true  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false})mapObj.addControl(geolocation)geolocation.getCurrentPosition()})return geolocation;}
}

4,使用

import { location } from "@/utils/amap";
两种方式
let geolocation = location.initMap("map-container"); //定位AMap.event.addListener(geolocation, "complete", (result) => {if (result) {//地址 console.log(result)}
});
----
AMap.plugin("AMap.Geolocation", function () {var geolocation = new AMap.Geolocation({enableHighAccuracy: true,timeout: 10000,});// 获取位置信息geolocation.getCurrentPosition((status, result) => {if (result && result.position) {}
})

百度地图


## 获取经纬度写法:let ak = '****'
/*** 异步加载百度地图* @returns {Promise}* @constructor*/
function loadBaiDuMap() {return new Promise(function (resolve, reject) {try {// console.log("BMap is defined:", BMapGL === undefined || BMapGL);resolve(BMapGL);} catch (err) {window.init = function () {resolve(BMapGL);};let script = document.createElement("script");script.type = "text/javascript";script.src = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`;script.onerror = reject;document.body.appendChild(script);}});
}
export { loadBaiDuMap };
//通过地址转换为经纬度,注意这里必须传入city,也就是市
function getPoint(city, address) {let result = loadBaiDuMap().then((BMapGL) => {return new Promise(function (resolve, reject) {//创建地址解析器实例let res = "没有查询到经纬度";if (!city) {res = "商户记录属于哪个城市未知";reject(res);}var myGeo = new BMapGL.Geocoder();// 将地址解析结果显示在地图上,并调整地图视野myGeo.getPoint(address,function (point) {if (point) {console.log(point, "point");resolve(point);} else {reject(res);}},city);});});return result;
}export { getPoint };
//定位,获取当前的地理位置
function getLocationInfo() {let result = loadBaiDuMap().then((BMapGL) => {return new Promise(function (resolve, reject) {// 创建地图实例let geolocation = new BMapGL.Geolocation(); // 创建百度地理位置实例,代替 navigator.geolocationgeolocation.getCurrentPosition(function (e) {// console.log(e, "e");if (this.getStatus() == BMAP_STATUS_SUCCESS) {// 百度 geolocation 的经纬度属性不同,此处是 point.lat 而不是 coords.latitudelet point = new BMapGL.Point(e.point.lng, e.point.lat);// console.log(point, "point");let gc = new BMapGL.Geocoder();gc.getLocation(point, function (rs) {resolve(rs);});} else {resolve(this.getStatus())// reject(this.getStatus());}});});});return result;
}
export { getLocationInfo };
使用
import { getLocationInfo } from "@/util/amap";
getLocationInfo().then((rs) => {
})

页面使用

1:组件式
[vue-baidu-map](https://dafrok.github.io/vue-baidu-map/#/zh/index)
vue-baidu-map
main.js
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {ak: '******'
})<baidu-map:center="center":zoom="zoom":height="screenHeight3":width="screenWidth3":map-style="mapStyle"    //背景样式:scroll-wheel-zoom="true"class="bmView"@ready="handler">//多个marker
<div v-for="(v, k) in wgMarker" :key="k"><bm-marker :position="{ lng: v.centerx, lat: v.centery }" @click="showWgMarker(v)"><bm-label :content="v.name +'-'+ v.num" :label-style="{****}" :offset="{width: -12, height: 30}"/></bm-marker>
</div><bm-info-window :offset="{width: -8, height: -32}" :show="showFlag" :position="positionData" title="***" @close="infoWindowClose()"></bm-info-window><bm-polygonv-for="(p,index) in lineList.line":key="'p'+index":path="p":fill-opacity="0.1":stroke-opacity="0":stroke-weight="2"stroke-color="#057af3"@click="handleClick(p)"/>  //线组成的网格, 数据格式  [{ lng:**,lat: ** },]</baidu-map>mapStyle: {style: 'midnight'},handler({ BMap, map }) {this.BMap = BMapthis.map = mapthis.center.lng = 116.72963233941316this.center.lat = 39.912480003316986this.zoom = 15}组件式marker和Infowindow组件式一起使用动态插入marker就用动态插入infoWindow
2:script 引用
html页面引入
动态markerconst bPoint = new BMap.Point(point.lonbd, point.latbd) // 创建点  point//经纬度数组var myIcon = new BMap.Icon(this.mapIconRed, new BMap.Size(300, 157))  //mapIconRed,动态iconconst marker = new BMap.Marker(bPoint, { icon: myIcon }) // 做标记// marker = new BMap.Marker(pointArray[i], {// icon: icon//  })this.map.addOverlay(marker) // 在地图上显示标注点this.markers.push(marker)const _this = thismarker.addEventListener('click', function(e) {_this.map.centerAndZoom(new BMap.Point(point.lonbd, point.latbd), 15) //点击显示到中心_this.showInfo(point, bPoint)  //显示  info})})showInfo(point, bPoint) {var opts = {width: 300, // 信息窗口宽度height: 250 // 信息窗口高度}const arr = `<div></div>`var infoWindow = new BMap.InfoWindow(arr, opts) // 创建信息窗口对象this.map.openInfoWindow(infoWindow, bPoint) // 开启信息窗口}绘制线const BMap = this.BMapconst list = this.lineList.line  //经纬度数据//数据格式[{ lng:**,lat: ** },]          [[*,*]]const arr = []list.forEach(a => {a.forEach(b => {arr.push(new BMap.Point(b.lng, b.lat))var myPolygon = new BMap.Polygon(arr, {// fillColor: "#428ffc",// fillOpacity: v.opacity,// trokeColor: "#fff"strokeColor: '#FF0000', // 线条颜色strokeWeight: 5, // 线条宽度strokeStyle: 'dashed', // 线条形式,虚线strokeOpacity: 0.5, // 线条的透明度fillColor: '#1791fc', // 覆盖物的颜色fillOpacity: 0.1 // 覆盖物的透明度})this.map.addOverlay(myPolygon) // 添加区域})})

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

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

相关文章

12.12每日一题(备战蓝桥杯循环输出)

12.12每日一题&#xff08;备战蓝桥杯循环输出&#xff09; 题目 1002: 【入门】编程求解123...n题目描述输入输出样例输入 复制样例输出 复制来源/分类 题解 1002: 【入门】编程求解123...n题目 1741: 【入门】求出1~n中满足条件的数的个数和总和&#xff1f;题目描述输入输出…

CNN、LeNet、AlexNet基于MNIST数据集进行训练和测试,并可视化对比结果

完成内容&#xff1a; 构建CNN并基于MNIST数据集进行训练和测试构建LeNet并基于MNIST数据集进行训练和测试构建AlexNet并基于MNIST数据集进行训练和测试对比了不同网络在MNIST数据集上训练的效果 准备工作 import torch import torch.nn as nn import torch.optim as optim …

git切换分支

切换到你想要保留的分支&#xff1a; 确保你在本地已经切换到了你想要保留的分支。 git checkout 要保留的分支名更改远程仓库地址&#xff1a; 如果你还没有更改远程仓库地址&#xff0c;使用 git remote set-url 来更改它。 git remote set-url origin 新的仓库地址推送当前分…

高通SDX12:nand flash适配

一、SBL阶段 代码流程如下: boot_images\core\storage\flash\src\dal\flash_nand_init.c nand_probe ->nand_intialize_primary_hal_device ->>nand_get_device_list_supportedboot_images\core\storage\flash\src\dal\flash_nand_config.c ->>>flash_n…

ue4 解决角度万向锁的问题 蓝图节点

问题&#xff1a;当角度值从359-1变化的时候&#xff0c;数值会经历358、357… 解决方法&#xff1a;勾上Shortest Path&#xff0c;角度值的会从359-1

华为 Auth-HTTP Server 1.0 任意文件读取漏洞复现 [附POC]

文章目录 华为 Auth-HTTP Server 1.0 任意文件读取漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现0x06 修复建议华为 Auth-HTTP Server 1.0 任意文件读取漏洞复现 [附POC] 0x01 前言 免责声明:请勿利用文章内…

React Context:跨层级组件共享状态参数、状态

前言 通常情况下&#xff0c;我们通过props将参数从父组件传递给子组件&#xff0c;达到组件间状态参数共享的目的。但是面对嵌套了多层组件的情况&#xff0c;继续使用props一层一层的传递参数是非常冗余和繁琐的。 对于这种包含多层组件的传参&#xff0c;React提供了 Cont…

Kubernetes实战(十三)-使用kube-bench检测Kubernetes集群安全

1 概述 在当今云原生应用的开发中&#xff0c;Kubernetes已经成为标准&#xff0c;然而&#xff0c;随着其使用的普及&#xff0c;也带来了安全问题的挑战。本文将介绍如何使用kube-bench工具来评估和增强Kubernetes集群的安全性。 2 CIS (Center for Internet Security)简介…

OneCode低代码引擎 V2.0源码结构详解

前言 OneCode今天&#xff08;12月10日&#xff09;正式更新了其V2.0版本。从OneCode的季度版本生命中&#xff0c;可以看到2.0版本还是一个重量级的版本&#xff0c;笔者在收到2.0更新后第一时间下拉了最新的代码。在参考了OneCode 的技术说明后&#xff0c;根据包结构来分析…

MySQL笔记-第16章_变量、流程控制与游标

视频链接&#xff1a;【MySQL数据库入门到大牛&#xff0c;mysql安装到优化&#xff0c;百科全书级&#xff0c;全网天花板】 文章目录 第16章_变量、流程控制与游标1. 变量1.1 系统变量1.1.1 系统变量分类1.1.2 查看系统变量 1.2 用户变量1.2.1 用户变量分类1.2.2 会话用户变量…

GoLang EASY 微服务游戏框架 01

1 Overview EASY 是一个go语言编写的框架&#xff0c;兼容性支持go版本1.19&#xff0c;go mod 方式构建管理。它是一个轻型&#xff0c;灵活&#xff0c;自定义适配强的微服务框架。 它支持多种网络协议TCP&#xff0c;websocket&#xff0c;UDP&#xff08;待完成&#xf…

数据可视化:解析跨行业普及之道

数据可视化作为一种强大的工具&#xff0c;在众多行业中得到了广泛的应用&#xff0c;其价值和优势不断被发掘和利用。今天就让我以这些年来可视化设计的经验&#xff0c;讨论一下数据可视化在各个行业中备受青睐的原因吧。 无论是商业、科学、医疗保健、金融还是教育领域&…

剑指 Offer(第2版)面试题 26:树的子结构

剑指 Offer&#xff08;第2版&#xff09;面试题 26&#xff1a;树的子结构 剑指 Offer&#xff08;第2版&#xff09;面试题 26&#xff1a;树的子结构解法1&#xff1a;递归解法2&#xff1a;深度优先搜索序列上做串匹配 剑指 Offer&#xff08;第2版&#xff09;面试题 26&a…

蚂蚁SEO的百度蜘蛛池有哪些优势

一、介绍 SEO是搜索引擎优化&#xff08;Search Engine Optimization&#xff09;的缩写&#xff0c;是一种通过优化网站结构、内容和链接等元素&#xff0c;提高网站在搜索引擎中的排名&#xff0c;从而增加网站流量和吸引更多潜在客户的方法。SEO已成为现代网站管理的重要策…

聚观早报 |一加12首销;华为智能手表释放科技温暖

【聚观365】12月12日消息 一加12首销 华为智能手表释放科技温暖 卡尔动力获地平线战略投资 英伟达希望在越南建立基地 努比亚Z60 Ultra影像规格揭晓 一加12首销 现在有最新消息&#xff0c;近日一加12该机已于昨日开售&#xff0c;售价4299元起。 外观方面&#xff0c;全…

使用rknn-toolkit2将paddleseg模型导出rknn模型

目录 安装paddle2onnx环境 将paddle模型导出onnx模型 安装rknn-toolkits 转化rknn模型 安装paddle2onnx环境 首先创建一个python虚拟环境 conda create -n paddle2onnx python3.10 source activate paddle2onnx 下载并安装 https://github.com/PaddlePaddle/Paddle2ONNX …

pyspark on yarn

背景描述 pyspark 相当于 python 版的 spark-shell&#xff0c;介于 scala 的诡异语法&#xff0c;使用 pyspark on yarn 做一些调试工作还是很方便的。 配置 获取大数据集群配置文件。如果是搭建的 CDH 或者 CDP 可以直接从管理界面下载配置文件。直接下载 hive 组件的客户端…

IDC报告:国内游戏云市场,腾讯云用量规模位列第一

12月12日消息&#xff0c;IDC公布最新的《中国游戏云市场跟踪研究&#xff0c;2022H2》报告&#xff08;以下简称“《报告》”&#xff09;显示&#xff0c;腾讯云凭借全球化节点布局以及国际领先的游戏技术积累&#xff0c;在整体规模、云游戏流路数、CDN流量峰值带宽等多维度…

“未来医疗揭秘:机器学习+多组学数据,开启生物医学新纪元“

在当今的数字化时代&#xff0c;科技正在不断地改变着我们的生活&#xff0c;同时也为医疗领域带来了巨大的变革。随着机器学习的快速发展&#xff0c;以及多组学数据在生物医学中的应用&#xff0c;我们正开启一个全新的医疗纪元。这个纪元以精准诊断、个性化治疗和高效康复为…

Docker容器:Centos7搭建Docker镜像私服harbor

目录 1、安装docker 1.1、前置条件 1.2、查看当前操作系统的内核版本 1.3、卸载旧版本(可选) 1.4、安装需要的软件包 1.5、设置yum安装源 1.6、查看docker可用版本 1.7、安装docker 1.8、开启docker服务 1.9、安装阿里云镜像加速器 1.10、设置docker开机自启 2、安…