百度地图总结

已于 2023-04-14 21:07:42 修改
阅读量196 收藏
点赞数
文章标签： 百度 javascript 前端
于 2023-04-14 15:28:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62198921/article/details/130140659
版权

百度地图使用流程

首先注册一下账号和自己的ak

在这里插入图片描述

开始使用百度地图api开发

  • 第一步：创建HTML 并添加一个容器
	<div id="map"></div>
  • 第二步：引入百度地图js
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你申请的ak">
</script>
  • 使用百度地图api开始写对应的代码
<script>
    //实例化百度地图
    const map = new BMapGL.Map('map')
        //设置一个坐标点
    const point = new BMapGL.Point(114.611458, 36.660914)
        //生成百度地图
    map.centerAndZoom(point, 16)
        //实现鼠标滚轮缩放
    map.enableScrollWheelZoom()
</script>

地图设置类型

  //设置地图类型  BMAP_EARTH_MAP:卫星图,
  //BMAP_NORMAL_MAP:普通街道地图
    // map.setMapType(BMAP_EARTH_MAP)
    map.setMapType(BMAP_NORMAL_MAP)

地图异步加载

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            height: 100%
        }
        
        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        
        #map {
            width: 900px;
            height: 450px;
            border: 1px solid #ccc;
            margin: 20px auto;
        }
    </style>

</head>

<body>
    <div id="map"></div>
</body>
<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=GARHEjrSEtihCn5PY0TpvMBYdCa02TOq"> -->
<!-- </script> -->
<script>
    window.onload = loadScript

    function loadScript() {
        //创建script
        const script = document.createElement('script')
        script.src = 'https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=GARHEjrSEtihCn5PY0TpvMBYdCa02TOq&callback=initmap'
        document.body.appendChild(script)
    }

    //初始化地图函数
    function initmap() {
        //实例化百度地图
        const map = new BMapGL.Map('map')
            //设置一个坐标点
        const point = new BMapGL.Point(116.211596, 40.143386)
            //生成百度地图
        map.centerAndZoom(point, 18)
            //实现鼠标滚轮缩放
        map.enableScrollWheelZoom()

        //设置地图类型  BMAP_EARTH_MAP:卫星图,BMAP_NORMAL_MAP:普通街道地图
        // map.setMapType(BMAP_EARTH_MAP)
        map.setMapType(BMAP_NORMAL_MAP)
    }
</script>

</html>

地图旋转与倾斜

	//倾斜
	map.setTilt()
	//旋转
	map.setHeading(i)

地图常用控件

<script>
    //实例化百度地图
    const map = new BMapGL.Map('map')
        //设置一个坐标点
    const point = new BMapGL.Point(116.404137, 39.914939)
        //生成百度地图
    map.centerAndZoom(point, 18)
        //实现鼠标滚轮缩放
    map.enableScrollWheelZoom()

    //最小缩放级别
    // map.setMinZoom(12)
    //最大缩放级别
    // map.setMaxZoom(16)

    //实例化缩放控件
    const zoomCtrl = new BMapGL.ZoomControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            offset: new BMapGL.Size(10, 15)
        })
        //再将缩放控件添加到百度地图上
    map.addControl(zoomCtrl)

    //实例化比例尺控件
    const scaleCtrl = new BMapGL.ScaleControl({
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            offset: new BMapGL.Size(10, 15)
        })
        //再添加比例尺到地图上
    map.addControl(scaleCtrl)
    </script>

添加折线，图像标记，信息窗口

