在vue中实现百度地图展示

最新推荐文章于 2024-09-10 19:01:04 发布

Polarisone

最新推荐文章于 2024-09-10 19:01:04 发布

阅读量2.2k

点赞数

分类专栏： vue+百度地图

本文链接：https://blog.csdn.net/Polarisone/article/details/98767071

版权

本文档介绍如何在Vue项目中实现百度地图的显示，重点包括获取百度地图API密钥并在index.html中正确引入，以及如何全局创建和自定义地图显示，如去除logo并调整背景颜色。

摘要由CSDN通过智能技术生成

在vue中实现百度地图展示

一:获取百度秘钥

都要写在index.html页面,否则无效

1申请一个百度秘钥在index.html中写,在其他vue里写会报错,而且实现不出来
2.如果不想百度地图的logo出来可以加上第9行

> npm install echarts -S

二: 创建地图

全局引入

Hello.vue

给地图创建一个div,给他个固定的宽高
<div id="content-container" style="padding-bottom:0;padding-top:0;width=800px;height=800px">
    <div id="map-container" class="map"></div>
</div>

  export default {
   
    data(){
   
      return {
   }
    }, 
     mounted(){
   
        this. map() //函数调用
     },
     methods:{
   
     //绘制地图
      map(){
   
	// 百度地图API功能
        var map = new BMap.Map("map-container");//获取id
        var point = (new BMap.Point(113.64964385, 34.7566100641));
        map.centerAndZoom(new BMap.Point(113.64964385, 34.7566100641), 12);  // 初始化地图,设置中心点坐标和地图级别
        // map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
        // map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
        map.enableScrollWheelZoo