html百度地图和vue cli百度地图的使用

最新推荐文章于 2023-12-06 16:20:03 发布

旧城空巷旧心

最新推荐文章于 2023-12-06 16:20:03 发布

阅读量343

点赞数

分类专栏：百度地图文章标签： vue html5

本文链接：https://blog.csdn.net/qq_34451947/article/details/112277715

版权

百度地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原生百度地图的使用（若有错误，欢迎指教-。- 共同进步）

第一步先去百度地图官网 申请一个
然后在页面的head 里面直接引入 定义一个容器作为百度地图的容器

开发者密钥申请地址

先确定自己的需求在引入版本

最新的3.0不支持百度地图3维模式  
1.0webGl 支持 但是又不支持3.0的一些开源库 而且使用方法有轻微区别  (ps : 也可以自己改百度地图源码让3.0开源库的工具在1.0使用，后期会说)
实例化方式也不一样

	
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>地图展示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
    body,
    html,
    #container {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }
    .info {
        z-index: 999;
        width: auto;
        min-width: 22rem;
        padding: .75rem 1.25rem;
        margin-left: 1.25rem;
        position: fixed;
        top: 1rem;
        background-color: #fff;
        border-radius: .25rem;
        font-size: 14px;
        color: #666;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }
    </style>
   <script src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
</head>
<body>
    <div class = "info">最新版GL地图命名空间为BMapGL, 可按住鼠标右键控制地图旋转、修改倾斜角度。</div>
    <div id="container"></div>
</body>
</html>
<script>
//百度地图1.0的引入方式 实例化为BMapGL
//var map = new BMapGL.Map('container'); // 创建Map实例
//map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
//map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
//2.0 3.0的引入方式
  var mp = new BMap.Map("container");
  mp.centerAndZoom(new BMap.Point(116.3964,39.9093), 10);
  mp.enableScrollWheelZoom();
</script>

vue cli 使用百度地图

一. 使用vue-baidu-map

网址地址
百度地图官方出品

npm i --save vue-baidu-map

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
 
Vue.use(BaiduMap, {
  /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
  ak: '您的密钥'
})

二.直接在index.html 里面引入原生

此方法不推荐，因为整个项目所有页面都会跑一边百度api

//ps  若是vue cli 做了校验  当使用一些百度地图的常量 会cli报错   如控件的位置等
   <script src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

三.单页面引入原生

创建一个mapload.js

export default function loadBMap(ak) {
    return new Promise(function(resolve, reject) {
        if (typeof BMapGL !== 'undefined') {
            resolve(BMapGL)   //若有常量检测报错 将其再次抛出即可
            return true
        }
        window.onBMapCallback = function() {
            resolve(BMapGL)   //若有常量检测报错 将其再次抛出即可
        }
        let script = document.createElement('script')
        script.type = 'text/javascript'
        script.src =
            'http://api.map.baidu.com/api?v=3.0&ak=' + ak + '&callback=onBMapCallback'
        script.onerror = reject
        document.head.appendChild(script)
    })
}

.vue 页面使用

 import loadBMap from './loadMap.js'; 
 mounted() {
		this.initMap();
	},
		methods: {
 initMap() {
			loadBMap('Y4c4V1qe4099ylBHCAn2Np4ulhWuRwUP')
				.then(() => {
					let that = this;
					// 百度地图API功能  that._map  map的实例 用于之后的操作  data里面定义
					that._map = new BMapGL.Map('allmap'); // 创建Map实例

					//添加地图类型控件
					that._map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

					that._map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
					that._map.setHeading(45); //setHeading(number) //设置地图旋转角度
					that._map.setTilt(60); //setTilt(number) //设置地图的倾斜角度

					that._map.loadMapStyleFiles(() => {
						that._map.setMapStyleV2({ styleJson: anye });
						//  这里写样式加载完成后的回调
						//   document.getElementById()
					});
				})
				.catch(err => {
					console.log('地图加载失败');
				});
		},
		}