Vue+Baidu Map开发（一）

最新推荐文章于 2024-09-23 17:27:56 发布

拳击俱乐部

最新推荐文章于 2024-09-23 17:27:56 发布

阅读量397

点赞数

分类专栏：百度地图文章标签： javascript css vue.js html5 css3

本文链接：https://blog.csdn.net/qq_42483780/article/details/108275089

版权

百度地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

VUE+Vue Baidu Map开发（一）

1、打开终端输入 npm install vue-baidu-map --save
2、在百度开发者平台申请一个令牌链接如下 JavaScript API GL
3、在main点js中引入 import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  	// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
 	   ak: 'XXXXXXXXXXXXXXXXXXXXX'
})

4、在index.html中加上这句话
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=填写刚刚申请到的key">
标注：2.0版本和3.0版本有些不同的地方，这里建议大家使用3.0版本
5、新创建一个vue页面

<template>
	<div id="bdMap" style="width: 100%; height: 1080px;"></div>
</template>

mounted() {
  this.$nextTick(()=>{
    this.drawMap()
  })
},
methods(){
 	drawMap () {
        let map = new window.BMap.Map('bdMap', {})
        map.setCurrentCity('烟台')
        map.centerAndZoom(new window.BMap.Point(121.433214, 37.457566), 12)
        map.enableScrollWheelZoom()
        // 如下两项推荐设置，否则没有对应级别的瓦片会出现空白
        map.setMinZoom(8)
        map.setMaxZoom(15)
      },
}

方法2：

<baidu-map class="bm-view" id="map_box" :center="{lng: 121.433214, lat: 37.457566}" :zoom="10":scroll-wheel-zoom="true">
  <bm-marker :position="{lng: 121.433214, lat: 37.457566}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" /> 
  <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
</baidu-map>