vue & 百度地图:使用百度地图
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxxxxxxxxxxxxxxx"></script>
<title>voidvue_map</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
ak填的是你自己申请的密钥。
百度地图的开发者平台上有详细的说明。
mymap.vue
<template>
<div class="hello">
<div style="margin-bottom:10px">
<button @click="clickStart('jinting')">设定坐标</button>
<button @click="clickEnd">退出设定</button>
</div>
<!-- map start -->
<div style="" id="dituContent" class="ditu-content"></div>
<!-- map end -->
</div>
</template> <script>
export default {
name: 'mymap',
data () {
return {
polygons: [],
clickCity: '',
polyline: null,
marker: null,
cityName: '',
status: 'none',
centerPoint: [],
savePointsArray: [],
savePointsString: '',
jinting: '', mapObj:null
}
},
mounted () {
this.initMap()
},
methods:{
clickEnd(){
console.log('======================== CLICK END ======================')
this.clickCity = ''
this.status = 'none'
},
initMap () {
this.createMap() ; //创建地图 },
createMap(){
let self = this
let m = new BMap.Map("dituContent")
let point = new BMap.Point(120.49,31.15)
m.centerAndZoom(point,12)
m.setCurrentCity("苏州")
this.setMapEvent(m)
},
setMapEvent(m){
m.enableDragging();//启用地图拖拽事件,默认启用(可不写)
m.enableScrollWheelZoom();//启用地图滚轮放大缩小
m.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
m.enableKeyboard();//启用键盘上下左右键移动地图 this.addMapControl(m);//向地图添加控件
},
addMapControl(m){
//向地图中添加缩放控件
let ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
m.addControl(ctrl_nav);
//向地图中添加缩略图控件
let ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
m.addControl(ctrl_ove);
//向地图中添加比例尺控件
let ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
m.addControl(ctrl_sca); this.mapObj = m
}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ditu-content{
width:70%;
height:600px;
border:#ccc solid 1px;
margin:0 auto;
}
.pointwords{
word-wrap: break-word;
text-align: center;
padding: 0 20px;
}
.button{
height: 100px;
}
</style>
关于BMap地图对象:
原本我打算把它作为参数传到别的函数里,但发现这样在使用上还是不太方便,所以还是把它放到了vue页面实例的data中了。
参考:
https://blog.csdn.net/qq_38903950/article/details/78022174?locationNum=7&fps=1
vue & 百度地图:使用百度地图的更多相关文章
- 百度地图api根据地图缩放等级显示不同的marker点,功能二
功能一里面有marker点后台的代码 根据地图的缩放等级显示不同marker点的坐标JSP代码 <%@ page language="java" contentType=&q ...
- GPS定位为什么要转换处理?高德地图和百度地图坐标处理有什么不一样?
GPS定位为什么要转换处理?高德地图和百度地图坐标处理有什么不一样? 先了解一下 高德地图 采用: GCJ-02 (不可逆) 百度百科: http://baike.baidu.com/link?url ...
- iOS打开百度地图、高德地图导航
1.判断手机里是否已经安装了百度地图或者高德地图: BOOL hasBaiduMap = NO; BOOL hasGaodeMap = NO; if ([[UIApplication sharedAp ...
- 百度地图API自定义地图
http://api.map.baidu.com/lbsapi/creatmap/index.html http://developer.baidu.com/map/index.php?title=w ...
- js调用百度地图API创建地图,搜索位置
实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...
- iOS-Andriod百度地图仿百度外卖-饿了么-选择我的地址-POI检索/
http://zanderzhang.gitcafe.io/2015/09/19/iOS-Andriod百度地图仿百度外卖-饿了么-选择我的地址-POI检索/ 百度外卖选择送货地址: 饿了么选择送货地 ...
- 关于百度地图API的地图坐标转换问题
原文:关于百度地图API的地图坐标转换问题 我在之前的文章利用html5获取经纬度并且在百度地图中显示位置中使用了百度地图的API来显示html5获取的地理位置,在文中我说过这样的话,我说百度地图的准 ...
- iOS 百度地图监听地图状态
百度地图提供了地图状态的对象BMKMapStatus ///此类表示地图状态信息 @interface BMKMapStatus : NSObject { float _fLevel; // 缩放比例 ...
- 网页嵌入百度地图和使用百度地图api自定义地图的详细步骤
在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/ ...
- Android百度地图之显示地图
添加地图显示 一.在百度官网下载相关的SDK (网址:http://developer.baidu.com/map/sdkandev-download.htm) 解压下载好的BaiduMap_Andr ...
随机推荐
- WeChair Plus版项目介绍
这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 团队名称 WeChair 这个作业要求在哪里 团队作业第一次:团队作业第一次(2) 这个作业的目标 项目介绍,项目修改 作业正文 ...
- 多语言工作者の十日冲刺<7/10>
这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 团队进行Alpha冲刺--第七天(05.06) 作业正文 ...
- 深入浅出PyTorch(算子篇)
Tensor 自从张量(Tensor)计算这个概念出现后,神经网络的算法就可以看作是一系列的张量计算.所谓的张量,它原本是个数学概念,表示各种向量或者数值之间的关系.PyTorch的张量(torch. ...
- 状压DP 从TSP问题开始入门哦
一开始学状压DP难以理解,后来从TSP开始,终于入门了nice!!!! 旅行商问题 : 给定n个城市和两两相互的距离 ,求一条路径经过所有城市,并且路径达到最下仅限于; 朴树想法: 做n个城 ...
- 入门大数据---安装ClouderaManager,CDH和Impala,Hue,oozie等服务
1.要求和支持的版本 (PS:我使用的环境,都用加粗标识了.) 1.1 支持的操作系统版本 操作系统 版本 RHEL/CentOS/OL with RHCK kernel 7.6, 7.5, 7.4, ...
- 缺少对公共可见类型或成员的XML注释
最近突然心血来潮,想清理下代码,结果看到了一堆这样的警告——缺少对公共可见类型或成员“XXX”的 XML 注释: 其实要想取消上面的警告,仅仅需要在项目属性里找到生成页签里的”错误和警告“项,在禁止显 ...
- Animate.css的使用(基本使用附css文件下载地址)
animate.css下载地址: https://pan.baidu.com/s/18ceucCU1loYiGo5OCOkJBg 最新下载地址: http://www.haorooms.com/upl ...
- Python之浅谈深浅拷贝
目录 深浅拷贝 拷贝 浅拷贝 深拷贝 深浅拷贝 拷贝 s=['tim','age'] s2=s #这里的s2列表指向与s相同的id 当s2为s的拷贝对象时,s内的可变类型变化,s2变化;s内的不可变类 ...
- pycharm一直显示Process finished with exit code 0
后来排查发现原来是解释器的问题我之前使用的解释器是pycharm提供的虚拟解释器#####如何查看解释器点file–>new projects 如果选择的是2就是使用了pycharm提供的虚拟解 ...
- python数据类型的72变
输入数据的类型 input函数接收的数据默认为字符串类型 转换函数 通过转换函数实现接收其他类型的数据 1.接收整数:字符串→整型数据: int("整数格式的字符串") 2.接收小 ...