现在还有做系统的网站吗/网站策划书案例
话不多说 直接上干货 提前申请谷歌地图账号
一、新建地图 使用h5+获取当前定位或者使用三方uniapp插件
var coords = ""navigator.geolocation.getCurrentPosition(function(position) {coords = {lat: position.coords.latitude,lng: position.coords.longitude};lats = position.coords.latitude;lngs = position.coords.longitude});
map = new google.maps.Map(document.getElementById('map'), {zoom: zoom,center: coords,mapId: "your map id",animation: 'BOUNCE'});
二、画圆
cityCircle = new google.maps.Circle({strokeColor: "#FF0000", // 边框颜色strokeOpacity: 0.6, // 边框透明度strokeWeight: 0.8, // 边框宽度fillColor: "#FF0000", // 填充颜色fillOpacity: 0.15, // 填充透明度map,center: {lat: lats,lng: lngs},radius: maxValue * 500, //半径
});
三、绘制marker点
let min = 500;let max = 1000;let randomNum = Math.floor(Math.random() * (max - min + 1)) + min;for (let i = 0; i < 5; i++) {var locObj = {lat: (lats + (Math.floor(Math.random() * 21) - 15) / randomNum) * 1,lng: (lngs - (Math.floor(Math.random() * 21) - 15) / randomNum) * 1,title: randomChinese(10)}const marker = new google.maps.Marker({position: locObj,title: locObj.title + '-' + i,imgUrl: 'https://picsum.photos/450/450?random=' + Math.floor(Math.random() * 100),icon: {url: "https://maps.gstatic.com/mapfiles/ms2/micons/blue.png",scaledSize: new google.maps.Size(50, 50),},map: map});markers.push(marker)}
四、搜索框
// 创建 Autocomplete 实例const input = document.getElementById("search-box");const autocomplete = new google.maps.places.Autocomplete(input);// 设置 Autocomplete 参数autocomplete.setFields(["geometry", "name"]);// 添加事件监听器,当用户选择某个地点时,在地图上标记出所选位置autocomplete.addListener("place_changed", function() {const place = autocomplete.getPlace();if (!place.geometry) {console.log("返回的地理信息无效!");return;}// 将地图中心点指向用户所选位置,并设置标记if (searchmarker) { //去除marker标记点searchmarker.setMap(null)searchmarker = ""}map.setCenter(place.geometry.location);searchmarker = new google.maps.Marker({map: map,position: place.geometry.location,title: place.name,});});
五、绘制省市区
const polygonsData = []//cityObjArr 请前往dcloud获取相关数据【https://ext.dcloud.net.cn/plugin?id=11873】for (var k = 0; k < cityObjArr.length; k++) {var obj = {polygonCoords: cityObjArr[k],color: getRandomColor(),strokeWeight: 2,}polygonsData.push(obj)}polygonsData.forEach((polygon) => {var polygonObj = new google.maps.Polygon({paths: polygon.polygonCoords,strokeColor: getRandomColor(), // 边界线颜色strokeOpacity: 0.8, // 边界线透明度strokeWeight: 2, // 边界线厚度fillColor: getRandomColor(), // 填充颜色fillOpacity: 0.2, // 填充透明度map: map,});newPolygon.push(polygonObj)});
六、画路线
const directionsService = new google.maps.DirectionsService();var TravelMode = [{id: 1,name: "DRIVING",color: "#ea4335"},{id: 2,name: "WALKING",color: "#7825fa"},{id: 3,name: "BICYCLING",color: "#fa6200"},{id: 4,name: "TRANSIT",color: "#ff00ff"}]for (var i = 0; i < TravelMode.length; i++) {startDrawRoute(directionsService, TravelMode[i])}function startDrawRoute(directionsService, travelMode) {// 随机数字而已 动态数字 方便查询效果let min = 5000;let max = 10000;let randomNum = (Math.floor(Math.random() * (max - min + 1)) + min) / 500000;// 起点坐标const origin = {lat: 34.7382820208 + randomNum,lng: 113.64360881345 + randomNum};// 终点坐标const destination = {lat: 34.78194 + randomNum,lng: 113.622512 + randomNum};var directionsRenderer = new google.maps.DirectionsRenderer({map: map,suppressMarkers: true, // 关闭默认图标polylineOptions: {strokeColor: travelMode.color, //设置路线颜色strokeWeight: 5 //设置路线宽度},// draggable: true //允许用户拖动路线});const request = {origin: origin,destination: destination,travelMode: travelMode.name, //绘制路线的模式};directionsService.route(request,(result, status) => {if (status === "OK") {directionsRenderer.setDirections(result);directionsRenderer.setMap(map);// 获取起点和终点的信息并添加标记var startMarker = new google.maps.Marker({position: result.routes[0].legs[0].start_location,map: map,icon: {url: "https://maps.gstatic.com/mapfiles/ms2/micons/pink.png",scaledSize: new google.maps.Size(50, 50),},});drawRouteMarker.push(startMarker)var endMarker = new google.maps.Marker({position: result.routes[0].legs[0].end_location,map: map,icon: {url: "https://maps.gstatic.com/mapfiles/ms2/micons/orange.png",scaledSize: new google.maps.Size(50, 50),},});drawRouteMarker.push(endMarker)directionsRendererArr.push(directionsRenderer)//显示路线的总距离console.log('距离===', directionsRenderer.directions.routes[0].legs[0].distance.text)console.log('时间===', directionsRenderer.directions.routes[0].legs[0].duration.text)// for (var k = 0; k < directionsRenderer.directions.routes[0].legs[0].steps.length; k++) {// console.log(directionsRenderer.directions.routes[0].legs[0].steps[k].instructions)// }} else {// console.log(travelMode, "绘制失败===", result)}});
}
这个时候相信你已经看到了地图【详细代码请前往dcloud插件市场查看marker标记点、省市区颜色标记、输入框搜索、范围选择、信息弹窗等】
祝:学习愉快、工作顺利
温馨提示:源码获取方式 关注【码农园区】 回复 “ google”
相关文章:

