vue-baidu-map添加覆盖物-点

vue-baidu-map 简单封装了
components/index.vue

引用vue插槽方便使用，也可直接插入

  <slot></slot>

<!--* @Description: 百度地图组件* @Author: Dragon* @Date: 2020-12-31 13:18:38* @LastEditTime: 2020-12-31 16:19:24* @LastEditors: Dragon
--><template><div class="wrap-map"><baidu-mapclass="map":center="center":zoom="zoom":map-click="mapClick":double-click-zoom="doubleClickZoom":scroll-wheel-zoom="scrollWheelZoom":inertial-dragging="inertialDragging"@click="handleMapClick"@ready="readyLoad"@moveend="moveend"@zoomend="zoomend"><!-- 切换地图类型控件 --><bm-map-type anchor="BMAP_ANCHOR_TOP_LEFT"  :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" /><!-- 比例尺 --><bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT" /><!-- 定位 --><bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation><!-- 覆盖物-点(集合) --><slot></slot></baidu-map></div>
</template><script>export default {props: {center: {                // 中心点type: Object,default: () => {},},zoom: {                  // 缩放等级type: Number,default: 10,},mapClick: {              // 是否允许点击 该项仅在地图组件挂载时加载一次type: Boolean,default: true,},doubleClickZoom: {       // 是否允许双击缩放type: Boolean,default: true,},scrollWheelZoom: {       // 是否允许鼠标滚轮缩放type: Boolean,default: true,},inertialDragging: {      // 是否允许惯性拖拽type: Boolean,default: true,}},data() {return {map: null,}},methods: {// 挂载readyLoad({ BMap, map }) {this.map = BMap;},// 地图移动结束时触发此事件moveend(e) {console.warn(e, '移动结束')},// 地图更改缩放级别结束时触发触发此事件zoomend(e) {console.warn(e, '缩放级别结束')},// 单击handleMapClick(e) {console.warn(e.point, '鼠标单击')},}
}
</script><style lang="scss">
.wrap-map {width: 100%;height: calc(100vh - 90px);;.map {width: 100%;height: 100%;}/*隐藏百度logo和copyright*/.anchorBL a,.BMap_cpyCtrl {display: none;}.BMap_scaleCtrl {inset: auto auto 18px 10px !important;}
}
</style>

Marker.vue
加个 $nextTick延迟更新

<!--* @Description: 覆盖物-点* @Author: Dragon* @Date: 2020-12-31 13:28:36* @LastEditTime: 2020-12-31 16:21:04* @LastEditors: Dragon
-->
<template><baidu-map :center="mapCenter" :zoom="zoom"><template><div v-if="markers.length > 0"><bm-markerv-for="(item, index) in markers":key="index":position="item.point":dragging="true":icon="!item.warning? {url: require('@/assets/person_1.png'),size: { width: 50, height: 50 },}: {url: require('@/assets/warning.gif'),size: { width: 50, height: 50 },}"><bm-label:content="item.name":label-style="{padding: '2px 5px',color: 'red',fontSize: '8px',borderRadius: '10%',}":offset="{ width: 15, height: -15 }"/></bm-marker></div></template></baidu-map>
</template><script>
import BaiduMap from "./components";
export default {components: { BaiduMap },data() {return {mapCenter: {lng: "118.828094",lat: "32.09205",},zoom: 12,markers: [],};},created() {this.$nextTick(()=> {this.markers = [{name: "张三",point: { lng: 118.810559, lat: 32.208219 },warning: false,},{name: "王五",point: { lng: 118.666255, lat: 32.809396 },warning: false,},{name: "李四",point: { lng: 116.72879, lat: 32.397193 },warning: false,},{name: "小强",point: { lng: 118.834131, lat: 32.085932 },warning: true,},{name: "Dragon",point: { lng: 40.812057, lat: 59.221284 },warning: false,},];})},
};
</script>

小白整理，不喜勿喷

vue-baidu-map添加覆盖物-点相关推荐

Vue Baidu Map 实现Vue版本地图轨迹回放（App端）
Vue Baidu Map 地图轨迹回放 Vue Baidu Map 简介 Vue Baidu Map 安装 1.NPM 2.CDN Vue Baidu Map 引用 BmlLushu 引用 BmlL ...
vue baidu map之获取选中点的经纬度
需求:在vue项目中通过点击按钮,弹出百度地图的弹框,用户选择地图上的点或者通过搜索关键字选点,点击确认关闭弹窗得到经纬度效果: vue baidu map api链接 : https://da ...
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 ...
百度地图之添加覆盖物
本文主要讲解如何实现在百度地图上添加覆盖物 1.承载数据的实体我们从服务器返回的数据部分,最终可能是个Json数组,我们需要转换为实体集合,即下面的Info.java 我直接在实体类中声明了一个静态 ...
android 百度地图系列之添加覆盖物和覆盖物的点击事件
转自:http://blog.csdn.net/jing__jie/article/details/51800042 之前讲了百度地图定位和地图基本操作,这篇博客讲一下,怎么去给地图添加覆盖物,并当点 ...
百度地图之添加覆盖物并响应事件
随时随地技术实战干货,获取项目源码.学习资料,请关注源代码社区公众号(ydmsq666) 本文中将介绍在百度地图上添加覆盖物的功能.响应点击功能和弹出pop功能,代码来自百度Demo: Activit ...
百度地图 ( 二 ) 添加覆盖物
3.增加覆盖物有如下几种覆盖物: Overlay:覆盖物的抽象基类,所有的覆盖物均继承此类的方法. Marker:标注表示地图上的点,可自定义标注的图标. Label:表示地图上的文本标注,您可以自 ...

vue-baidu-map添加覆盖物-点

vue-baidu-map添加覆盖物-点相关推荐

最新文章

热门文章