|
- <!DOCTYPE html>
- <html lang="en">
-
- <head>
-
- <title>地图</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <!-- <script src="./js/flexible.js"></script> -->
- <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>
- <!-- <div class="aabb">11231231</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");
- }
- });
- });
- });
- }
- })
-
- </script>
-
- </html>
|