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引用:

放置图片了,网上随便搜搜就可以了

 

 

posted @ 2020-03-02 14:24  懒噗噗的博客小家  阅读(501)  评论(0编辑  收藏  举报