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 & 百度地图：使用百度地图的更多相关文章

  1. 百度地图api根据地图缩放等级显示不同的marker点，功能二

    功能一里面有marker点后台的代码 根据地图的缩放等级显示不同marker点的坐标JSP代码 <%@ page language="java" contentType=&q ...

  2. GPS定位为什么要转换处理？高德地图和百度地图坐标处理有什么不一样？

    GPS定位为什么要转换处理?高德地图和百度地图坐标处理有什么不一样? 先了解一下 高德地图 采用: GCJ-02 (不可逆) 百度百科: http://baike.baidu.com/link?url ...

  3. iOS打开百度地图、高德地图导航

    1.判断手机里是否已经安装了百度地图或者高德地图: BOOL hasBaiduMap = NO; BOOL hasGaodeMap = NO; if ([[UIApplication sharedAp ...

  4. 百度地图API自定义地图

    http://api.map.baidu.com/lbsapi/creatmap/index.html http://developer.baidu.com/map/index.php?title=w ...

  5. js调用百度地图API创建地图，搜索位置

    实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...

  6. iOS-Andriod百度地图仿百度外卖-饿了么-选择我的地址-POI检索/

    http://zanderzhang.gitcafe.io/2015/09/19/iOS-Andriod百度地图仿百度外卖-饿了么-选择我的地址-POI检索/ 百度外卖选择送货地址: 饿了么选择送货地 ...

  7. 关于百度地图API的地图坐标转换问题

    原文:关于百度地图API的地图坐标转换问题 我在之前的文章利用html5获取经纬度并且在百度地图中显示位置中使用了百度地图的API来显示html5获取的地理位置,在文中我说过这样的话,我说百度地图的准 ...

  8. iOS 百度地图监听地图状态

    百度地图提供了地图状态的对象BMKMapStatus ///此类表示地图状态信息 @interface BMKMapStatus : NSObject { float _fLevel; // 缩放比例 ...

  9. 网页嵌入百度地图和使用百度地图api自定义地图的详细步骤

    在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/ ...

  10. Android百度地图之显示地图

    添加地图显示 一.在百度官网下载相关的SDK (网址:http://developer.baidu.com/map/sdkandev-download.htm) 解压下载好的BaiduMap_Andr ...

随机推荐

  1. WeChair Plus版项目介绍

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 团队名称 WeChair 这个作业要求在哪里 团队作业第一次:团队作业第一次(2) 这个作业的目标 项目介绍,项目修改 作业正文 ...

  2. 多语言工作者の十日冲刺<7/10>

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 团队进行Alpha冲刺--第七天(05.06) 作业正文 ...

  3. 深入浅出PyTorch（算子篇）

    Tensor 自从张量(Tensor)计算这个概念出现后,神经网络的算法就可以看作是一系列的张量计算.所谓的张量,它原本是个数学概念,表示各种向量或者数值之间的关系.PyTorch的张量(torch. ...

  4. 状压DP 从TSP问题开始入门哦

      一开始学状压DP难以理解,后来从TSP开始,终于入门了nice!!!! 旅行商问题 :    给定n个城市和两两相互的距离 ,求一条路径经过所有城市,并且路径达到最下仅限于; 朴树想法: 做n个城 ...

  5. 入门大数据---安装ClouderaManager,CDH和Impala,Hue，oozie等服务

    1.要求和支持的版本 (PS:我使用的环境,都用加粗标识了.) 1.1 支持的操作系统版本 操作系统 版本 RHEL/CentOS/OL with RHCK kernel 7.6, 7.5, 7.4, ...

  6. 缺少对公共可见类型或成员的XML注释

    最近突然心血来潮,想清理下代码,结果看到了一堆这样的警告——缺少对公共可见类型或成员“XXX”的 XML 注释: 其实要想取消上面的警告,仅仅需要在项目属性里找到生成页签里的”错误和警告“项,在禁止显 ...

  7. Animate.css的使用（基本使用附css文件下载地址）

    animate.css下载地址: https://pan.baidu.com/s/18ceucCU1loYiGo5OCOkJBg 最新下载地址: http://www.haorooms.com/upl ...

  8. Python之浅谈深浅拷贝

    目录 深浅拷贝 拷贝 浅拷贝 深拷贝 深浅拷贝 拷贝 s=['tim','age'] s2=s #这里的s2列表指向与s相同的id 当s2为s的拷贝对象时,s内的可变类型变化,s2变化;s内的不可变类 ...

  9. pycharm一直显示Process finished with exit code 0

    后来排查发现原来是解释器的问题我之前使用的解释器是pycharm提供的虚拟解释器#####如何查看解释器点file–>new projects 如果选择的是2就是使用了pycharm提供的虚拟解 ...

  10. python数据类型的72变

    输入数据的类型 input函数接收的数据默认为字符串类型 转换函数 通过转换函数实现接收其他类型的数据 1.接收整数:字符串→整型数据: int("整数格式的字符串") 2.接收小 ...