Blame view

static/html/map.html 2.81 KB
290144e9   易尊强   第一次
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
  
  <!DOCTYPE html>
  <html lang="zh">
  	<head>
  		<meta charset="UTF-8">
  		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  		<meta http-equiv="X-UA-Compatible" content="ie=edge">
  		<title>百度地图</title>
  		<style type="text/css">
  			html {
  				height: 100%
  			}
   
  			body {
  				height: 100%;
  				margin: 0px;
  				padding: 0px
  			}
   
  			#mapPage {
  				height: 100%;
  				/* position: absolute; */
  				position: relative;
  				top: 0;
  				left: 0;
  				z-index: 4;
  			}
   
  			#container {
  				height: 100%;
  				/* position: absolute;
  				z-index: 1; */
  			}
  			#another{
  				position: fixed;
  				z-index: 100;
  				top: 0;
  				/* background-color: transparent; */
  			}
  		</style>
  	</head>
  	<body>
  		<div id='mapPage'>
  			<div id='container'></div>
  		</div>
  		<!-- <div id="another">德阳</div> -->
  	</body>
  	<!-- 微信 JS-SDK 如果不需要兼容小程序,则无需引用此 JS 文件 -->
  	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
   
  	<!-- uni 的 SDK -->
  	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
  	</script>
   
  	<!-- 百度地图 -->
  	<script type="text/javascript"
  		src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=l28JfyptUPEQ42VLP9Ja4HFh4q61s5fi"></script>
    
    
  	<script type="text/javascript">
  		document.addEventListener('UniAppJSBridgeReady', function() {
  			// ------------------------------------  配置百度地图  --------------------------------------------------------------------------------
   			var map = new BMapGL.Map("container");          // 创建地图实例 
  			var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
  			map.centerAndZoom(point, 15);                 // 初始化地图,设置中心点坐标和地图级别
  			map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  			// map.setHeading(64.5);   //设置地图旋转角度
  			// map.setTilt(73);       //设置地图的倾斜角度	
  			map.setHeading(0);  
  			map.setTilt(0); 
  			//上面这两个值不要或者像我一样设置成0,然后添加地图类型为默认
  			map.addControl(new BMapGL.MapTypeControl({
  			mapTypes:[
  			BMAP_NORMAL_MAP,
  				
  			]}));
  			var opts = {
  			    width: 250,     // 信息窗口宽度
  			    height: 100,    // 信息窗口高度
  			    title: "Hello"  // 信息窗口标题
  			}
  			var infoWindow = new BMapGL.InfoWindow("World", opts);  // 创建信息窗口对象
  			map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口
  			var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
  			map.addControl(scaleCtrl);
  			var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
  			map.addControl(zoomCtrl);
  			var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
  			map.addControl(cityCtrl);
  		});
  	</script>
  </html>