如何在页面中加入百度地图

        官方文档:jspopularGL | 百度地图API SDK (baidu.com) 

                添加一下代码就可以实现

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="initial-scale=1.0, user-scalable=no"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>Baidu Map </title><style type="text/css">html {height: 100%}body {height: 100%;margin: 0px;padding: 0px}#container {height: 100%}</style><script type="text/javascript"src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=1V4mSproiau7AxsArSNKBWqR0ZiyMKNh&s=1"></script>
</head>
<body>
<div id="container"></div>
</body>
<script>var map = new BMapGL.Map("container");          // 创建地图实例var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标map.centerAndZoom(point, 15);                 // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>
</html>

        在vue中需要这样写

<body>
<div id="app" v-cloak><div id="container"></div>
</div>
</body>
<script>var tableContainer = new Vue({el: '#app',mixins: [sharpMixin],data() {return {}},mounted() {this.initMap();},created() {},methods: {// 获取数据列表refreshList() {},initMap() {var map = new BMapGL.Map("container");          // 创建地图实例var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标map.centerAndZoom(point, 15);                 // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放},}})
</script>

        在vue中mounted会先一步created执行,所以传值时要注意,map所需要的经纬是否已经实例化,要不然就会出现白屏的情况。 

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

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

相关文章

超分辨率重建——SAN训练自己数据集及推理测试(详细图文教程)

目录 一、源码包下载二、数据集准备三、预训练权重文件四、训练环境五、训练5.1 超参数修改5.2 训练模型5.2.1 命令方式训练5.2.2 Configuration配置参数方式训练 5.3 模型保存 六、推理测试6.1 超参数修改6.2 测试6.2.1 命令方式测试6.2.2 Configuration配置参数方式测试 6.3 …

响应者链概述

响应者链 iOS事件的3大类型 Touch Events(触摸事件)Motion Events(运动事件&#xff0c;比如重力感应和摇一摇等)Remote Events(远程事件&#xff0c;比如用耳机上得按键来控制手机) 触摸事件 处理触摸事件的两个步骤 寻找事件的最佳响应者事件的响应在响应链中的传递 寻…

Web UI 自动化 元素定位利器

序 元素定位&#xff0c;对于 Web UI 自动化而言&#xff0c;绝对是大家成长道路上的一道绊脚石。 很多初学者&#xff0c;都“死”在了元素定位上&#xff0c;从而失去了学习的兴趣。导致职业规划不得不半途而废~ 那么&#xff0c;今天&#xff0c;我们就使用 Katalon Stu…

深入理解CI/CD与Docker集成:自动化构建和部署的完整指南

在当今软件开发的快节奏环境中&#xff0c;自动化构建和部署是实现敏捷开发和DevOps实践的关键。Docker容器技术为这一过程引入了更高的灵活性和一致性。本文将深入研究如何将持续集成/持续部署&#xff08;CI/CD&#xff09;与Docker集成&#xff0c;提供更详细、实用的示例代…

向华为学习:基于BLM模型的战略规划研讨会实操的详细说明,含研讨表单(二)

上一篇文章&#xff0c;华研荟结合自己的经验和实践&#xff0c;详细介绍了基于BLM模型的战略规划研讨会的设计和组织流程&#xff0c;提高效率的做法。有朋友和我私信沟通说&#xff0c;其实这个流程不单单适合于BLM模型的战略规划研讨会&#xff0c;实际上&#xff0c;使用其…

v851s ssh搭建与使用

ssh 概述: 1. 用来远程登录的一种安全通道协议(常用于linux 、UNIX中); 2. 分为服务端和客户端: 1)服务端即openSSH ,一般属于目标开发板(linux中配置文件路径/etc/ssh/sshd_config); 2)客户端即登录端,常用工具:sercureCRT 、MobaXterm 、Putty等; 1. ssh 服务…

解锁数据探索新时代,JetBrains DataGrip 2023 Mac/win中文版下载

JetBrains DataGrip 2023 Mac/win&#xff0c;作为一款全新的数据库管理和开发工具&#xff0c;为数据工程师、分析师和开发人员提供了强大的功能和工具&#xff0c;帮助他们更高效地处理和分析数据。无论你是使用Mac还是Windows系统&#xff0c;都能够通过这款软件轻松驾驭数据…

springMVC 学习总结(四) 拦截器及统一异常处理

一.拦截器 1.拦截器与过滤器的区别 拦截器 Interceptor 和 过滤器 Filter类似&#xff0c;主要用于拦截用户请求并作出一定处理操作&#xff0c; 但两则也有不同之处&#xff0c;如过滤器只在Servlet前后起作用&#xff0c;是Servlet规范定义的&#xff0c;是Servlt容器才支…

CTF网络安全大赛是干什么的?发展史、赛制、赛程介绍,参赛需要学什么?

CTF&#xff08;Capture The Flag&#xff09;是一种网络安全竞赛&#xff0c;它模拟了各种信息安全场景&#xff0c;旨在提升参与者的网络安全技能。CTF 赛事通常包含多种类型的挑战&#xff0c;如密码学、逆向工程、网络攻防、Web 安全、二进制利用等。 发展史 CTF 的概念…

SpringBoot中处理处理国际化

SpringBoot中处理处理国际化 1. 创建SpringBoot项目2. resource下创建i18n目录3. 右键i18n新建资源包4. 弹框中添加需要支持的国际化语言5. messages.properties中添加需要国际化的键6. application.yaml添加配置7. 国际化工具8. 使用功能9 场景问题 1. 创建SpringBoot项目 2.…

4-Docker命令之docker diff

1.docker diff介绍 docker diff命令是用于比较一个docker容器不同版本提交的文件差异 docker diff命令会列出容器内3种文件状态变化,分别是:A-Add,D-Delete,C-Change 2.docker diff用法 docker diff container [root@centos79 ~]# docker diff --helpUsage: docker d…

条款3:尽量使用const

文章目录 const指针和函数声明const修饰指针const修饰函数const修饰容器const应用在函数中 const限定成员函数避免const重载的代码重复总结 const指针和函数声明 const修饰指针 char greeting[] "Hello"; char* p greeting; // non-const 指针,// non-const 数据…

MATLAB Sub2ind下标值转化

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 前言 sub2ind([10,10],1,10) 10行10列 网格内第1行 第10列的数值是多少&#xff1f; 10*10的网格第一列 数值为&#xff1a;1 2 3 4 5 6 7 8 9 10&#xff1b…

Unity利用ZXing库 生成和识别二维码

ZXing 创建及识别二维码 生成二维码 目标 能够生成任意大小的二维码生成的二维码可调整背景颜色和码点的颜色生成的二维码中心可带有小Icon生成的二维码可带边框并可调整边框宽度和颜色 实现 using System.Collections.Generic; using UnityEngine; using ZXing; using ZX…

2023了,前端实现AI电子秤思路分析

前景小知识&#xff1a; 这几年ai这个话题非常火爆&#xff0c;笔者从事零售行业软件开发也接到了新需求&#xff0c;希望实现ai电子秤&#xff0c;老规矩&#xff0c;先看需求 举个栗子&#xff1a; 或许&#xff0c;你已经留意到&#xff0c;当你在某些大型超市超市或生鲜类…

spring 基于注解管理bean @Autowired

目录结构&#xff1a; 代码示例&#xff1a; UserContronller.java package com.atguigu.spring6.autowired.controller;import com.atguigu.spring6.autowired.service.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springfra…

阿里云对象存储OSS外网流出流量异常增多导致费用上升的解决方法

本文介绍在使用阿里云的对象存储 OSS服务过程中&#xff0c;外网流量消耗异常增多并导致异常的费用支出这一情况的问题发现、问题定位与几种不同的问题解决方法。 细细数来&#xff0c;写博客已经有近3的历史了&#xff0c;这成为了一项已经陪伴我大半人生的工作&#xff1b;也…

二十章总结

一.线程简介 二.创建线程 1.继承Thread类 Thread类中常用的两个构造方法如下&#xff1a; public Thread():创建一个新的线程对象。 public Thread(String threadName):创建一个名称为threadName的线程对象。 继承Thread类创建一个新的线程的语法如下&#xff1a; p…

设计模式 简单工厂 工厂方法模式 抽象工厂模式

工厂模式介绍 工厂模式是我们最常用的实例化对象模式了&#xff0c;是用工厂方法代替new操作的一种模式。它是创建型模式。 简单工厂 简单工厂模式是指由一个工厂对象决定创建出哪一种产品类的实例, 但它不属于GOF 23种设计模式 简单工厂适用于工厂类负责创建的对象较少的场景,…

如何在Go中并发运行多个函数

引言 Go语言的一个流行特性是它对并发的一流支持,即一个程序可以同时做多件事。随着计算机从更快地运行单个代码流转向同时运行更多代码流,能够并发地运行代码正在成为编程的重要组成部分。为了让程序运行得更快,程序员需要把程序设计成并发运行,这样程序中并发的每一部分…