czmap
Version:
- 提供统一的API 实现不同的地图(百度、高德、腾讯)应用 丝滑切换 - 主要实现功能 - 基础地图展示 - 路径 - 围栏 #### 相关API使用
102 lines (101 loc) • 4.29 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>CZMap</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">
</head>
<body>
<div id="map"></div>
<script src="../dist/czmap.min.js"></script>
<!-- <script src="../lib/czmap.com.js"></script> -->
<!-- <script src="./index.js"></script> -->
<script>
const options = {
id: 'map', // 配置地图的着陆点 id
mapAk: '', // 写入Ak
// coordType: 'gcj02', // 默认类型为 gcj02 如使用百度的BD09 则需要配置为 BD09
poiText: true, //是否显示POI信息 - 仅百度
poiIcon: true, //是否显示POI图标信息 - 仅百度
type: 'AMAP', // 设置使用地图的类型 BMAP 百度地图、 TMAP 腾讯、AMAP 高德
points: [116.307503, 39.984104], // 中心点设置
areaName: '上海市', // 中心城市 - 仅百度
zoom: 11, // 缩放级别
enableScrollWheel: false, // 开启滚轮
isScaleCtrl: true, // 添加比例尺控件
isZoomCtrl: true, // 添加缩放控件
navi3DCtrl: true, // 添加3D控件
// drivingType: 'path', // 使用路径搜索展示
//展示轨迹路线
// drivingPath:[{
// 'lng': 116.297611,
// 'lat': 40.047363
// }, {
// 'lng': 116.302839,
// 'lat': 40.048219
// }, {
// 'lng': 116.308301,
// 'lat': 40.050566
// }, {
// 'lng': 116.305732,
// 'lat': 40.054957
// }, {
// 'lng': 116.304754,
// 'lat': 40.057953
// }, {
// 'lng': 116.306487,
// 'lat': 40.058312
// }, {
// 'lng': 116.307223,
// 'lat': 40.056379
// }],
// 行政区域围栏
// 围栏信息圆形
enclosure: {
strokeColor: "#6699FF",
strokeWeight: 2,
strokeOpacity: 1,
proname: '北京', // 百度地图 行政区域参数
adcodes:[110000], // 高德地图 行政区域参数
type: 'district', // // circle 圆形 polygon 多边型 district 行政区域（百度和高德实现） polyline 线形围栏数据（百度和高德实现 ）
},
// 圆形
// enclosure: {
// strokeColor: "#6699FF",
// strokeWeight: 2,
// strokeOpacity: 1,
// type: 'circle', // circle 圆形 polygon 多边型 district 行政区域（百度和高德实现） polyline 线形围栏数据（百度和高德实现 ）
// point:[116.387112, 39.920977],
// radius: 2000
// },
// 围栏信息 多边形
// enclosure: {
// strokeColor: "#6699FF",
// strokeWeight: 4,
// strokeOpacity: 1,
// type: 'polyline', // circle 圆形 polygon 多边型 district 行政区域（百度和高德实现） polyline 线形围栏数据（百度和高德实现 ）
// offset: 100, // 线性的范围 - 百度和高德实现
// points:[
// {'lng': 116.387112, 'lat':39.920977},
// {'lng': 116.385243, 'lat':39.913063},
// {'lng': 116.394226, 'lat':39.917988},
// {'lng': 116.401772, 'lat':39.921364},
// {'lng': 116.41248, 'lat':39.927893}
// ]
// }
}
const cmap = new CMap(options)
// console.log(cmap)
</script>
<style>
body, html, #map{
overflow: hidden;
width: 100%;
height: 600px;
margin: 0;
font-family: "微软雅黑";
}
</style>
</body>
</html>