Vue --》 如何在vue中调用百度地图
1.项目根目录下下载百度地图插件
npm install vue-baidu-map –save
2.在首页index.html中引入百度地图:
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=秘钥"></script>
我申请的密钥为 :3bVHdeo2ZZaZO4QczC63d0kMsbA55ZSD
3.在显示地图的组件中 template 中:
<div class="baidumap" id="allmap"></div> //地图的容器
4.在显示地图的组件中 script 中:
export default {
name: 'pm-distribution',
components: { },
mounted() {
this.baiduMap()
},
methods: {
baiduMap() {
var map = new BMap.Map('allmap') // 创建地图实例 var point = new BMap.Point(116.331398, 39.897445) // 创建点坐标
map.centerAndZoom(point, 15) // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放 map.addControl(new BMap.NavigationControl())
map.addControl(new BMap.ScaleControl())
map.addControl(new BMap.OverviewMapControl())
map.addControl(new BMap.MapTypeControl())
//map.setMapStyle({ style: 'midnight' }) //地图风格 var marker = new window.BMap.Marker(point) // 创建标注
map.addOverlay(marker) // 将标注添加到地图中 //提示信息
var infoWindow = new BMap.InfoWindow('这是提示信息')
// 鼠标移上标注点要发生的事
marker.addEventListener('mouseover', function() {
this.openInfoWindow(infoWindow)
}) // 鼠标移开标注点要发生的事
marker.addEventListener('mouseout', function() {
//this.closeInfoWindow(infoWindow)
})
}
}
}
5.在显示地图的组件中 style 中改变一下默认样式:
.baidumap {
width: 1000px;
height: 500px;
border: 1px solid red;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
} /* 去除百度地图版权那行字 和 百度logo */
.baidumap > .BMap_cpyCtrl {
display: none !important;
}
.baidumap > .anchorBL {
display: none !important;
}
完成!!!!
效果如(可鼠标滚轮操作,可点击操作):
Vue --》 如何在vue中调用百度地图的更多相关文章
- 如何在vue单页应用中使用百度地图
作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...
- Android中调用百度地图
一.调用百度地图 --第一种方法 1.下载百度地图SDK SDK可以拆分下载,需要使用那一部分功能就下载相应包含的SDK,如下图 核心的的jar 和so包,放在工程中的libs目录下 2.申请key ...
- 如何在网页中调用百度地图api
我想在木有提供地图接口的年代,前端工程师门要么只写上企业的具体地址,要么就是用一张标有自己位置的地图图片.但是现在不一样啦!为了增强用户体验,谷歌,甚至百度都很开放了,你可以在他们的网站上找到地图接口 ...
- ASP.NET中调用百度地图API
1.打开链接http://developer.baidu.com/map/jshome.htm这里有很多DEMO,或者你直接百度搜索“百度地图API”,第一个就是.进入后有很多方向供你选择,由于现在开 ...
- Angular/Vue调用百度地图+标注点不显示图标+多标注点计算地图中心位置
整理一下~ 一.在vue中调用百度地图 首先当然是申请百度密匙(很简单,不多说) 1.在index.html文件中引入百度地图JavaScript API接口: <script type=& ...
- Vue中使用百度地图——根据输入框输入的内容,获取详细地址
知识点:在Vue.js项目中调用百度地图API,实现input框,输入地址,在百度地图上定位到准确地址,获得到经纬度 参考博客: 百度地图的引用,初步了解参考博客:http://blog.csdn. ...
- 在XAF(ASP.NET)中以ListEditor的形式调用百度地图API
因为项目需要,在系统中使用地图显示设备的地理位置.考虑过ArgGIS,Bing和Baidu地图.本来想用ArgGIS,看教程嫌麻烦.所以还是用Web地图吧.Bing的话还要申请个key,没心情.百度地 ...
- Angular 调用百度地图API接口
Angular 调用百度地图API接口 参考原文:https://blog.csdn.net/yuyinghua0302/article/details/80624274 下面简单介绍一下如何在Ang ...
- 苹果手机 微信调用百度地图Javascript API 频繁闪退问题
最近在网页中调用百度地图API js大众版,但是在IOS8系统中,缩放的时候频繁闪退,安卓手机没有这个问题! 在网上查询了下,有网友回答说不要频繁的去new marker,而是初始化话一定量的mark ...
随机推荐
- python引用库异常总结
一.导入import pandas.io.data as web 时报了"The pandas.io.data module is moved to a separate package & ...
- bzoj3631: [JLOI2014]松鼠的新家(树上差分)
题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=3631 题目大意:给定含有n个顶点的树,给定走遍整棵树顺序的序列a[1],a[2],a[3 ...
- 1129. Recommendation System (25)
Recommendation system predicts the preference that a user would give to an item. Now you are asked t ...
- [HTTP知识体系]前端常用的一些参数
1.http常见状态码(status code) 200(成功) 服务器已成功处理了请求.通常,这表示服务器提供了请求的网页. 301 (永久移动) 请求的网页已永久移动到新位置. 服务器返回此响应( ...
- IDEA更改左侧目录层级结构
齿轮---Compact Empty Middle Packages
- MySQL导出和导入
MySQL的几句脚本 最近做了几次mysql的备份和恢复, 找了一些资料, 写了一些脚本, 记录一下. #导出 mysqldump $_login_info_ $_src_db_name_ --no- ...
- B1011. A+B 和 C
题目描述 给定区间[-2^63, 2^63]内的三个整数A.B 和 C,请判断A+B是否大于C 输入格式 第一行给出正整数T(≤10),即测试用例的个数.随后给出T组测试用例,每组占一行,顺序给出A. ...
- C#知识点:委托、事件、正则表达式、SVN、找按段等差递增至不变序列的规律
using System; using System.Collections.Generic; using System.Text; namespace Delegate { //定义委托,它定义了可 ...
- echart--如何自定义提示框的内容和样式实例
图例的大概样子 具体设置代码为:
- JSP实现大文件上传和下载
javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求 1.通过form表单向后端发送请求 <form id=" ...