【uniapp】Google Maps
话不多说 直接上干货 提前申请谷歌地图账号一、新建地图 使用h5获取当前定位或者使用三方uniapp插件 var coords ""navigator.geolocation.getCurrentPosition(function(position) {coords {lat: position.coords.latitude,lng: position.coords.longitude};lats …...

C语言变量与常量
跟着肯哥(不是我)学C语言的变量和常量、跨文件访问、栈空间 栈空间还不清楚,期待明天的课程内容 C变量 变量(Variable)是用于存储和表示数据值的名称。 主要包括四个环节:定义、初始化、声明、使用 在我刚…...

AI创作系统ChatGPT网站源码/支持DALL-E3文生图/支持最新GPT-4-Turbo模型+Prompt应用
一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统,支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美,可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如…...

二维码智慧门牌管理系统升级,异常门牌聚合解决方案助力高效管理
文章目录 前言一、异常门牌聚合解决方案 前言 在今天的数字化时代,智慧城市已成为发展趋势,其中二维码智慧门牌管理系统扮演着至关重要的角色。通过对门牌信息进行数字化管理,该系统极大提升了城市管理的效率和便捷性。然而,随着…...

【XTDrone Ubuntu20.04】XTDrone+ Ubuntu20.04 + PX4安装
XTDrone仿真平台配置 文章目录 XTDrone仿真平台配置依赖安装 ROS一键安装Marvos安装PX4 安装安装QTGroundControlXTDrone下载安装 环境: VMWare 16.0 Ubuntu 22.04 (因为没人配过)Ubuntu 20.04 参考文章: 仿真平台基础配置 (yuq…...

河北大学选择ZStack Cube超融合一体机打造实训云平台
河北大学通过云轴科技ZStack Cube超融合一体机构建校园实训云平台,部署测试仅耗时1天,该平台能够更快地为学生提供高性能、高可用的云主机、云存储和云网络服务;同时也能满足日常运维管理要求,为学生提供更好的实训环境。 河北省…...

IDEA远程一键部署SpringBoot到Docker
IDEA是Java开发利器,Spring Boot是Java生态中最流行的微服务框架,docker是时下最火的容器技术,那么它们结合在一起会产生什么化学反应呢? 一、开发前准备 1. Docker安装 可以参考:https://docs.docker.com/install/ 2…...

索引三星结构
三星索引的定义,可以先给我们对索引优化提供一个大概的思路: 满足第1颗星: 取出所有的等值谓词的列,作为索引最开头的列——以任意顺序都可以。 满足第2颗星: 将order by加入到索引列,不要改变这些列的顺…...

rust 笔记 高级错误处理
文章目录 错误处理组合器or() 和 and()or_else() 和 and_then()filtermap() 和 map_err()map_or() 和 map_or_else()ok_or() and ok_or_else() 自定义错误类型错误转换 From 特征 归一化不同的错误类型Box<dyn Error>自定义错误类型 简化错误处理thiserroranyhow 错误处理…...

python+Django 使用apscheduler实现定时任务 管理调度
apscheduler实现定时任务 管理调度 在Django 项目中经常会用到定时任务去处理一些业务处理 使用 APScheduler 可以轻松地实现定时任务的管理和调度。你可以通过以下步骤来创建、启动、停止和删除定时任务: 1.创建调度器对象: from apscheduler.schedu…...

Java编程中,异步操作流程中,最终一致性以及重试补偿的设计与实现
一、背景 微服务设计中,跨服务的调用,由于网络或程序故障等各种原因,经常会出现调用失败而需要重试。另外,在异步操作中,我们提供接口让外部服务回调。回调过程中,也可能出现故障。 这就要求我们主动向外…...

吴恩达《机器学习》8-7:多元分类
在机器学习领域,经常会遇到不止两个类别的分类问题。这时,需要使用多类分类技术。本文将深入探讨多类分类,并结合学习内容中的示例,了解神经网络在解决这类问题时的应用。 一、理解多类分类 多类分类问题是指当目标有多个类别时…...

Postman批量运行用例
近期在复习Postman的基础知识,在小破站上跟着百里老师系统复习了一遍,也做了一些笔记,希望可以给大家一点点启发。 一)注意点 有上传文件的接口,需要做如下设置: 1、打开能读取外部文件的开关 2、把需要…...

20个Golang最佳实践
在本教程中,我们将探讨 Golang 中的 20 个最佳编码实践。它将帮助您编写有效的 Go 代码。 #20:使用正确的缩进 良好的缩进使您的代码具有可读性。一致地使用制表符或空格(最好是制表符)并遵循 Go 标准缩进约定。 package main …...

Java 类之 java.lang.System
Java 类之 java.lang.System 文章目录 Java 类之 java.lang.System一、简介二、主要功能1、currentTimeMillis() - 获取当前时间的毫秒数说明代码示例 2、getProperty(String key) - 获取系统属性说明代码示例 3、exit(int status) - 终止虚拟机说明代码示例 4、arraycopy(Obje…...

认识Modbus通信协议(笔记)
Modbus 莫迪康 1979年 PLC 1969年 什么是modbus? 它是一个Bus,即总线协议。比如串口协议、IIC协议、SPI都是通信协议。 协议,顾名思义是一种规定和约束 Modbus协议是一种引用层的报文传输协议,RTU、ASCLL、TCP,都属于Modbus协…...

【算法】距离(最近公共祖先节点)
题目 给出 n 个点的一棵树,多次询问两点之间的最短距离。 注意: 边是无向的。所有节点的编号是 1,2,…,n。 输入格式 第一行为两个整数 n 和 m。n 表示点数,m 表示询问次数; 下来 n−1 行,每行三个整数 x,y,k&am…...

基于SpringBoot的SSMP整合案例(消息一致性处理与表现层开发)
消息一致性处理 在后端执行完相应的操作后,我们需要将执行操作后的结果与数据返回前端,前端 调用我们传回去的数据,前端是如何知道我们传回去的数据名称的? 答:前后端遵循了同一个"协议"。这个协议就是定义…...

c#之反射详解
总目录 文章目录 总目录一、反射是什么?1、C#编译运行过程2、反射与元数据3、反射的优缺点 二、反射的使用1、反射相关的类和命名空间1、System.Type类的应用2、System.Activator类的应用3、System.Reflection.Assembly类的应用4、System.Reflection.Module类的应用…...

synchronized jvm实现思考
底层实现时,为什么使用了cxq队列和entryList双向链表?这里为什么不跟AQS中使用一个队列就行了,加了一个entryList的目的是为了什么? 个人理解这里多一个entryList,可能是用于减少频繁的cas操作。假设存在很多锁竞争时&…...

【hive基础】hive常见操作速查
文章目录 一. hive变量操作1. 查看当前hive配置信息2. 设置变量3. 修改变量4. 进入hive终端重新加载配置 二. 执行hive sql三. 启动hive 一. hive变量操作 1. 查看当前hive配置信息 # 查看当前所有配置信息 hive > set ;# 查看某一项配置信息 hive >set hive.metastore…...

2024年山东省职业院校技能大赛中职组“网络安全”赛项竞赛试题-A
2024年山东省职业院校技能大赛中职组 “网络安全”赛项竞赛试题-A 一、竞赛时间 总计:360分钟 二、竞赛阶段 竞赛阶段 任务阶段 竞赛任务 竞赛时间 分值 A、B模块 A-1 登录安全加固 180分钟 200分 A-2 本地安全策略设置 A-3 流量完整性保护 A-4 …...

基于51单片机电子钟温度计数码显示设计( proteus仿真+程序+设计报告+讲解视频)
这里写目录标题 ✅1.主要功能:✅讲解视频:✅2.仿真设计✅3. 程序代码✅4. 设计报告✅5. 设计资料内容清单&&下载链接✅[资料下载链接:](https://docs.qq.com/doc/DS0Nja3BaQmVtWUpZ) 基于51单片机电子钟温度检测数码显示设计( proteu…...

jenkins+centos7上传发布net6+gitlab
工作中实践了一下jenkins的操作,所以记录一下这次经验,没有使用到docker 先看下成果: 选择发布项目 选择要发布的分支 构建中 发布成功 开始 首先安装好jenkins并注册自己的jenkins账号 因为我们的项目代码管理使用的是gitlab,…...

python趣味编程-5分钟实现一个F1 赛车公路游戏(含源码、步骤讲解)
Python 中的 F1 赛车公路游戏及其源代码 F1 Race Road Game是用Python编程语言开发的,它是一个桌面应用程序。 这款 Python 语言的 F1 赛道游戏可以免费下载开源代码,它是为想要学习 Python 的初学者创建的。 该项目系统使用了 Pygame 和 Random 函数。 Pygame 是一组跨平…...

Kafka快速入门
文章目录 Kafka快速入门1、相关概念介绍前言1.1 基本介绍1.2 常见消息队列的比较1.3 Kafka常见相关概念介绍 2、安装Kafka3、初体验前期准备编码测试配置介绍 bug记录 Kafka快速入门 1、相关概念介绍 前言 在当今信息爆炸的时代,实时数据处理已经成为许多应用程序和…...

基于Pytorch的从零开始的目标检测
引言 目标检测是计算机视觉中一个非常流行的任务,在这个任务中,给定一个图像,你预测图像中物体的包围盒(通常是矩形的) ,并且识别物体的类型。在这个图像中可能有多个对象,而且现在有各种先进的技术和框架来解决这个问…...

interview review
M: intrinsic matrix [ f x s c x 0 f y c y 0 0 1 ] \begin{bmatrix}f_x & s & c_x \\ 0 & f_y & c_y \\ 0 & 0 & 1\end{bmatrix} fx00sfy0cxcy1 ( c x , c y ) (c_x, c_y) (cx,cy): camera center in pixels ( f x , f y …...

layui表头多出一列(已解决)
问题描述 :layui表头多出来一列,但是表体没有内容,很影响美观。 好像是原本的表格有滚轮,我操作放大之后滚轮没有了,但是滚轮自带的表头样式还在, 之后手动把这个样式隐藏掉了,代码如下…...

LeetCode解法汇总307. 区域和检索 - 数组可修改
目录链接: 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目: https://github.com/September26/java-algorithms 原题链接:力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 描述: 给你一个数…...