<script>
    //实例化百度地图
    const map = new BMapGL.Map('map')
        //设置一个坐标点
    const point = new BMapGL.Point(116.215286, 40.142213)
        //生成百度地图
    map.centerAndZoom(point, 18)
        //实现鼠标滚轮缩放
    map.enableScrollWheelZoom()

    //最小缩放级别
    // map.setMinZoom(12)
    //最大缩放级别
    // map.setMaxZoom(16)

    //实例化缩放控件
    const zoomCtrl = new BMapGL.ZoomControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            offset: new BMapGL.Size(10, 15)
        })
        //再将缩放控件添加到百度地图上
    map.addControl(zoomCtrl)

    //实例化比例尺控件
    const scaleCtrl = new BMapGL.ScaleControl({
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            offset: new BMapGL.Size(10, 15)
        })
        //再添加比例尺到地图上
    map.addControl(scaleCtrl)


    const url = 'https://m.360buyimg.com/babel/jfs/t1/57520/8/375/4092/5cd4f1d8Ea1266047/1c590322ece537ba.png'
        //实例化icon
    const icon = new BMapGL.Icon(url, new BMapGL.Size(30, 30), {
            anchor: new BMapGL.Size(0, 0),
            imageOffset: new BMapGL.Size(0, 0),
        })
        //添加图像标记
    const marker = new BMapGL.Marker(point, {
        icon: icon
    })

    //添加marker到地图上
    map.addOverlay(marker)

    //绘制折线
    const pointArr = [
        new BMapGL.Point(116.215735, 40.141989),
        new BMapGL.Point(116.215156, 40.142696),
        new BMapGL.Point(116.214594, 40.142472),
        new BMapGL.Point(116.215043, 40.141789),
        //  new BMapGL.Point(116.215735, 40.141989),
    ];
    const options = {
            strokeColor: "#f00",
            strokeWeight: 10,
            strokeOpacity: 0.3,
            //  fillColor: '#00f',
            // fillOpacity: 0.3
        }
        // const pl = new BMapGL.Polyline(pointArr, options)
    const pl = new BMapGL.Polygon(pointArr, options)
    map.addOverlay(pl)

    //添加文本
    const lab = new BMapGL.Label('积云教育', {
        offset: new BMapGL.Size(-30, -20),
        position: point
    })

    lab.setStyle({
        border: '1px dashed #00f',
        padding: '6px 4px',
        background: "#f00",
        color: "#ff0"
    })

    map.addOverlay(lab)

    //实例化信息窗口
    const ohtml = `
      <div>
        <h4>欢迎来到积云教育学习高薪就业课程</h4>
        <img style='width:30%' src='https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF' />
      </div>
    `
    const infoW = new BMapGL.InfoWindow(ohtml, {
        title: '欢迎！',
        width: 300,
        height: 200,
        offset: new BMapGL.Size(0, 0)
    })

    //点击文本标签打开信息窗口
    lab.addEventListener('click', function() {
        map.openInfoWindow(infoW, point)
    }, false)
</script>

视角动画

<script>
    //实例化百度地图
    const map = new BMapGL.Map('map')
        //设置一个坐标点
    const point = new BMapGL.Point(116.403963, 39.915119)
        //生成百度地图
    map.centerAndZoom(point, 18)
        //实现鼠标滚轮缩放
    map.enableScrollWheelZoom()

    //倾斜
    map.setTilt(40)
        //旋转
    map.setHeading(50)

    //配置动画数组
    const dhArr = [{
            center: new BMapGL.Point(116.307092, 40.054922),
            zoom: 20,
            tilt: 50,
            heading: 0,
            percentage: 0
        }, {
            center: new BMapGL.Point(116.307631, 40.055391),
            zoom: 21,
            tilt: 70,
            heading: 0,
            percentage: 0.1
        }, {
            center: new BMapGL.Point(116.306858, 40.057887),
            zoom: 21,
            tilt: 70,
            heading: 0,
            percentage: 0.25
        }, {
            center: new BMapGL.Point(116.306858, 40.057887),
            zoom: 21,
            tilt: 70,
            heading: -90,
            percentage: 0.35
        }, {
            center: new BMapGL.Point(116.307904, 40.058118),
            zoom: 21,
            tilt: 70,
            heading: -90,
            percentage: 0.45
        }, {
            center: new BMapGL.Point(116.307904, 40.058118),
            zoom: 21,
            tilt: 70,
            heading: -180,
            percentage: 0.55
        }, {
            center: new BMapGL.Point(116.308902, 40.055954),
            zoom: 21,
            tilt: 70,
            heading: -180,
            percentage: 0.75
        }, {
            center: new BMapGL.Point(116.308902, 40.055954),
            zoom: 21,
            tilt: 70,
            heading: -270,
            percentage: 0.85
        }, {
            center: new BMapGL.Point(116.307779, 40.055754),
            zoom: 21,
            tilt: 70,
            heading: -360,
            percentage: 0.95
        }, {
            center: new BMapGL.Point(116.307092, 40.054922),
            zoom: 20,
            tilt: 50,
            heading: -360,
            percentage: 1
        }, ]
        //配置动画选项
    const options = {
            delay: 0,
            duration: 8000,
            interation: 1
        }
        //实例化视角动画
    const dh = new BMapGL.ViewAnimation(dhArr, options)

    //启动动画
    map.startViewAnimation(dh)
</script>

轨迹动画

