UNPKG

mapv

Version:

a library of geography visualization

154 lines (134 loc) 12.6 kB
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } #map { width: 100%; height: 100%; } #nav-bar { position: fixed; top: 0px; width: 100%; line-height: 67px; height: 67px; background-color: rgba(12, 24, 50, .7); font-size: 28px; font-family: 'Microsoft Yahel', '微软雅黑'; font-weight: normal; text-align: center; color: rgba(255, 255, 255, 1); } .nav-bar-logo { position: absolute; width: 137px; height: 46px; background-image: url("data:image/png;base64,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"); background-repeat: no-repeat; top: 10px; left: 15px; } </style> </head> <body> <div id="map"></div> <div id="nav-bar"> <div class="nav-bar-logo"></div> <div class="nav-bar-title">成都市汛期重点关注路段</div> </div> <!-- <canvas id="canvas"></canvas> --> <script type="text/javascript" src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script> <script type="text/javascript" src="../build/mapv.js"></script> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("map", { enableMapClick: false }); // 创建Map实例 map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 map.setMapStyle({ style: 'midnight' }); function openInfoWindow(item) { let opts = { width: 350, // 信息窗口宽度 height: 60, // 信息窗口高度 title: '点位名称: ' + item.name, // 信息窗口标题 enableMessage: true //设置允许信息窗发送短息 }; let content = `经纬度: ${item.lng},${item.lat}` var point = new BMap.Point(item.lng, item.lat); var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow, point); //开启信息窗口 } $.get('data/address-point.csv', function (csvstr) { var options = { size: 5, gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)" }, max: 20, fillStyle: 'blue', draw: 'simple', methods: { // 一些事件回调函数 click: function (item) { // 点击事件,返回对应点击元素的对象值 // console.log(item); if (item && item.lat && item.name) { openInfoWindow(item) } }, mousemove: function (item) { // 鼠标移动事件,对应鼠标经过的元素对象值 // console.log(item); } }, } var dataSet = mapv.csv.getDataSet(csvstr); let locs = dataSet._data.map(d => { let lnglat = d['百度坐标'] && d['百度坐标'].split(','); return { lng: lnglat[0], lat: lnglat[1], name: d['名称'], } }) dataSet._data = locs; dataSet.initGeometry(); map.setViewport(locs, { margins: [10, 10, 10, 10], zoomFactor: 1, }); // use mapv show points // var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options); //add png markers by yourself for (var i = 0; i < locs.length; i++) { var myIcon = new BMap.Icon("./images/waterdrop.png", new BMap.Size(30, 40)); var marker = new BMap.Marker(new BMap.Point(locs[i].lng, locs[i].lat), { icon: myIcon }); var content = locs[i].name; map.addOverlay(marker); // 将标注添加到地图中 addClickHandler(locs[i], marker); } function addClickHandler(item, marker) { marker.addEventListener("click", function (e) { openInfoWindow(item) }); } }); </script> </body> </html>