vue 调用百度地图API生成地图
1.项目根目录下下载百度地图插件
npm install vue-baidu-map –save
2.在首页index.html中引入百度地图:
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=秘钥"></script>
申请密钥地址 :http://api.map.baidu.com/lbsapi/createmap/index.html
3.在显示地图的组件中 template 中:
<div class="baidumap" id="allmap"></div> //地图的容器
4.在显示地图的组件中 script 中:
<script> export default { name: ‘Bmap‘, components: { }, mounted() { this.baiduMap() }, methods: { baiduMap() { var map = new BMap.Map(‘allmap‘) var point = new BMap.Point(115.043096, 38.592132) // 创建点坐标 map.centerAndZoom(point, 12) // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放 map.addControl(new BMap.NavigationControl()) map.addControl(new BMap.ScaleControl()) map.addControl(new BMap.OverviewMapControl()) map.addControl(new BMap.MapTypeControl()) //map.setMapStyle({ style: ‘midnight‘ }) //地图风格 var marker = new window.BMap.Marker(point) // 创建标注 map.addOverlay(marker) // 将标注添加到地图中 //提示信息 var infoWindow = new BMap.InfoWindow(‘这是提示信息‘) // 鼠标移上标注点要发生的事 marker.addEventListener(‘mouseover‘, function() { this.openInfoWindow(infoWindow) }) // 鼠标移开标注点要发生的事 marker.addEventListener(‘mouseout‘, function() { //this.closeInfoWindow(infoWindow) }) } } }</script>
5.在显示地图的组件中 style 中改变一下默认样式:
.baidumap { width: 1000px; height: 500px; border: 1px solid red; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } /* 去除百度地图版权那行字 和 百度logo */ .baidumap > .BMap_cpyCtrl { display: none !important; } .baidumap > .anchorBL { display: none !important; }
完整的代码:
<template> <div class="baidumap" id="allmap"></div> </template> <script> export default { name: ‘Bmap‘, components: { }, mounted() { this.baiduMap() }, methods: { baiduMap() { var map = new BMap.Map(‘allmap‘) var point = new BMap.Point(115.043096, 38.592132) // 创建点坐标 map.centerAndZoom(point, 12) // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放 map.addControl(new BMap.NavigationControl()) map.addControl(new BMap.ScaleControl()) map.addControl(new BMap.OverviewMapControl()) map.addControl(new BMap.MapTypeControl()) //map.setMapStyle({ style: ‘midnight‘ }) //地图风格 var marker = new window.BMap.Marker(point) // 创建标注 map.addOverlay(marker) // 将标注添加到地图中 //提示信息 var infoWindow = new BMap.InfoWindow(‘这是提示信息‘) // 鼠标移上标注点要发生的事 marker.addEventListener(‘mouseover‘, function() { this.openInfoWindow(infoWindow) }) // 鼠标移开标注点要发生的事 marker.addEventListener(‘mouseout‘, function() { //this.closeInfoWindow(infoWindow) }) } } } </script> <style> .baidumap { width: 1000px; height: 500px; border: 1px solid red; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } /* 去除百度地图版权那行字 和 百度logo */ .baidumap > .BMap_cpyCtrl { display: none !important; } .baidumap > .anchorBL { display: none !important; } </style>
相关推荐
Luckyunyun 2020-08-15
染血白衣 2020-11-16
SAMXIE 2020-11-04
一个智障 2020-11-15
学习web前端 2020-11-09
yiranpiaoluo 2020-11-04
lxhuang 2020-11-03
88274956 2020-11-03
82387067 2020-11-03
huangliuyu00 2020-10-29
sichenglain 2020-10-27
Dayer 2020-10-27
小马的学习笔记 2020-10-23
liuweiITlove 2020-10-14
kjyiyi 2020-10-10
fanjunjaden 2020-10-09
zhyue 2020-09-28
huangliuyu00 2020-09-24