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 = [
},
],
},
{
name: '预警演示',
position: [120.587747, 31.314202],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
details: [
{
name: '',
note: '',
url: '',
},
],
},
];
var activityInfo = [
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-06-07 10:59:05
* @LastEditTime: 2023-06-07 11:26:02
* @FilePath: /map-demo/src/views/index.vue
* @Description: 文件描述
* @Description: 地图主体页面
-->
<template>
<div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
......@@ -84,10 +84,8 @@
</template>
<script>
// import { Flexbox, FlexboxItem } from 'vux'
// import { mapState } from 'vuex'
import coord from '@/common/tiantan_v2'
// import AMap from 'AMap'
import _ from 'lodash';
import $ from 'jquery';
//引入定义的信息窗组件
......@@ -157,8 +155,6 @@ export default {
data() {
return {
map: '',
facilities: [],
imageLayer: '',
location_options: {
'showButton': true, // 是否显示定位按钮
'buttonPosition': 'LB', // 定位按钮的位置
......@@ -231,9 +227,6 @@ export default {
}]
// 初始化地图
this.initMap();
// this.loadPublicEquipment();
// this.loadScenicSpot();
// this.loadPlant();
// this.setMapBoundary();
// 使用之前都要再获取一下地址
this.getLocation()
......@@ -301,156 +294,6 @@ export default {
//
this.setSpotLayer()
},
// layerMap() {
// // 图层地图
// this.imageLayer = new AMap.ImageLayer({
// url: 'http://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg',
// // url: 'https://img.zcool.cn/community/01462356c80e976ac7252ce62bc446.jpg@1280w_1l_0o_100sh.jpg',
// // url: 'https://cdn.ipadbiz.cn/tmp/map_test/xys.jpg',
// bounds: new AMap.Bounds(
// [116.406897, 39.874346], [116.417451, 39.887843] // 对象西南角经纬度和东北角经纬度值
// ),
// opacity: 0.5, // 图层透明度，默认为 1
// zooms: [2, 18],
// zIndex: 6 // 图层的层级，默认为 6
// });
// this.map = new AMap.Map('container', {
// viewMode: '3D', // 设置地图模式
// turboMode: false,
// showIndoorMap: false,
// defaultCursor: 'pointer', // 地图默认鼠标样式
// showBuildingBlock: false, // 是否展示地图 3D 楼块
// zooms: [2, 20], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
// showLabel: false, // 是否展示地图文字和 POI 信息
// zoom: 18, // 设置地图显示的缩放级别
// pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。
// rotation: 0, // 地图顺时针旋转角度，取值范围 [0-360] ，默认值：0
// center: [116.408967, 39.880101], // 设置地图中心点坐标
// forceVector: false,
// rotateEnable: false,
// layers: [
// new AMap.TileLayer.RoadNet(),
// this.imageLayer
// ]
// });
// },
// loadPublicEquipment() { // 加载公共设备图标
// var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
// _.each(coord.sheshi, (x, i) => {
// var marker = new AMap.ElasticMarker({
// position: coord.sheshi[i].position,
// zooms: [14, 20],
// styles: [{
// icon: {
// img: coord.sheshi[i].icon,
// size: [16, 16], // 可见区域的大小
// anchor: 'bottom-center', // 锚点
// fitZoom: 14, // 最合适的级别
// scaleFactor: 2, // 地图放大一级的缩放比例系数
// maxScale: 1.4, // 最大放大比例
// minScale: 0.8 // 最小放大比例
// }
// }],
// zoomStyleMapping
// });
// let infoWindowContent =
// '<div className="custom-infowindow input-card">' +
// '<label style="color:grey">公共厕所</label>' +
// // 为 infowindow 添加自定义事件
// '<div id="lnglat2container" class="btn">我要走过去</div>' +
// '</div>';
// // 创建一个自定义内容的 infowindow 实例
// let infoWindow = new AMap.InfoWindow({
// position: coord.sheshi[i].position,
// offset: new AMap.Pixel(0, -30),
// content: infoWindowContent
// });
// if (clickListener) {
// infoWindow.off('click', clickListener)
// }
// // 绑定景点的点击事件 - 文字出现才能触发
// var clickListener = marker.on('click', (e) => {
// infoWindow.open(this.map);
// })
// //
// this.facilities.push(marker);
// })
// this.map.add(this.facilities);
// },
// loadScenicSpot() { // 加载景点图标
// var spots = [];
// var zoomStyleMapping = { 14: 0, 15: 0, 16: 1, 17: 1, 18: 1, 19: 1, 20: 1 }
// _.each(coord.touristSpots, (x, i) => {
// var marker = new AMap.ElasticMarker({
// position: coord.touristSpots[i].position,
// zooms: [14, 20],
// styles: [{
// icon: {
// img: coord.touristSpots[i].smallIcon,
// size: [16, 16], // 可见区域的大小
// anchor: 'bottom-center', // 锚点
// fitZoom: 14, // 最合适的级别
// scaleFactor: 2, // 地图放大一级的缩放比例系数
// maxScale: 2, // 最大放大比例
// minScale: 1 // 最小放大比例
// },
// label: {
// content: coord.touristSpots[i].name,
// position: 'BM',
// minZoom: coord.touristSpots[i].minZoom
// }
// }, {
// icon: {
// img: coord.touristSpots[i].bigIcon,
// size: coord.touristSpots[i].size,
// anchor: coord.touristSpots[i].anchor,
// fitZoom: 17.5,
// scaleFactor: 2,
// maxScale: 2,
// minScale: 0.125
// },
// label: {
// content: coord.touristSpots[i].name,
// position: 'BM',
// minZoom: coord.touristSpots[i].minZoom
// }
// }],
// zoomStyleMapping
// });
// if (clickListener) {
// AMap.Event.removeListener(clickListener); // 移除地图事件，以绑定时返回的对象作为参数
// }
// // 绑定景点的点击事件 - 文字出现才能触发
// var clickListener = AMap.Event.addListener(marker, 'click', function (e) {
// alert(coord.touristSpots[i].name)
// });
// spots.push(marker);
// })
// this.map.add(spots);
// },
// loadPlant() { // 加载植物图标
// var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
// var trees = new AMap.ElasticMarker({
// position: [116.410908, 39.88057],
// zooms: [15.5, 20],
// styles: [{
// icon: {
// img: 'https://a.amap.com/jsapi_demos/static/resource/img/trees.png',
// size: [366, 201],
// anchor: 'center',
// imageSize: [865, 1156],
// imageOffset: [-44, -480],
// fitZoom: 17.5,
// scaleFactor: 2,
// maxScale: 2,
// minScale: 0.125
// }
// }],
// zoomStyleMapping
// });
// this.map.add(trees);
// },
loadSpotMaker() { // 加载景点标记
var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
_.each(coord.spotInfo, (x, i) => {
......@@ -613,12 +456,6 @@ export default {
fillColor: '#CFE7AA'
});
},
showPublic() {
this.map.add(this.facilities);
},
hidePublic() {
this.map.remove(this.facilities);
},
isPointInRing () { // 是否在景区范围
let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [
[120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
......