- 百度地图API引用
index.html需要先引用API
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
- 地图组件中HTML部分
<div id="Bmap"></div>
- STYLE在JS中data里定义，并在html使用定义好的样式
style:
data() {
return {
MapStyle: { //地图样式
width: '100%',
height: '100%',
}
}
}
html: <div id="Bmap" :style="MapStyle"></div>
- 地图组件中JS部分
<script>
// 百度地图API功能
//全局创建Map实例
let map = new BMap.Map('Bmap');
//全局创建坐标对象
let point;
//全局标注对象
let marker;
//标注的新图标
let icon = new BMap.Icon("自定义图片地址", new BMap.Size(标注宽,高),{
imageSize : new BMap.Size(标注图片宽,高)
})
//标注点击后修改的新图标
let newicon = new BMap.Icon("自定义图片地址", new BMap.Size(标注宽,高),{
imageSize : new BMap.Size(标注图片宽,高)
})
export default {
name: 'Bmap',
methods: {
track () {
point = new BMap.Point(116.404, 39.915);
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(point,12);
//右上角，仅包含平移和缩放按钮
let top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});
//添加地图类型控件
map.addControl(top_right_navigation);
//开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint("北京市海淀区上地10街", function(point){
if (point) {
// 将标注添加到地图中
map.addOverlay(new BMap.Marker(point));
//创建标注对象,并修改marker的新图标
marker = new BMap.Marker(point,{icon: icon});
//给标注物注册事件
marker.addEventListener("click",attribute(point));
}else{
alert("您选择地址没有解析到结果!");
}
}, "北京市");
},
//标注物注册事件
attribute (e){
//获取marker的位置
alert("marker的位置是" + e.lng + "," + e.lat);
//设置marker样式
marker.setIcon(newicon)
//设置marker跳动的动画
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
}
}
}
</script>
未点击标注前的地图展示效果
Paste_Image.png
点击标注后的地图展示效果
Paste_Image.png