<script>
    //实例化百度地图
    const map = new BMapGL.Map('map')
        //设置一个坐标点
    const point = new BMapGL.Point(116.403963, 39.915119)
        //生成百度地图
    map.centerAndZoom(point, 16)
        //实现鼠标滚轮缩放
    map.enableScrollWheelZoom()

    //配置Polylin坐标点数组
    const plArr = [
        //坐标点
        new BMapGL.Point(116.380597, 39.913314),
        new BMapGL.Point(116.413008, 39.91431),
        new BMapGL.Point(116.413224, 39.921504),
        new BMapGL.Point(116.424363, 39.921615),
        new BMapGL.Point(116.424578, 39.914421),
    ]

    //实例化PolyLine
    const pl = new BMapGL.Polyline(plArr)

    //创建个轨迹动画对象，并配置参数
    // const track=new BMapGLLib.TrackAnimation(地图实例名,轨迹路径,配置项)
    const track = new BMapGLLib.TrackAnimation(map, pl, {
        overallView: true,
        tilt: 30, // 轨迹播放的角度，默认为55
        duration: 20000, // 动画持续时长，默认为10000，单位ms
        delay: 2000 // 动画开始的延迟，默认0，单位ms
    })

    //启动轨迹动画
    track.start()
</script>

在vue中如何使用地图

vue 2的官方文档
vue3的官方文档

vue3百度地图布局

安装地图依赖
 npm install vue-baidu-map-3x --save
注册为全局百度地图
import { createApp } from 'vue'
import App from './App.vue'

//引入百度地图组件依赖
import BaiduMap from 'vue-baidu-map-3x'

const app = createApp(App);

//注册为全局百度地图组件
app.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: '百度地图ak',
  // v:'2.0',  // 默认使用3.0
  // type: 'WebGL' // ||API 默认API  (使用此模式 BMap=BMapGL)
});
app.mount('#app');
使用百度地图组件
<script setup lang="ts"></script>

<template>
  <div class="home">
    <baidu-map class="bm-view" center="天安门" :zoom="15">
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <bm-label
        content="我爱北京天安门"
        :position="{ lng: 116.404, lat: 39.915 }"
        :labelStyle="{ color: 'red', fontSize: '24px' }"
        title="Hover me"
      />
    </baidu-map>
    <!-- 116.211596,40.143386 -->
  	</div>
	</template>

	<style scoped>
	.home {
 	 width: 100vw;
 	 height: 100vh;
 	 background: #ccc;
	}

	.bm-view {
 	 width: 100%;
 	 height: 100%;
	}
