vue-baidu-map
官网地址：https://dafrok.github.io/vue-baidu-map/#/zh/index
记录一下在vue中使用npm下载使用百度地图ＡＰＩ的过程
１.安装
npm install vue-baidu-map --save
2.全局注册
import Vue from 'vue' import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ ak: 'YOUR_APP_KEY' })
3.在vue文件中使用
template
<template> <div> <baidu-map class="bm-view" :center="{lng: 116.404, lat: 39.915}" :zoom="15" :scroll-wheel-zoom="true" @zoomend="syncCenterAndZoom" :double-click-zoom="true" > <!-- 缩放控件 --> <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale> <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation> <!-- 点聚合 --> <!-- <bml-marker-clusterer :averageCenter="true"> --> <!-- <bm-marker :position="position" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" :icon="{url: '/huoche.png', size: {width: 300, height: 157}}" >--> <bm-marker v-for="marker of markers" :key="marker.code" :dragging="false" :z-index="4" :position="{lng: marker.lng, lat: marker.lat}" :icon="imgInfo" ></bm-marker> <!-- </bml-marker-clusterer> --> </baidu-map> </div> </template>
script
<script> //引入聚合点插件 import { BmlMarkerClusterer } from 'vue-baidu-map' export default { name: 'Baidu', components: { BmlMarkerClusterer }, data() { return { zoom: 3 markers: [ { lng: 116.404, lat: 39.915 }, { lng: 116.504, lat: 39.915 }, { lng: 116.604, lat: 39.915 }, { lng: 116.704, lat: 39.915 }, { lng: 116.804, lat: 39.915 } ], imgInfo:{url: '/huoche128.png', size: {width: 100, height: 107}} } }, methods: { handler({ BMap, map }) { console.log(BMap, map) this.center.lng = 116.404 this.center.lat = 39.915 this.zoom = 15 }, syncCenterAndZoom(e) { console.log(e) console.log(e.target.getZoom()) this.zoom = e.target.getZoom(); if(this.zoom < 10){ this.imgInfo.url="/huoche.png" } } } } </script>
来源：博客园
作者：神经质少女爱代码
链接：https://www.cnblogs.com/blog-zy/p/11504738.html