Vue中使用百度地图

安装

npm

$ npm install vue-baidu-map --save

cdn

<script src="/vue-baidu-map"></script>

在vue中引入百度地图

需要在main.js里全局注册

ak 需要在 百度地图开放平台 获取

import Vue from 'vue'import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {// ak 是在百度地图开发者平台申请的密钥ak: 'YOUR_APP_KEY'})

在组件中调用

<template><div class="about"><h1>百度地图简单的页面渲染</h1><div id="container"></div></div></template><style>#container {width: 800px;height: 600px;}</style><script>export default {data(){return {map:null,}},mounted() {this.initMap();this.map.addEventListener("click",e=>{//这里要使用 window.BMapGL 不然会报错var p = new window.BMapGL.Point(e.latlng.lng,e.latlng.lat);// 创建一个标注var m = new window.BMapGL.Marker(p);// 放入到地图中this.map.addOverlay(m); })},methods: {initMap() {// 新建一个百度地图的实例this.map = new window.BMapGL.Map("container");// 创建地图点(地图中心位置)var point = new window.BMapGL.Point(116.404, 39.915);// 设置地图的中心,和缩放级别this.map.centerAndZoom(point, 15);this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放}}}</script>

效果

vue百度地图更多使用详见

https://dafrok.github.io/vue-baidu-map/#/zh/start/usage