</style>
胡崽崽!
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
百度地图自定义信息窗
12-20
文件主要包括InfoBox类库、一个Demo，实现了信息窗样式自定义，底层实际上是继承的BMap.Overlay
百度地图api
Joker_DJ
08-24 819
百度地图apiapi地址注册账号查看api创建应用hello word开发常见api测试开启鼠标滚轮缩放设置地图的旋转角度和倾斜角度变更地图类型为地球添加控件设置标注示例Demo总结 api地址 http://lbsyun.baidu.com/ 注册账号 查看api 要先进行注册账号和申请密钥（ak）才可使用该服务，接口无使用次数限制，请放心使用 创建应用 申请账号为开发账号 申请密钥 创建应用 hello word开发 复制api提供的html脚本到工程中 输入密钥 访问页面测试
百度地图 anchor 设置为中下
josiecici的博客
12-25 774
例如我的icon大小为32*32 且 我希望以中下部为经纬度点来标识： 则需要将anchor设置为 16，32 即为 中下部点的位置： 效果如下图：因为我是从线上取的点，所以当icon中下部尖尖在线上即为成功对应： ...
百度地图锚点居中显示
YY568457126的博客
01-17 3284
public void setAnchor(float anchorX,float anchorY) 设置 Marker 覆盖物的锚点比例，默认（0.5f, 1.0f）水平居中，垂直下对齐 使用MarkerOptions().anchor(0.5f,0.5f); 实现图片A点为给定坐标点位置（默认B点为给定坐标点位置, MarkerOptions().anchor(0.5f,1.0f)）。
百度地图入门与进阶
weixin_49809163的博客
02-12 1933
百度地图入门与进阶
百度地图开发总结
11-23
对于百度地图开发的初学者，是很有帮助的。
百度地图定位文档
12-12
百度地图定位文档 HTML5浏览器定位知识点点总结 ，让更多的开发者菜鸟们，更好的学习定位
调用百度地图API的demo
10-31
史上最全的demo，总结了一个星期的结果，调用了百度地图sdk的地图和定位功能，能有好的例子就下载吧，自己弄真的真的头疼！
百度地图API学习总结
11-15
如何学习百度地图开发，就是快！快熟入门，百度地图API是可以给开发人员调用的开放API，我们可以用Javascript语言进行调用；听起来API这个概念很抽象，初学者想：“百度的API，我们怎么能调用？”，其实不是这样，...
百度地图使用，以及一些api
m0_61702149的博客
06-15 694
百度地图引入项目
百度地图(HTML5新特性)-全面详解（学习总结---从入门到深化）
12-12 1561
1、百度地图_自定义标注图标var myIcon = new BMapGL.Icon("markers.png",new BMapGL.Size(50, 50), //指定放置图标区域的大小{//指定地理点跟图标左上角的相对偏移量});2、使用自定义的标注图标创建标注点// 创建标注对象并添加到地图自定义图标之后，地图上标注点就会直接显示自定义的图标。
centerandzoom 无效_HTML5+ API Reference
weixin_42311022的博客
02-06 1335
Maps模块管理地图控件，用于在web页面中显示地图控件，提供各种接口操作地图控件，如添加标点、路线等。通过plus.maps可获取地图管理对象。方法：openSysMap: 调用系统第三方程序进行导航对象：Map: 地图控件对象Point: Point对象用于表示地图元素的坐标Bounds: 地理区域MapType: 地图视图类型Overlay: 地图覆盖物基类对象Marker: 地图上显示的标...
定位and初始显示级别
李厂长的自留地
07-09 1147
<br />var geoPoint = new esri.geometry.Point({"x":501226.899957802,"y":3849102.1564765223}, map.spatialReference); <br /> map.centerAndZoom(geoPoint, 2);<br /> <br /> <br />注意：这两句代码放在map的onload事件的回调里面，centerAndZoom的第二个参数“2”是指视野级别为2
百度.js添加圆形覆盖物并跟随中心点移动
T70H78的博客
10-26 430
// 修改经纬度 changeCenter(zooms) { this.map.centerAndZoom( new BMap.Point(this.addForm.longitude, this.addForm.latitude), zooms || this.map.getZoom() ); }, // 获取并设置地图中心点 getMapCenter() { var pos = this.map.get.
百度地图bMapGL使用setMapType生成混合地图和路网类型BMAP_HYBRID_MAP不生效问题。
Blue54的博客
06-21 656
BMAP_HYBRID_MAP 修改成 BMAP_EARTH_MAP 即可。官方文档Api未更新最新参数：参数名为。
[2015/05/10] 百度地图API运用 & 真机百度地图不显示问题
Eclipse是我男朋友
05-10 631
百度地图API最简单调用 1. user permission                                                                                                     2. application meta-data（安全码及密钥） 安全码的SHA1值
在百度地图中添加自定义全屏控件
最新发布
yqdid的博客
08-24 1268
【代码】在百度地图中添加自定义全屏控件。
百度地图常用的一些方法介绍
小白先生的博客
03-06 1746
map.addControl() 增加地图控件等方法 map.addCenterAndZoom（参数1，参数2）--参数1：可以是经纬度，可以是城市名字；参数2：地图级别；初始化地图方法 var marker = new BMap.Marker(point-经纬度); map.addOverlay(marker);--添加标注 addEventListener('事件',function)-...
Android百度地图编程实验总结
06-01
Android百度地图编程实验总结： 1. 首先，需要在百度地图开放平台注册账号，创建应用，获取应用的AK（密钥），并在Android项目中添加百度地图SDK。 2. 在AndroidManifest.xml文件中添加权限： ``` <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> <uses-permission android:name="android.permission.READ_PHONE_STATE"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.INTERNET"/> ``` 3. 在布局文件中添加MapView控件，并在Activity中获取MapView对象。 4. 在Activity中实现BaiduMap.OnMapLoadedCallback接口，重写onMapLoaded()方法，在地图加载完成后设置地图中心点、缩放级别、地图类型等属性。 5. 在Activity中获取LocationClient对象，实现BDLocationListener接口，重写onReceiveLocation()方法，在获取到定位信息后，将地图中心点设置为当前位置，并添加标注。 6. 在Activity中添加OverlayOptions对象，设置标注的位置、图标等属性，并将标注添加到地图上。 7. 在Activity中添加OnMarkerClickListener接口，重写onMarkerClick()方法，实现点击标注后弹出信息窗口等功能。 8. 在Activity中添加OnMapClickListener接口，重写onMapClick()方法，实现点击地图后添加标注等功能。 9. 在Activity中添加OnMapLongClickListener接口，重写onMapLongClick()方法，实现长按地图后添加标注等功能。 10. 最后，在Activity中调用LocationClient的start()方法，开始定位。同时，需要在Activity的onDestroy()方法中调用LocationClient的stop()方法，停止定位。 以上就是Android百度地图编程实验的总结，希望对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值