在vue项⽬中调⽤百度地图API及其基本⽤法
调⽤步骤
1. 申请百度地图密钥
2. 在index.html中添加百度地图JavaScript API接⼝
3. 在f.js配置⽂件中配置BMap
4. 创建vue⽂件map.vue，然后各种引⽤ 。。。。
⼀、申请百度地图密钥
JavaScript API v1.4以及以前的版本⽆序申请秘钥（ak），⾃v1.5版本开始需要先申请秘钥（ak），才可以使⽤，如需获取更⾼的配额，需要申请 认证企业⽤户。
链接：
在这⾥我遇到⼀个坑： 选择服务器端跟选择浏览器端密钥有所区别，⼤家按照⾃⼰的需求选，要是没选择正确后⾯会说你的百度密钥未授权使⽤地图API，那只需要重新申请⼀个密钥就是了，⽩名单我是直接填
（⽤来练习⽽已）。*
⼆、在index.html中添加百度地图JavaScript API接⼝
<script type="text/javascript" src="api.map.baidu/api?ak=yourkey&v=2.0&services=false"></script>
⼆、在f.js配置⽂件中配置BMap
entry: {
app: './src/main.js'
},
// 下⾯才是我们所要配置的
externals: {
'BMap': 'BMap',
'BMap_Symbol_SHAPE_POINT': 'BMap_Symbol_SHAPE_POINT'
},
注意：，在ports 中与entry平级；如果还有其他的，同样在下⾯引⼊就可以了，⽐如⾃定义覆盖物
BMap_Symbol_SHAPE_POINT等。（记得⼀定要需要重新 npm run dev才可以)
三、创建⽂件map.vue
1. 在组件中创建⼀个容器，⽤来显⽰百度地图（宽⾼最好都是100%）
<template>
// 注意⼀定要⽤到id选择器，后⾯创建地图实例⽤到
<div class="baidumap" id="allmap">
</div>
</template>
2. 在地图组件中import BMap，否则会出现“BMap undefined”，还有这个BMap_Symbol_SHAPE_POINT，因为是⽤“_”连字
符，会报错让你这个没有⽤驼峰命名。所以引⼊时，把这个连字符去掉就⾏了。
import BMap from 'BMap
import BMapSymbolSHAPEPOINT from 'BMap_Symbol_SHAPE_POINT'
3. 创建地图对象，在mounted⽣命周期中调⽤
mounted () {
this.baiduMap()
},
methods: {
baiduMap () {
var map = new BMap.Map('allmap') // 创建地图实例，这⾥⽤到了id选择器
var point = new BMap.Point(113.119538, 23.029158) // 创建点坐标
var marker = new BMap.Marker(point) // 创建标注
map.addOverlay(marker) // 将标注添加到地图中
百度api接口map.addControl(new BMap.NavigationControl()) // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()) // 添加⽐例尺控件
map.addControl(new BMap.OverviewMapControl()) // 添加缩略地图控件
//map.setMapStyle({ style: 'midnight' }) //地图风格
var localSearch = new BMap.LocalSearch(map);
var infoWindow = new BMap.InfoWindow('<p>佛⼭市</p>')
// ⿏标移上标注点要发⽣的事
marker.addEventListener('mouseover', function() {
this.openInfoWindow(infoWindow)
})
// ⿏标移开标注点要发⽣的事
marker.addEventListener('mouseout', function() {
//this.closeInfoWindow(infoWindow)
})
},
}
最后最后，把组件引⼊⽗组件就⼤功告成了。
** 红⾊框框内的就是我们添加的⼩控件，上⾯代码都有详细解说，我就不多说了。接下来再罗列⼀下⽤到的api基本功能 **
1. AndZoom⽅法创建地图，第⼀个参数可以是根据之前创建好的⼀个点为中⼼，创建出地图，
也可以根据城市地区的中⽂
名称创建地图。（如果拼写正确，可以根据城市的英⽂名称来创建）
2. AndZoom第⼆个参数是地图缩放级别，最⼤为19，最⼩为0。（但实际当缩⼩到3的时候就已经。。。）
3. BMap.Map⽅法创建地图时候需要⼀个容器(地图会根据容器的⼤⼩⾃动进⾏调整。)，填写相关容器的id。
关于地图⼤⼩：
可以通过map.setZoom();⽅法主动控制地图⼤⼩级别。
也可以通过设置ableScrollWheelZoom(true)；利⽤⿏标滚轮控制⼤⼩。
百度地图提供了⾮常丰富的功能空间共我们使⽤。
1. Control：控件的抽象基类，所有控件均继承此类的⽅法、属性。通过此类您可实现⾃定义控件。
2. NavigationControl：地图平移缩放控件，PC端默认位于地图左上⽅，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，
默认位于地图右下⽅。
3. OverviewMapControl：缩略地图控件，默认位于地图右下⽅，是⼀个可折叠的缩略地图。
4. ScaleControl：⽐例尺控件，默认位于地图左下⽅，显⽰地图的⽐例关系。
5. MapTypeControl：地图类型控件，默认位于地图右上⽅(地图，卫星，三维)。
6. CopyrightControl：版权控件，默认位于地图左下⽅。
7. GeolocationControl：定位控件，针对移动端开发，默认位于地图左下⽅。
效果图：
注意：当设置城市信息时，MapTypeControl的切换功能才能可⽤
地图事件：
百度地图API中的⼤部分对象都含有addEventListener⽅法，我们可以通过该⽅法来监听对象事件。
实例：
map.addEventListener("click", function(){
alert("您点击了地图。");
});
当我们不再希望监听事件时，可以将事件监听进⾏移除。每个API对象提供了removeEventListener⽤来移除事件监听函数。
map.addEventListener("click", functionA);
地图遮盖物:
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论