文档章节

vue & 百度地图:使用百度地图

o
 osc_x4h57ch8
发布于 2018/04/24 13:24
字数 427
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

vue input 获取焦点

1、首次加载 autofocus="autofocus" #autofocus 属性规定当页面加载时 input 元素应该自动获得焦点。<input type="text" class="rename_box" v-model="current_edit_text" @input="chang......

横着走的螃蟹
31分钟前
15
0
socket链接(底层)

客户端 #socket.socket表明协议并生成链接实例client #client.connect链接到服务器client #循环输入while true #输入的消息 msg = input #client.send(msg.encode())发送信息只能发送比特流进...

onedotdot
38分钟前
18
0
在线讲解一分快3和值怎么计算的

在线讲解一分快3和值怎么计算的老师:【扣 677~90~572】1.The past is gone and static. Nothing we can do will change it. Thefuture is before us and dynamic. Everything we do will af......

yiren081
38分钟前
23
0
hbase学习

简介 数据存储模型及关系型数据库的区别 一般都是牺牲一致性, 最终达到最终一致性 HBase 概念 区别 基础架构 HBASE 原理和操作 写流程 预写入会写入HLog 里面, 通过HLog 来保证数据不丢失 ...

之渊
39分钟前
15
0
网上彩票为什么会有人带你靠谱吗61861585

老师叩:61861585使用默认的随机源随机排列指定的列表。(打乱list中的数据)sort(List<T> list) 进行排序一个人,身边有多少人,就有多大的世界,有什么样的人,就有什么样的世界。这些人素养...

jiukan49
41分钟前
32
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部