webpack+vue的百度地图插件和引入jquery插件
引入百度地图:
第一步:安装插件
$ cnpm install vue-baidu-map --save(使用国内淘宝镜像)
第二步:在main.js中引入百度密钥
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, { ak: '你申请的key'})第三步:使用
<template>
<baidu-map id="allmap" :center="center" :zoom="zoom" @ready="handler" style="height:1080px" @click="getClickInfo" :scroll-wheel-zoom='true'>
</baidu-map>
</template>
<script>
export default {
name: 'TestBaiDu',
data () {
return {
center: {lng: 109.45744048529967, lat: 36.49771311230842},
zoom: 13
}
},
methods: {
handler ({BMap, map}) {
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
},
getClickInfo (e) {
console.log(e.point.lng)
console.log(e.point.lat)
this.center.lng = e.point.lng
this.center.lat = e.point.lat
}
}<br>}
jquery引用:
放置图片了,网上随便搜搜就可以了


浙公网安备 33010602011771号