【案例】3D地球

效果图：

直接放源码

DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	style>
	<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=TFUtDBf6i1qO7QVv35dMyk8NYgsVCEKy">script>
	<script src="//mapv.baidu.com/build/mapv.min.js">script>
    <script src="static/common.js">script>
    <script src="https://unpkg.com/mapvgl@1.0.0-beta.186/dist/mapvgl.min.js">script>
	<title>地球模式title>
head>
<body>
	<div id="allmap">div>
body>
html>
<script type="text/javascript">
    // GL版命名空间为BMapGL
	var map = new BMapGL.Map("allmap");    // 创建Map实例
	// map.centerAndZoom(new BMapGL.Point(116.404, 39.915));  // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    var mPoint = new BMapGL.Point(108.953408, 34.332914);  
	map.enableScrollWheelZoom();
	map.centerAndZoom(mPoint,5);
	
	map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式   标准地图：BMAP_NORMAL_MAP     地球模式：BMAP_EARTH_MAP   普通卫星地图：BMAP_SATELLITE_MAP
    
	let pointlist = [{lat:90.619712, cat:41.292458, title: '一号', label: '地址：北京市111111111111乐天银泰百货八层', url: 'https://lmg.jj20.com/up/allimg/1113/031H0113309/20031G13309-6-1200.jpg'}, {lat:116.939552, cat:35.146252, title: '二号坐标', label: '地址：北京市东城区王2222222222222百货八层' }, {lat:109.716308, cat:35.114520, title: '三号坐标', label: '地址：北京市东3333333乐天银泰百货八层'}, {lat:110.607865, cat:33.614877, title: '四号坐标', label: '地址：北京市东城区44444444银泰百货八层'},]
	var opts;
	for (let i = 0; i < pointlist.length; i++) {
		var point = new BMapGL.Point(pointlist[i].lat, pointlist[i].cat)
		var marker = new BMapGL.Marker(point );
		map.addOverlay(marker); // 增加点
		var sContent = `${pointlist[i].title}
			${'imgDemo'+i} src="${pointlist[i].url}" width="139" height="100"/>
			${pointlist[i].label}

`
		opts = {
			min_width : 300,     // 信息窗口zuixiao宽度
			min_height: 100,     // 信息窗口高度
			// title : "" , // 信息窗口标题
			enableMessage:true//设置允许信息窗发送短息
		};
		map.addOverlay(marker);               // 将标注添加到地图中
		addClickHandler(sContent,marker);
	}
	function addClickHandler(sContent,marker){
		marker.addEventListener("click",function(e){
			openInfo(sContent,e)}
		);
	}
	function openInfo(sContent,e){
		var p = e.target;
		var point = new BMapGL.Point(p.getPosition().lng, p.getPosition().lat);
		var infoWindow = new BMapGL.InfoWindow(sContent,opts);  // 创建信息窗口对象 
		map.openInfoWindow(infoWindow,point); //开启信息窗口
	};
	
	
script>

采用的技术为百度地图“卫星图”

相关阅读:
div做一个简单的自适应布局
06文本搜索工具——grep以及正则表达式
纯CSS 实现 img 图片换色
C++初学者指南第一步---10.内存（基础）
道路建设（最小生成树）
Docker一键安装和基本配置
java与es8实战之四：SpringBoot应用中操作es8(无安全检查)
oracle中创建自动增长列
11.24总结二叉树
Windbg常用命令详解

原文地址：https://blog.csdn.net/weixin_45527702/article/details/134161970