|
- <!DOCTYPE html>
- <html lang="en">
-
- <head>
-
- <title>地图</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script src="./lib/fengmap.map.min.js"></script>
- <script src="./lib/fengmap.plugin.min.js"></script>
- <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
-
- <link rel="stylesheet" href="./style/fengmap.css">
- </head>
-
- <body>
- <div id="fengmap"></div>
- </body>
- <script>
- document.write("<s"+"cript type='text/javascript' src='./common/js/h5_game_common.js?version="+Math.random()+"'></scr"+"ipt>");
- var map;
- // let baseUrl='https://ctest.malls.iformall.com/C';
- let baseUrl='/C';
- $.ajax({
- url:baseUrl + "/api/fengniaomap/getConfig",
- type:"GET",
- dataType: "json", //返回数据格式为json
- headers: {
- 'content-type':'application/json',
- "token":"c34103fa-1d40-4ba7-95a4-28975e1d9143:789:wx-cuser",
- // "token":getQueryString('token')
- },
- success:function(res){
- const data = res.data;
- let mapOptions = {
- appName: data.appName,
- key: data.appKey,
- mapID: data.mapId,
- container: document.getElementById("fengmap"),
- // mapURL: `/api/mapfile/${data.tenantId}/`,
- // themeURL: `/api/mapfile/${data.tenantId}/theme/`,
- mapURL:"./data/",
- themeURL:"./data/theme/",
- themeID: data.themeId,
- level: data.defaultFloor
- }
- let map = new fengmap.FMMap(mapOptions);
- // let mapOptions = {
- // appName: "金茂泊悦地图",
- // key: "cb54a3aa3a7066ec99b565363f63cb8c",
- // mapID: "1412326198669561858",
- // container: document.getElementById("fengmap"),
- // // mapURL: `/api/mapfile/${data.tenantId}/`,
- // // themeURL: `/api/mapfile/${data.tenantId}/theme/`,
- // mapURL:"../../data/",
- // themeURL:"../../data/theme/",
- // themeID: '2001',
- // level: 1
- // }
- let toolbarOptions = {
- //控件产生
- floorButtonCount: 3,
- viewModeControl: true, //是否显示2、3D切换按钮,默认为true
- floorModeControl: true, // 是否显示楼层控件,默认为true
- needAllLayerBtn: true, //是否显示单多层按钮,默认为true
- position: 3, //控件位置。分为左上 1、左下2、右上3、右下4。
- offset: { x: 0, y: 166 } //控件位置偏移。{x:10,y:10},基于原始位置的x,y方向的偏移。
- };
- let zoomOptions = {
- position: 3, //分为左上 1、左下2、右上3、右下4。
- offset: { x: 0, y: 50 } //控件位置偏移。{x:10,y:10},基于原始位置的x,y方向的偏移。
- };
- let compassOptions = {
- position: 2 //分为左上 1、左下2、右上3、右下4。
- };
-
-
- map.on("loaded", function() {
- let toolbar = new fengmap.FMToolbar(toolbarOptions); //楼层控件
- let zoomToolbar = new fengmap.FMZoomControl(zoomOptions); //缩放控件
- let compass = new fengmap.FMCompass(compassOptions); //指南针控件
- toolbar.addTo(map);
- zoomToolbar.addTo(map);
- compass.addTo(map);
-
- compass.on("click", function() {
- map.setRotation({
- rotation: 0,
- animate: true,
- duration: 0.3,
- finish: function() {
- // console.log("setRotation");
- }
- });
- });
- });
- }
- })
- // setTimeout(() => {
- // var options = {
- // appName: '金茂泊悦地图',
- // key: 'cb54a3aa3a7066ec99b565363f63cb8c',
- // mapID: '1412326198669561858',
- // container: document.getElementById('fengmap'),
- // mapURL: './data/',
- // themeURL: './data/theme/',
- // themeID: '2001',
-
- // }
- // let toolbarOptions = {
- // //控件产生
- // floorButtonCount: 3,
- // viewModeControl: true, //是否显示2、3D切换按钮,默认为true
- // floorModeControl: true, // 是否显示楼层控件,默认为true
- // needAllLayerBtn: true, //是否显示单多层按钮,默认为true
- // position: 3, //控件位置。分为左上 1、左下2、右上3、右下4。
- // offset: { x: 0, y: 166 } //控件位置偏移。{x:10,y:10},基于原始位置的x,y方向的偏移。
- // };
- // let zoomOptions = {
- // position: 3, //分为左上 1、左下2、右上3、右下4。
- // offset: { x: 0, y: 50 } //控件位置偏移。{x:10,y:10},基于原始位置的x,y方向的偏移。
- // };
- // let compassOptions = {
- // position: 2 //分为左上 1、左下2、右上3、右下4。
- // };
- // map = new fengmap.FMMap(options);
-
- // map.on('loaded', function () {
- // let toolbar = new fengmap.FMToolbar(toolbarOptions); //楼层控件
- // let zoomToolbar = new fengmap.FMZoomControl(zoomOptions); //缩放控件
- // let compass = new fengmap.FMCompass(compassOptions); //指南针控件
- // toolbar.addTo(map);
- // zoomToolbar.addTo(map);
- // compass.addTo(map);
- // compass.on("click", function () {
- // map.setRotation({
- // rotation: 0,
- // animate: true,
- // duration: 0.3,
- // finish: function () {
- // // console.log("setRotation");
- // }
- // });
- // });
- // });
- // }, 2000);
-
-
- </script>
-
- </html>
|