当前位置:网站首页>Baidu Map Case - Zoom component, map scale component
Baidu Map Case - Zoom component, map scale component
2022-04-23 17:03:00 【Eli-sun】
<!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>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=cXG18I5SNt2EZNvG7CVyE4jjTr8swlo4"
></script>
<style>
html, body{
height: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.anchorBL, .BMap_cpyCtrl{
display: none;
}
</style>
</head>
<body>
<!--
Can be in Baidu map - Developing documents - Coordinate picker Search the place you want and get the longitude and latitude of the place
-->
<div id="map"></div>
<script>
// console.log(window.BMapGL);
var map = new BMapGL.Map('map', {
minZoom: 8,
maxZoom:12,
mapType: BMAP_NORMAL_MAP
}) // Initialize map
var point = new BMapGL.Point(116.196608,40.253428) // Set map coordinates
map.centerAndZoom(point, 5) // Central Map display level
map.enableScrollWheelZoom(true) // Zoom in and out of the map through the scroll wheel
var heading = 0
map.setHeading(60) // Adjust the rotation angle
map.setTilt(70) // Adjust the tilt angle
// setInterval(()=>{
// heading++
// map.setHeading(heading)
// },500)
map.setMapType(BMAP_NORMAL_MAP)
// BMAP_EARTH_MAP The earth map
// map.setMinZoom(8) // The minimum scalable setting is 8
// map.setMaxZoom(12) // The maximum scalable is 12
var zoomCtrl = new BMapGL.ZoomControl({
anchor:BMAP_ANCHOR_BOTTOM_RIGHT, // Change the placement of icons There can be 4 The central method
offset: new BMapGL.Size(100, 10) // Adjust the position of the icon more accurately
})
map.addControl(zoomCtrl)
map.addEventListener('zoomstart', function() {
console.log('000',map.getZoom());
}) // The method of event binding
map.addEventListener('zoomend', function() {
console.log('111',map.getZoom());
})
var scaleCtrl = new BMapGL.ScaleControl({
anchor:BMAP_ANCHOR_TOP_LEFT,
offset:new BMapGL.Size(10,10)
}) // Set map scale icon
map.addControl(scaleCtrl)
</script>
</body>
</html>
版权声明
本文为[Eli-sun]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204230554289680.html
边栏推荐
- Shortcut keys (multiline)
- MySQL master-slave replication
- Pytorch: the pit between train mode and eval mode
- Pycham connects to the remote server and realizes remote debugging
- Variable length parameter__ VA_ ARGS__ Macro definitions for and logging
- 1-5 nodejs commonjs specification
- 线性代数感悟之2
- Tencent resolves the address according to the IP address
- Decimal format decimal / datetime conversion processing
- Bottom processing of stack memory in browser
猜你喜欢
[pimf] openharmony paper Club - what is the experience of wandering in ACM survey
Lock lock
VLAN advanced technology, VLAN aggregation, super VLAN, sub VLAN
Scope and scope chain in JS
Nifi fast installation and file synchronization
SQL database
org. apache. parquet. schema. InvalidSchemaException: A group type can not be empty. Parquet does not su
线性代数感悟之2
Detailed explanation of Niuke - Gloves
文件操作《二》(5000字总结篇)
随机推荐
Scope and scope chain in JS
DDT + Excel for interface test
Introduction to new functions of camtasia2022 software
Mock test
自定义my_strcpy与库strcpy【模拟实现字符串相关函数】
SQL: How to parse Microsoft Transact-SQL Statements in C# and to match the column aliases of a view
Handwritten event publish subscribe framework
文件操作《二》(5000字总结篇)
Change the password after installing MySQL in Linux
面试百分百问到的进程,你究竟了解多少
Use case execution of robot framework
Redis docker installation
Installing labellmg tutorial in Windows
Quick install mongodb
Nacos + aspnetcore + Ocelot actual combat code
【解决报错】Error in v-on handler: “TypeError: Cannot read property ‘resetFields’ of undefined”
Preliminary understanding of promse
批量制造测试数据的思路,附源码
Milvus 2.0 質量保障系統詳解
PostgreSQL column storage and row storage