Vue中百度地图（vue-baidu-map）的使用

1、开始

vue-map-baidu：https://dafrok.github.io/vue-baidu-map/#/zh/start/installation
百度地图开发者平台申请密钥详见： http://lbsyun.baidu.com/apiconsole/key */

2、bm-marker和bm-info-window实现定位和定位详情弹窗功能

拾取坐标系统详见：http://api.map.baidu.com/lbsapi/getpoint/index.html

<template><baidu-mapclass="bm-view":center="{lng: 116.383141, lat: 39.913607}"zoom="12":scroll-wheel-zoom="true"><bm-markerv-for="(marker,index) of markers":key="index":position="{lng: marker.lng, lat: marker.lat}"@click="lookDetail(marker)":icon="{url: 'http://api0.map.bdimg.com/images/marker_red_sprite.png', size: {width: 100, height: 100}}"><bm-info-window:title="infoWindow.name":position="{lng: infoWindow.lng, lat: infoWindow.lat}":show="marker.showFlag"@close="infoWindowClose(marker)"></bm-info-window></bm-marker><!--比例尺控件--><bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale><!--缩放控件--><bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation></baidu-map>
</template><script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmScale from 'vue-baidu-map/components/controls/Scale'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'export default {name: "Atlas",components:{BaiduMap,BmScale,BmNavigation,BmMarker,BmInfoWindow,},data(){return{// 地图标记点markers:[{lng: '116.383141',lat: '39.913607',name: '信息窗口1',showFlag:false},{lng: '116.383141',lat: '39.900000',name: '信息窗口2',showFlag:false},],infoWindow:{},mapStyle: {styleJson: [{"featureType": "all","elementType": "geometry","stylers": {"hue": "#007fff","saturation": 89}},{"featureType": "water","elementType": "all","stylers": {"color": "#ffffff"}}]}}},methods:{// 点击点坐标赋值lookDetail(marker){marker.showFlag = true;this.infoWindow = marker;},// 关闭弹窗infoWindowClose(marker) {marker.showFlag = false},}
}
</script><style scoped>
.bm-view{width: 100%;height: 87vh;
}
</style>

其中markers可以是使用vue中的axios从后端获取的坐标信息，也可以是使用vue中的axios从data.json中获取的坐标信息

3、效果

Vue中百度地图（vue-baidu-map）的使用相关推荐

vue中百度地图使用及自定义点聚合样式
百度地图使用及点聚合功能由于后台固定了百度地图,百度地图和高德地图经纬度转换有次数限制,不能满足项目的正常运行,所以切换了百度地图,下面对使用中遇到的问题进行记录: 安装及使用百度地图: npm i ...
vue中百度地图标注
npm install vue-baidu-map --save // main.js中引用,注册全局组件 import BaiduMap from 'vue-baidu-map'Vue.use(Ba ...
vue中百度地图的图形绘制
说明由于 MVVM 数据驱动视图的特性,地图中的图形绘制不再需要使用 BMapLib.DrawingManager 等第三方工具库来实现. 示例绘制折线代码 <baidu-map clas ...
html引入百度地图报错,vue引入百度地图BMapGL，或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...
vue使用百度地图获取位置信息
vue使用百度地图获取位置信息最近再做H5页面,就一个单页面,进来的时候,要获取地理位置,上代码 1.使用srcipt不受同源策略的影响,来获取百度api 写在了一个bmap.js里面,onBMap ...
vue使用百度地图3.0,使用JavaScriptAPI版,聚合点,个性化地图切换卫星地图
为什么用JavaScript版,因为用vue的百度map有问题,地图显示不全,之前还以为是我的问题,结果去了官网发现官网的地图都是显示不全,也不知道咋回事,不知道现在修好了没,所以只好用JavaScr ...
vue整合百度地图（关键字检索）
百度地图文章目录百度地图一.申请百度地图的密钥二.官方示例三.使用vue整合百度地图步骤说明 3.1 效果图: 3.2 方式一 vue脚手架2.0版本引用(不推荐): 3.3 方式二封装成 ...
Vue+Echarts+百度地图小例子
刚学完Echarts后,看到一些官方例子,粘贴代码下来却实现不了相应的效果,经过一番了解,发现还要引入百度地图,记录详细过程如下. 1.安装echarts(使用3.x,4.x) npm install ...
Vue+Echarts+百度地图API
Vue+Echarts+百度地图API 不容易啊,又注册了一个地图账户使用npm安装方式去百度地图官网申请key,也就是地图API密钥AK 在vue项目的public文件夹中的index.html ...

Vue中百度地图（vue-baidu-map）的使用

1、开始

2、bm-marker和bm-info-window实现定位和定位详情弹窗功能

3、效果

Vue中百度地图（vue-baidu-map）的使用相关推荐

最新文章

热门文章