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

最新推荐文章于 2024-04-26 21:29:15 发布

旧城空巷旧心

最新推荐文章于 2024-04-26 21:29:15 发布

阅读量279

点赞数

分类专栏：百度地图文章标签： 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('地图加载失败');
				});
		},
		}

以上方法都测试锅可以放心食用

旧城空巷旧心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html百度地图和vue cli百度地图的使用

原生百度地图的使用（若有错误，欢迎指教-。- 共同进步）第一步先去百度地图官网申请一个然后在页面的head 里面直接引入定义一个容器作为百度地图的容器开发者密钥申请地址先确定自己的需求在引入版本最新的3.0不支持百度地图3维模式 1.0webGl 支持但是又不支持3.0的一些开源库而且使用方法有轻微区别 (ps : 也可以自己改百度地图源码让3.0开源库的工具在1.0使用，后期会说)实例化方式也不一样 <!DOCTYPE html><html lang=
复制链接

扫一扫