初识vue-baidu-map

地图的使用已是现在大数据时代的趋势所在，学会使用地图是必不可少的，今天就来谈谈如何使用百度的地图，在vue中我们通常使用百度地图的二次封装vue-baidu-map。

<template><div id="map"><baidu-map class="map" :center="center" :zoom="17" :scroll-wheel-zoom="true" @ready="handler"><!-- 点坐标 --><bm-marker :position="center"> </bm-marker><!-- 折线 --><bm-polyline :path="path" stroke-color="#00FFFF" :stroke-opacity="0.5" :stroke-weight="12"></bm-polyline><!-- 路书，行驶轨迹 --><bml-lushu@stop="stop":path="path":icon="icon":play="play":speed="100":autoView="true":content="content":rotation="true"></bml-lushu><!-- 信息窗体 --><bm-info-window:position="position":show="isShow":title="`<p style=color:blue;cursor:pointer>${form.name}</p>`":closeOnClick="false"@clickclose="isShow = false"class="infoWindow"@click.native="handleInfoClick"><ul><li>位置：{{ form.location }}</li><li>所属地区：{{ form.area }}</li></ul></bm-info-window></baidu-map></div>
</template>

import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import { BmlLushu } from "vue-baidu-map";
import { getAverage } from "@/utils/methods";
export default {data() {return {center:{ lng: 118.678105, lat: 31.954918},position: {},form: {},isShow: false,play: true,icon: {url: "http://api.map.baidu.com/library/LuShu/1.2/examples/car.png",size: { width: 52, height: 26 },opts: { anchor: { width: 27, height: 13 } },},path: [],content: "",};},components: { BaiduMap, levelTree ，BmlLushu },mounted() {this.isShow = true;this.path = [{ lng: 118.671570, lat: 31.950587 },{ lng: 118.684250, lat: 31.959605 },];const lng = getAverage(this.path, "lng");const lat = getAverage(this.path, "lat");this.position = {...lng,...lat,};//点击信息窗体触发this.$nextTick(params => {document.getElementsByClassName("BMap_bubble_title")[0].onclick = this.handleInfoClick;});},methods: {//传递信息给父组件handleInfoClick() {this.$emit("handleInfoClick", this.form);},stop() {this.play = false;this.content = "到达了";},// 初始化handler({ BMap, map }) {this.map = map;// 创建标注this.map.setMapStyleV2({ styleId: "1c7acffbfbadbf927ec1b3453f059e90" });this.content = "出发了";}},
};

#map {height: calc(100vh - 152px);position: relative;/*去除水印*/::v-deep .anchorBL {display: none;}.infoWindow {cursor: pointer;li {font-size: 14px;line-height: 1.5;}}
}
.map {width: 100%;height: 100%;
}

初识vue-baidu-map相关推荐

vue baidu map之获取选中点的经纬度
需求:在vue项目中通过点击按钮,弹出百度地图的弹框,用户选择地图上的点或者通过搜索关键字选点,点击确认关闭弹窗得到经纬度效果: vue baidu map api链接 : https://da ...
Vue Baidu Map 实现Vue版本地图轨迹回放（App端）
Vue Baidu Map 地图轨迹回放 Vue Baidu Map 简介 Vue Baidu Map 安装 1.NPM 2.CDN Vue Baidu Map 引用 BmlLushu 引用 BmlL ...
Vue中使用百度地图Vue Baidu Map(vue-baidu-map)
最近负责的一个vue项目中需要调用百度地图api做标记打点的需求,记录一下: vue-baidu-map 官方地址一.插件的安装 1.npm 安装 $ npm install vue-baidu-m ...
Vue Baidu Map组件：点、线、多边形、圆形、撤销、返回
话不多说,直接上代码: 参考官网代码改编:https://dafrok.github.io/vue-baidu-map/#/zh/guide/painting 效果图 index.vue <te ...
Vue中用 Vue Baidu Map 绘制地图
1.先贴上官网案例 https://dafrok.github.io/vue-baidu-map/#/zh/guide/painting 官网的东西,没有百度地图开放平台上面的东西齐全,考虑到vue ...
渣渣枫初识Vue与Element
渣渣初学Vue与Element 一.Vue 1.初识Vue 2.Vue的入门 3.Vue入门升级 4.小结二.Vue常用指令 1.常用指令 2.文本插值 3.绑定属性 4.条件渲染 5.列表渲染 6 ...
Vue2（一）：初识Vue、模板语法、数据绑定、el和data的两种写法、MVVM、数据代理、事件
Vue2学习笔记:第一章一.初识Vue 1. Vue的特点 2. Vue实例中的el和data 3.总结二.模板语法 1.插值语法 2.指令语法三.数据绑定 1.单向数据绑定(v-bind) 2 ...
Google map 和Baidu map搜索目标地点周边
0. 引言本文主要是总结之前项目中的地图需求: 1.根据后端返回的location(坐标)在地图上marker. 2.可以搜索出该点附近的景点,酒店,餐厅等周边.(需要在地图上marker出来) 3 ...
01 【Vue简介初识Vue 模板语法和数据绑定】
1.Vue简介 1.1官网英文官网中文官网 1.2介绍与描述 Vue 是一套用来动态构建用户界面的渐进式JavaScript框架 ○构建用户界面:把数据通过某种办法变成用户界面 ○渐进式:Vue可 ...
分析初识vue小案例
前言我们已经写好了一个案例:初识vue小案例接下来我们就分析初识vue小案例容器和vue实例是一一对应的! 容器和vue实例应该是一一对应的,不允许出现一对一或者一对多下面是一个一个容器对多个 ...

初识vue-baidu-map

初识vue-baidu-map相关推荐

最新文章

热门文章