Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
1f9aa2bb 1 parent 2fe3bd31

fix

Inline Side-by-side
Showing 2 changed files with 14 additions and 165 deletions
...@@ -326,6 +326,18 @@ var toiletInfo = [ ...@@ -326,6 +326,18 @@ var toiletInfo = [
326 }, 326 },
327 ], 327 ],
328 }, 328 },
329 + {
330 + name: '预警演示',
331 + position: [120.587747, 31.314202],
332 + icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
333 + details: [
334 + {
335 + name: '',
336 + note: '',
337 + url: '',
338 + },
339 + ],
340 + },
329 ]; 341 ];
330 342
331 var activityInfo = [ 343 var activityInfo = [
......
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-06-07 10:59:05 4 + * @LastEditTime: 2023-06-07 11:26:02
5 * @FilePath: /map-demo/src/views/index.vue 5 * @FilePath: /map-demo/src/views/index.vue
6 - * @Description: 文件描述 6 + * @Description: 地图主体页面
7 --> 7 -->
8 <template> 8 <template>
9 <div ref="root" style="height: 100vh; position: relative; overflow: hidden;"> 9 <div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
...@@ -84,10 +84,8 @@ ...@@ -84,10 +84,8 @@
84 </template> 84 </template>
85 85
86 <script> 86 <script>
87 -// import { Flexbox, FlexboxItem } from 'vux'
88 // import { mapState } from 'vuex' 87 // import { mapState } from 'vuex'
89 import coord from '@/common/tiantan_v2' 88 import coord from '@/common/tiantan_v2'
90 -// import AMap from 'AMap'
91 import _ from 'lodash'; 89 import _ from 'lodash';
92 import $ from 'jquery'; 90 import $ from 'jquery';
93 //引入定义的信息窗组件 91 //引入定义的信息窗组件
...@@ -157,8 +155,6 @@ export default { ...@@ -157,8 +155,6 @@ export default {
157 data() { 155 data() {
158 return { 156 return {
159 map: '', 157 map: '',
160 - facilities: [],
161 - imageLayer: '',
162 location_options: { 158 location_options: {
163 'showButton': true, // 是否显示定位按钮 159 'showButton': true, // 是否显示定位按钮
164 'buttonPosition': 'LB', // 定位按钮的位置 160 'buttonPosition': 'LB', // 定位按钮的位置
...@@ -231,9 +227,6 @@ export default { ...@@ -231,9 +227,6 @@ export default {
231 }] 227 }]
232 // 初始化地图 228 // 初始化地图
233 this.initMap(); 229 this.initMap();
234 - // this.loadPublicEquipment();
235 - // this.loadScenicSpot();
236 - // this.loadPlant();
237 // this.setMapBoundary(); 230 // this.setMapBoundary();
238 // 使用之前都要再获取一下地址 231 // 使用之前都要再获取一下地址
239 this.getLocation() 232 this.getLocation()
...@@ -301,156 +294,6 @@ export default { ...@@ -301,156 +294,6 @@ export default {
301 // 294 //
302 this.setSpotLayer() 295 this.setSpotLayer()
303 }, 296 },
304 - // layerMap() {
305 - // // 图层地图
306 - // this.imageLayer = new AMap.ImageLayer({
307 - // url: 'http://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg',
308 - // // url: 'https://img.zcool.cn/community/01462356c80e976ac7252ce62bc446.jpg@1280w_1l_0o_100sh.jpg',
309 - // // url: 'https://cdn.ipadbiz.cn/tmp/map_test/xys.jpg',
310 - // bounds: new AMap.Bounds(
311 - // [116.406897, 39.874346], [116.417451, 39.887843] // 对象西南角经纬度和东北角经纬度值
312 - // ),
313 - // opacity: 0.5, // 图层透明度，默认为 1
314 - // zooms: [2, 18],
315 - // zIndex: 6 // 图层的层级，默认为 6
316 - // });
317 - // this.map = new AMap.Map('container', {
318 - // viewMode: '3D', // 设置地图模式
319 - // turboMode: false,
320 - // showIndoorMap: false,
321 - // defaultCursor: 'pointer', // 地图默认鼠标样式
322 - // showBuildingBlock: false, // 是否展示地图 3D 楼块
323 - // zooms: [2, 20], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
324 - // showLabel: false, // 是否展示地图文字和 POI 信息
325 - // zoom: 18, // 设置地图显示的缩放级别
326 - // pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。
327 - // rotation: 0, // 地图顺时针旋转角度，取值范围 [0-360] ，默认值：0
328 - // center: [116.408967, 39.880101], // 设置地图中心点坐标
329 - // forceVector: false,
330 - // rotateEnable: false,
331 - // layers: [
332 - // new AMap.TileLayer.RoadNet(),
333 - // this.imageLayer
334 - // ]
335 - // });
336 - // },
337 - // loadPublicEquipment() { // 加载公共设备图标
338 - // var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
339 - // _.each(coord.sheshi, (x, i) => {
340 - // var marker = new AMap.ElasticMarker({
341 - // position: coord.sheshi[i].position,
342 - // zooms: [14, 20],
343 - // styles: [{
344 - // icon: {
345 - // img: coord.sheshi[i].icon,
346 - // size: [16, 16], // 可见区域的大小
347 - // anchor: 'bottom-center', // 锚点
348 - // fitZoom: 14, // 最合适的级别
349 - // scaleFactor: 2, // 地图放大一级的缩放比例系数
350 - // maxScale: 1.4, // 最大放大比例
351 - // minScale: 0.8 // 最小放大比例
352 - // }
353 - // }],
354 - // zoomStyleMapping
355 - // });
356 - // let infoWindowContent =
357 - // '<div className="custom-infowindow input-card">' +
358 - // '<label style="color:grey">公共厕所</label>' +
359 - // // 为 infowindow 添加自定义事件
360 - // '<div id="lnglat2container" class="btn">我要走过去</div>' +
361 - // '</div>';
362 - // // 创建一个自定义内容的 infowindow 实例
363 - // let infoWindow = new AMap.InfoWindow({
364 - // position: coord.sheshi[i].position,
365 - // offset: new AMap.Pixel(0, -30),
366 - // content: infoWindowContent
367 - // });
368 - // if (clickListener) {
369 - // infoWindow.off('click', clickListener)
370 - // }
371 - // // 绑定景点的点击事件 - 文字出现才能触发
372 - // var clickListener = marker.on('click', (e) => {
373 - // infoWindow.open(this.map);
374 - // })
375 - // //
376 - // this.facilities.push(marker);
377 - // })
378 - // this.map.add(this.facilities);
379 - // },
380 - // loadScenicSpot() { // 加载景点图标
381 - // var spots = [];
382 - // var zoomStyleMapping = { 14: 0, 15: 0, 16: 1, 17: 1, 18: 1, 19: 1, 20: 1 }
383 - // _.each(coord.touristSpots, (x, i) => {
384 - // var marker = new AMap.ElasticMarker({
385 - // position: coord.touristSpots[i].position,
386 - // zooms: [14, 20],
387 - // styles: [{
388 - // icon: {
389 - // img: coord.touristSpots[i].smallIcon,
390 - // size: [16, 16], // 可见区域的大小
391 - // anchor: 'bottom-center', // 锚点
392 - // fitZoom: 14, // 最合适的级别
393 - // scaleFactor: 2, // 地图放大一级的缩放比例系数
394 - // maxScale: 2, // 最大放大比例
395 - // minScale: 1 // 最小放大比例
396 - // },
397 - // label: {
398 - // content: coord.touristSpots[i].name,
399 - // position: 'BM',
400 - // minZoom: coord.touristSpots[i].minZoom
401 - // }
402 - // }, {
403 - // icon: {
404 - // img: coord.touristSpots[i].bigIcon,
405 - // size: coord.touristSpots[i].size,
406 - // anchor: coord.touristSpots[i].anchor,
407 - // fitZoom: 17.5,
408 - // scaleFactor: 2,
409 - // maxScale: 2,
410 - // minScale: 0.125
411 - // },
412 - // label: {
413 - // content: coord.touristSpots[i].name,
414 - // position: 'BM',
415 - // minZoom: coord.touristSpots[i].minZoom
416 - // }
417 - // }],
418 - // zoomStyleMapping
419 - // });
420 - // if (clickListener) {
421 - // AMap.Event.removeListener(clickListener); // 移除地图事件，以绑定时返回的对象作为参数
422 - // }
423 - // // 绑定景点的点击事件 - 文字出现才能触发
424 - // var clickListener = AMap.Event.addListener(marker, 'click', function (e) {
425 - // alert(coord.touristSpots[i].name)
426 - // });
427 - // spots.push(marker);
428 - // })
429 - // this.map.add(spots);
430 - // },
431 - // loadPlant() { // 加载植物图标
432 - // var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
433 - // var trees = new AMap.ElasticMarker({
434 - // position: [116.410908, 39.88057],
435 - // zooms: [15.5, 20],
436 - // styles: [{
437 - // icon: {
438 - // img: 'https://a.amap.com/jsapi_demos/static/resource/img/trees.png',
439 - // size: [366, 201],
440 - // anchor: 'center',
441 - // imageSize: [865, 1156],
442 - // imageOffset: [-44, -480],
443 - // fitZoom: 17.5,
444 - // scaleFactor: 2,
445 - // maxScale: 2,
446 - // minScale: 0.125
447 - // }
448 - // }],
449 - // zoomStyleMapping
450 - // });
451 -
452 - // this.map.add(trees);
453 - // },
454 loadSpotMaker() { // 加载景点标记 297 loadSpotMaker() { // 加载景点标记
455 var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 }; 298 var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
456 _.each(coord.spotInfo, (x, i) => { 299 _.each(coord.spotInfo, (x, i) => {
...@@ -613,12 +456,6 @@ export default { ...@@ -613,12 +456,6 @@ export default {
613 fillColor: '#CFE7AA' 456 fillColor: '#CFE7AA'
614 }); 457 });
615 }, 458 },
616 - showPublic() {
617 - this.map.add(this.facilities);
618 - },
619 - hidePublic() {
620 - this.map.remove(this.facilities);
621 - },
622 isPointInRing () { // 是否在景区范围 459 isPointInRing () { // 是否在景区范围
623 let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [ 460 let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [
624 [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005] 461 [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
......