Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
20d06d5c 1 parent 67659feb

fix

Inline Side-by-side
Showing 3 changed files with 90 additions and 89 deletions
...@@ -13,3 +13,4 @@ src/test/mocha/test.js ...@@ -13,3 +13,4 @@ src/test/mocha/test.js
13 cypress.json 13 cypress.json
14 src/test 14 src/test
15 .idea 15 .idea
16 +map
......
...@@ -12,10 +12,8 @@ declare module '@vue/runtime-core' { ...@@ -12,10 +12,8 @@ declare module '@vue/runtime-core' {
12 InfoWindow: typeof import('./src/components/InfoWindow.vue')['default'] 12 InfoWindow: typeof import('./src/components/InfoWindow.vue')['default']
13 RouterLink: typeof import('vue-router')['RouterLink'] 13 RouterLink: typeof import('vue-router')['RouterLink']
14 RouterView: typeof import('vue-router')['RouterView'] 14 RouterView: typeof import('vue-router')['RouterView']
15 - VanCol: typeof import('vant/es')['Col']
16 VanDialog: typeof import('vant/es')['Dialog'] 15 VanDialog: typeof import('vant/es')['Dialog']
17 VanIcon: typeof import('vant/es')['Icon'] 16 VanIcon: typeof import('vant/es')['Icon']
18 VanPopup: typeof import('vant/es')['Popup'] 17 VanPopup: typeof import('vant/es')['Popup']
19 - VanRow: typeof import('vant/es')['Row']
20 } 18 }
21 } 19 }
......
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-01 17:42:52 4 + * @LastEditTime: 2023-06-02 10:57:57
5 * @FilePath: /map-demo/src/views/index.vue 5 * @FilePath: /map-demo/src/views/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -263,46 +263,48 @@ export default { ...@@ -263,46 +263,48 @@ export default {
263 rotateEnable: false, 263 rotateEnable: false,
264 layers: [ 264 layers: [
265 // new AMap.TileLayer.RoadNet(), 265 // new AMap.TileLayer.RoadNet(),
266 - ] 266 + ],
267 + features: ['bg'], // 设置地图上显示的元素种类
268 + animateEnable: false, // 地图平移过程中是否使用动画
267 }); 269 });
268 // 添加地图点击事件 270 // 添加地图点击事件
269 this.map.on("click", this.showInfoClick); 271 this.map.on("click", this.showInfoClick);
270 // 272 //
271 this.setSpotLayer() 273 this.setSpotLayer()
272 }, 274 },
273 - layerMap() { 275 + // layerMap() {
274 - // 图层地图 276 + // // 图层地图
275 - this.imageLayer = new AMap.ImageLayer({ 277 + // this.imageLayer = new AMap.ImageLayer({
276 - url: 'http://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg', 278 + // url: 'http://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg',
277 - // url: 'https://img.zcool.cn/community/01462356c80e976ac7252ce62bc446.jpg@1280w_1l_0o_100sh.jpg', 279 + // // url: 'https://img.zcool.cn/community/01462356c80e976ac7252ce62bc446.jpg@1280w_1l_0o_100sh.jpg',
278 - // url: 'https://cdn.ipadbiz.cn/tmp/map_test/xys.jpg', 280 + // // url: 'https://cdn.ipadbiz.cn/tmp/map_test/xys.jpg',
279 - bounds: new AMap.Bounds( 281 + // bounds: new AMap.Bounds(
280 - [116.406897, 39.874346], [116.417451, 39.887843] // 对象西南角经纬度和东北角经纬度值 282 + // [116.406897, 39.874346], [116.417451, 39.887843] // 对象西南角经纬度和东北角经纬度值
281 - ), 283 + // ),
282 - opacity: 0.5, // 图层透明度，默认为 1 284 + // opacity: 0.5, // 图层透明度，默认为 1
283 - zooms: [2, 18], 285 + // zooms: [2, 18],
284 - zIndex: 6 // 图层的层级，默认为 6 286 + // zIndex: 6 // 图层的层级，默认为 6
285 - }); 287 + // });
286 - this.map = new AMap.Map('container', { 288 + // this.map = new AMap.Map('container', {
287 - viewMode: '3D', // 设置地图模式 289 + // viewMode: '3D', // 设置地图模式
288 - turboMode: false, 290 + // turboMode: false,
289 - showIndoorMap: false, 291 + // showIndoorMap: false,
290 - defaultCursor: 'pointer', // 地图默认鼠标样式 292 + // defaultCursor: 'pointer', // 地图默认鼠标样式
291 - showBuildingBlock: false, // 是否展示地图 3D 楼块 293 + // showBuildingBlock: false, // 是否展示地图 3D 楼块
292 - zooms: [2, 20], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30] 294 + // zooms: [2, 20], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
293 - showLabel: false, // 是否展示地图文字和 POI 信息 295 + // showLabel: false, // 是否展示地图文字和 POI 信息
294 - zoom: 18, // 设置地图显示的缩放级别 296 + // zoom: 18, // 设置地图显示的缩放级别
295 - pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。 297 + // pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。
296 - rotation: 0, // 地图顺时针旋转角度，取值范围 [0-360] ，默认值：0 298 + // rotation: 0, // 地图顺时针旋转角度，取值范围 [0-360] ，默认值：0
297 - center: [116.408967, 39.880101], // 设置地图中心点坐标 299 + // center: [116.408967, 39.880101], // 设置地图中心点坐标
298 - forceVector: false, 300 + // forceVector: false,
299 - rotateEnable: false, 301 + // rotateEnable: false,
300 - layers: [ 302 + // layers: [
301 - new AMap.TileLayer.RoadNet(), 303 + // new AMap.TileLayer.RoadNet(),
302 - this.imageLayer 304 + // this.imageLayer
303 - ] 305 + // ]
304 - }); 306 + // });
305 - }, 307 + // },
306 // loadPublicEquipment() { // 加载公共设备图标 308 // loadPublicEquipment() { // 加载公共设备图标
307 // var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 }; 309 // var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
308 // _.each(coord.sheshi, (x, i) => { 310 // _.each(coord.sheshi, (x, i) => {
...@@ -346,57 +348,57 @@ export default { ...@@ -346,57 +348,57 @@ export default {
346 // }) 348 // })
347 // this.map.add(this.facilities); 349 // this.map.add(this.facilities);
348 // }, 350 // },
349 - loadScenicSpot() { // 加载景点图标 351 + // loadScenicSpot() { // 加载景点图标
350 - var spots = []; 352 + // var spots = [];
351 - var zoomStyleMapping = { 14: 0, 15: 0, 16: 1, 17: 1, 18: 1, 19: 1, 20: 1 } 353 + // var zoomStyleMapping = { 14: 0, 15: 0, 16: 1, 17: 1, 18: 1, 19: 1, 20: 1 }
352 - _.each(coord.touristSpots, (x, i) => { 354 + // _.each(coord.touristSpots, (x, i) => {
353 - var marker = new AMap.ElasticMarker({ 355 + // var marker = new AMap.ElasticMarker({
354 - position: coord.touristSpots[i].position, 356 + // position: coord.touristSpots[i].position,
355 - zooms: [14, 20], 357 + // zooms: [14, 20],
356 - styles: [{ 358 + // styles: [{
357 - icon: { 359 + // icon: {
358 - img: coord.touristSpots[i].smallIcon, 360 + // img: coord.touristSpots[i].smallIcon,
359 - size: [16, 16], // 可见区域的大小 361 + // size: [16, 16], // 可见区域的大小
360 - anchor: 'bottom-center', // 锚点 362 + // anchor: 'bottom-center', // 锚点
361 - fitZoom: 14, // 最合适的级别 363 + // fitZoom: 14, // 最合适的级别
362 - scaleFactor: 2, // 地图放大一级的缩放比例系数 364 + // scaleFactor: 2, // 地图放大一级的缩放比例系数
363 - maxScale: 2, // 最大放大比例 365 + // maxScale: 2, // 最大放大比例
364 - minScale: 1 // 最小放大比例 366 + // minScale: 1 // 最小放大比例
365 - }, 367 + // },
366 - label: { 368 + // label: {
367 - content: coord.touristSpots[i].name, 369 + // content: coord.touristSpots[i].name,
368 - position: 'BM', 370 + // position: 'BM',
369 - minZoom: coord.touristSpots[i].minZoom 371 + // minZoom: coord.touristSpots[i].minZoom
370 - } 372 + // }
371 - }, { 373 + // }, {
372 - icon: { 374 + // icon: {
373 - img: coord.touristSpots[i].bigIcon, 375 + // img: coord.touristSpots[i].bigIcon,
374 - size: coord.touristSpots[i].size, 376 + // size: coord.touristSpots[i].size,
375 - anchor: coord.touristSpots[i].anchor, 377 + // anchor: coord.touristSpots[i].anchor,
376 - fitZoom: 17.5, 378 + // fitZoom: 17.5,
377 - scaleFactor: 2, 379 + // scaleFactor: 2,
378 - maxScale: 2, 380 + // maxScale: 2,
379 - minScale: 0.125 381 + // minScale: 0.125
380 - }, 382 + // },
381 - label: { 383 + // label: {
382 - content: coord.touristSpots[i].name, 384 + // content: coord.touristSpots[i].name,
383 - position: 'BM', 385 + // position: 'BM',
384 - minZoom: coord.touristSpots[i].minZoom 386 + // minZoom: coord.touristSpots[i].minZoom
385 - } 387 + // }
386 - }], 388 + // }],
387 - zoomStyleMapping 389 + // zoomStyleMapping
388 - }); 390 + // });
389 - if (clickListener) { 391 + // if (clickListener) {
390 - AMap.Event.removeListener(clickListener); // 移除地图事件，以绑定时返回的对象作为参数 392 + // AMap.Event.removeListener(clickListener); // 移除地图事件，以绑定时返回的对象作为参数
391 - } 393 + // }
392 - // 绑定景点的点击事件 - 文字出现才能触发 394 + // // 绑定景点的点击事件 - 文字出现才能触发
393 - var clickListener = AMap.Event.addListener(marker, 'click', function (e) { 395 + // var clickListener = AMap.Event.addListener(marker, 'click', function (e) {
394 - alert(coord.touristSpots[i].name) 396 + // alert(coord.touristSpots[i].name)
395 - }); 397 + // });
396 - spots.push(marker); 398 + // spots.push(marker);
397 - }) 399 + // })
398 - this.map.add(spots); 400 + // this.map.add(spots);
399 - }, 401 + // },
400 // loadPlant() { // 加载植物图标 402 // loadPlant() { // 加载植物图标
401 // var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 }; 403 // var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
402 // var trees = new AMap.ElasticMarker({ 404 // var trees = new AMap.ElasticMarker({
...@@ -774,7 +776,7 @@ export default { ...@@ -774,7 +776,7 @@ export default {
774 } 776 }
775 }); 777 });
776 778
777 - layer1.setMap(this.map); 779 + // layer1.setMap(this.map);
778 780
779 // 只显示相应区域，移动会回到选定范围 781 // 只显示相应区域，移动会回到选定范围
780 // this.lockMapBounds() 782 // this.lockMapBounds()
......