vue 项目使用通过经纬度显示地图

传入经纬度和缩放值

<template><baidu-mapclass="bm-view"ak='wV9oGUUNbPnvGpNVruQt5KbccvWjTXIo':scroll-wheel-zoom="true":center="center":zoom="zoom"@ready="handler"><bm-marker :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" :icon="{url: icon, size: {width: 30, height: 30}}"></bm-marker></baidu-map>
</template><script>
// import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import {BaiduMap, BmMarker} from 'vue-baidu-map'
export default {name: 'Map',components: { BaiduMap, BmMarker },props: {lng: {default: ''},lat: {default: ''},zoom:{type:Number ,default: 16}},data () {return {icon: require('./images/地图定位.png'),center: {lng: 0, lat: 0},}},methods: {handler ({BMap, map}) {console.log(BMap, map)let mapStyle= {style:'midnight'}map.setMapStyle(mapStyle);this.center.lng = this.lngthis.center.lat = this.latthis.zoom = this.zoom || 16}}
}
</script><style lang="less" scoped>
.bm-view {width: 100%;height: 100%;/*height: 300px;*//deep/ .BMap_cpyCtrl{ display: none !important;}
}</style>

vue 项目使用通过经纬度显示地图相关推荐

记录在Vue项目里面使用腾讯地图
目录前言一.异步引入SDK 1.封装初始化方法. 2.引入并使用. 二.腾讯地图marker使用 1.效果预览 2.代码实现三.在地图上画线并测量距离 1.效果预览 2.代码实现前言本文主要 ...
【vue项目使用echarts实现区域地图绘制，且可点击单独区域】
vue项目使用echarts实现区域地图绘制,且可点击单独区域 - 菜鸟程序员的总结 - 博客园
记录一次vue项目引入GoogleMap API进行地图定位
背景公司项目进行国际化处理,需要将定位信息地图替换成谷歌地图. 一.Google 账号准备用谷歌账户登录谷歌云平台 https://cloud.google.com/maps-platform/? ...
vue项目使用ECharts的中国地图，设置地图不同板块的颜色以及动态显示效果
本篇讲述在vue中使用echarts的中国地图,以及对不同板块进行渐变色的设置. 效果图如下: 实现上图效果步骤如下: 确保项目中下载了echarts,然后在main.js中引用echarts imp ...
vue项目在IE中显示空白，报错：vuex requires a Promise polyfill in this browser
问题描述 vue项目在非IE内核的浏览器中显示正常,在IE内核浏览器中报错,并显示空白.报错如下: SCRIPT5022: [vuex] vuex requires a Promise polyfi ...
根据经纬度显示地图轨迹
后端代码 public boolean saveCarGPSData(CarGPSReqVo carGPSReqVo) {Map<String,String> params=new Has ...
在vue项目中使用AntV L7地图下钻，异步调用不重复生成
AntV L7 地图下钻的踩坑生成实现地图下钻.样式.数据异步调用生成,以及细节. ==注释后有'@#@#*'为重要== ==如有不对请指出== 1.安装AntV L7以及相关的组件引用 2.在da ...
vue项目中通过echarts实现地图路径展示
首先先定义装地图的盒子,还需先引入china.js:新建一个map-options.js如下 //map-option.js var cities = [{"name": &quo ...
vue项目启动后终端显示localhost和ip访问地址
1.package.json文件下"scripts"的"dev"值后新增 --host 0.0.0.0" "dev": " ...
WebGis——Pixi开发vue项目之创建pixi应用并显示一个精灵（一）
Pixi中文网:Pixi.js中文网使用vue-cli初始化一个vue项目我就不多说了,在我的这边文章里已经写过: 从零开始vue项目使用cesium开发三维地图(一)_yinzisang的博客-C ...

vue 项目使用通过经纬度显示地图

vue 项目使用通过经纬度显示地图相关推荐

最新文章

热门文章