index.html
@@ -7,7 +7,9 @@ <meta name="referrer" content="no-referrer"> <title>唐山税务</title> <link rel="icon" type="image/x-icon" href="./src/assets/img/logo.ico" /> <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak='tuVbv4tLIzoX7IWdeKeTwojDqPILFoe5'"></script> <script src="static/bmap_offline_api_v3.0_min.js"></script> <script src="static/bmap_offline_demo/map_load.js"></script> <!--<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak='tuVbv4tLIzoX7IWdeKeTwojDqPILFoe5'"></script>--> <!--<script src="http://code.bdstatic.com/npm/jquery@2.2.2/dist/jquery.min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=3.0&ak=tuVbv4tLIzoX7IWdeKeTwojDqPILFoe5"></script> <script src="http://mapv.baidu.com/build/mapv.min.js"></script> src/main.js
@@ -8,8 +8,10 @@ import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); import BaiduMap from '@/components/vue-bai-map/components' Vue.use( BaiduMap, { ak : 'tuVbv4tLIzoX7IWdeKeTwojDqPILFoe5'} ) // import BaiduMap from '@/components/vue-bai-map/components' // Vue.use( BaiduMap, { ak : 'tuVbv4tLIzoX7IWdeKeTwojDqPILFoe5'} ) // import BaiduMap from 'vue-baidu-map' // Vue.use( BaiduMap, { ak : 'tuVbv4tLIzoX7IWdeKeTwojDqPILFoe5'} ) import { getStore, setStore, removeStore } from "./libs/store" import store from './store' src/pages/show/showIndex/showIndex.vue
@@ -1,12 +1,13 @@ <template> <div class="showIndex-wrap"> <div class="mapBox"> <baidu-map :center="center" :zoom="zoom" class="bm-view" @ready="handler"> </baidu-map> <!-- <baidu-map--> <!-- :center="center"--> <!-- :zoom="zoom"--> <!-- class="bm-view"--> <!-- @ready="handler">--> <!-- </baidu-map>--> <div class="map" id="map"></div> <!--<div class="map_container" id="map_container"></div>--> </div> <div class="upload-box"> @@ -56,10 +57,11 @@ center: { lng: 118.20, lat: 39.63}, zoom: 6, mapObj:{}, mapData:[], mapData2:[], uploadVisiable:false, //上传文件弹框 timer:null timer:null, mapData:[], map:{} } }, destroyed() { @@ -68,11 +70,28 @@ mounted() { //this.getMapData() //this.initMap() this.timer = setInterval(() => { this.getMapData() },300000) this.$nextTick(() => { this.initMap() }) // this.timer = setInterval(() => { // this.getMapData() // },300000) }, methods: { initMap() { let map = new window.BMap.Map("map"); console.log(map,'map===') map.centerAndZoom(new BMap.Point(118.183450598,39.6505309225), 11) //map.enableScrollWheelZoom(true) //鼠标滚动缩放 map.setCurrentCity('唐山') // 设置地图显示的城市 此项是必须设置的 map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放 //this.getMapData() //this.addMarker() }, uploadClick(type) { console.log(type,'type===') this.uploadVisiable = true @@ -88,28 +107,67 @@ } }) }, handler({BMap, map}) { this.mapObj = {BMap, map} let goodsData = require('../../../assets/js/custom_map_config2') let point = new BMap.Point(118.183450598,39.6505309225) map.centerAndZoom(point, 15) map.enableScrollWheelZoom(true) //鼠标滚动缩放 map.setMapStyleV2({ styleJson: goodsData // styleId: '5f9b8a9639cf6e4ae8806379bedba141' // style: 'bluish' }) map.setCurrentCity('唐山') // 设置地图显示的城市 此项是必须设置的 this.getMapData() }, // handler({BMap, map}) { // this.mapObj = {BMap, map} // //let goodsData = require('../../../assets/js/custom_map_config2') // let point = new BMap.Point(118.183450598,39.6505309225) // map.centerAndZoom(point, 11) // map.enableScrollWheelZoom(true) //鼠标滚动缩放 // // map.setMapStyleV2({ // // styleJson: goodsData // // // styleId: '5f9b8a9639cf6e4ae8806379bedba141' // // // style: 'bluish' // // }) // map.setCurrentCity('唐山') // 设置地图显示的城市 此项是必须设置的 // this.getMapData() // // }, addMarker() { let BMap = this.mapObj.BMap let map = this.mapObj.map let BMap = window.BMap let map = new window.BMap.Map("map"); //let map = new window.BMap.Map("map"); let BMapLib = window.BMapLib let mapMarkers = [] this.mapData = [{ lon:118.167201, lat:39.60944, address: '河北省唐山市开平区东西大街199号', health: '0' },{ lon:118.15782, lat:39.63102, address: '河北省唐山市开平区东西大街199号', health: '0' },{ lon:118.09289, lat:39.58163, address: '河北省唐山市开平区东西大街199号', health: '0' },{ lon:118.145069, lat:39.662586, address: '河北省唐山市开平区东西大街199号', health: '0' }] // this.mapData.forEach(item => { // let marker = new BMap.Marker(item.lon,item.lat) // mapMarkers.push(marker) // this.mapObj.map.addOverlay(marker) // }) // let markerClusterer = new BMapLib.MarkerClusterer(this.mapObj.map, { // markers: mapMarkers, // styles: [ // { // url: "./static/img/markerIcon3", // size: new BMap.Size(35, 35), // }, // ], // }) // markerClusterer.setMinClusterSize(2) this.mapData.forEach(item => { //lng 经度 lat 经度 console.log(this.mapData,'this.mapData===') if(item.lat && item.lat) { if(item.lon && item.lat) { let longitude = item.lon console.log(item.lon,'经纬----') console.log(item.lat,'经纬----') @@ -130,7 +188,7 @@ let point = new BMap.Point(longitude,latitude) let marker = new BMap.Marker(point,{icon:myIcon}) map.addOverlay(marker) map.setZoom(13) map.setZoom(11) // 添加鼠标划入坐标点的显示内容 let isH = '' if(item.health == 0) { @@ -163,7 +221,7 @@ label.hide() // 在全景场景内添加覆盖物 map.addOverlay(label); marker.addEventListener('mouseover', function () { /*marker.addEventListener('mouseover', function () { console.log(marker,'marker==') //鼠标移入动画 let divElement = document.createElement('div') @@ -180,7 +238,7 @@ marker.addEventListener('mouseout', function () { marker.hd.className = '' label.hide() }) })*/ } }) @@ -248,6 +306,10 @@ top: -0.4167rem /* -80/192 */; bottom: 0; right: 0; .map{ width: 100%; height: 100%; } .map_container{ width: 100%; height: 100%; static/bmap_offline_demo/bmap_offline_api_v3.0_min.js
New file Diff too large static/bmap_offline_demo/demo01.html
New file @@ -0,0 +1,50 @@ <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello, World</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <script type="text/javascript" src="map_load.js"></script> </head> <body> <div id="container"></div> <script type="text/javascript"> var outputPath = 'tiles/'; //地图瓦片所在的文件夹 var fromat = ".jpg"; //格式 /*var tileLayer = new BMap.TileLayer(); tileLayer.getTilesUrl = function (tileCoord, zoom) { var x = tileCoord.x; var y = tileCoord.y; var url = outputPath + zoom + '/' + x + '/' + y + fromat; return url; } var tileMapType = new BMap.MapType('tileMapType', tileLayer);*/ var map = new BMap.Map("container") var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 6); // 初始化地图，设置中心点坐标和地图级别 //添加地图类型控件 map.addControl(new BMap.MapTypeControl({ mapTypes:[ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]})); map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 //单击获取点击的经纬度 map.addEventListener("click",function(e){ alert(e.point.lng + "," + e.point.lat); }); </script> </body> </html> static/bmap_offline_demo/map_city.js
New file @@ -0,0 +1,48 @@ /* * 离线地图城市坐标 * 文本文件必须以UTF-8编码存储，建议用Notepad++编辑 * 格式:城市名称 经度 纬度 */ var offlinemap_cities = [ ['北京', 116.427265, 39.918698] ,['上海', 121.472724, 31.239761] ,['武汉', 114.28398, 30.601327] ,['成都', 104.070606, 30.59138] ,['广州', 113.270404, 23.159763] ,['重庆', 106.595635, 29.619598] ]; /* 城市数据映射 * */ var offlinemap_cityobj = new Object(); for(var i=0; i<offlinemap_cities.length; i++){ offlinemap_cityobj[ offlinemap_cities[i][0] ] = [offlinemap_cities[i][1], offlinemap_cities[i][2]]; } /* * 获得城市坐标 * 城市的坐标必须先存储在map_city.js */ var i_getCityPoint = function(a) { if( a in offlinemap_cityobj ){ var pt = new BMap.Point(offlinemap_cityobj[a][0], offlinemap_cityobj[a][1]); return pt; } alert('map_city.js中未定义城市坐标:'+ a); return false; }; /* * 设置地图中心为某个城市 * 城市的坐标必须先存储在map_city.js */ var i_setCurrentCity = function(map, a) { var pt = i_getCityPoint(a); if( pt ){ map.setCenter( pt ); return pt; } return false; }; static/bmap_offline_demo/map_load.js
New file @@ -0,0 +1,21 @@ var bmapcfg = { 'imgext' : '.png', //瓦片图的后缀 ------ 根据需要修改，一般是 .png .jpg 'tiles_dir' : '', //普通瓦片图的地址，为空默认在 offlinemap/tiles/ 目录 'tiles_hybrid': '', //卫星瓦片图的地址，为空默认在 offlinemap/tiles_hybrid/ 目录 'tiles_self' : '' //自定义图层的地址，为空默认在 offlinemap/tiles_self/ 目录 }; //////////////////下面的保持不动/////////////////////////////////// var scripts = document.getElementsByTagName("script"); var JS__FILE__ = scripts[scripts.length - 1].getAttribute("src"); //获得当前js文件路径 bmapcfg.home = JS__FILE__.substr(0, JS__FILE__.lastIndexOf("/")+1); //地图API主目录 (function(){ window.BMap_loadScriptTime = (new Date).getTime(); //加载地图API主文件 document.write('<script type="text/javascript" src="'+bmapcfg.home+'bmap_offline_api_v3.0_min.js"></script>'); //加载扩展函数 document.write('<script type="text/javascript" src="'+bmapcfg.home+'map_plus.js"></script>'); //加载城市坐标 document.write('<script type="text/javascript" src="'+bmapcfg.home+'map_city.js"></script>'); })(); /////////////////////////////////////////////////////////////////// static/bmap_offline_demo/map_plus.js
New file @@ -0,0 +1,4 @@ /* * 离线地图扩展功能函数 */
New file @@ -0,0 +1,3 @@ 此目录下存放百度标准瓦片图。 static/img/markerIcon3.png
