HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

官方tabbar扩展、完全自定义、点击带动画效果、可设置字体粗细、隐藏图标或文本、图标或文本大小、选中和未选中的样式等等

官方tabbar扩展、完全自定义、点击带动画效果、可设置字体粗细、隐藏图标或文本、图标或文本大小、选中和未选中的样式等等:https://ext.dcloud.net.cn/plugin?id=10343

继续阅读 »

官方tabbar扩展、完全自定义、点击带动画效果、可设置字体粗细、隐藏图标或文本、图标或文本大小、选中和未选中的样式等等:https://ext.dcloud.net.cn/plugin?id=10343

收起阅读 »

在 @vue/composition-api 中使用 createSelectorQuery 的 this 问题

  • 当你在 @vue/composition-api 使用 createSelectorQuery 时获取不到 this, 则使用 getCurrentInstance 替换
  • 演示代码:
import { getCurrentInstance } from '@vue/composition-api'  

export default {  
  setup() {  
    const app = getCurrentInstance()  
    uni  
      .createSelectorQuery()  
      .in(app.proxy)  
      .select('#myCanvas')  
      .node(data => {  
        console.log(data) // 输出:{ nodeCanvasType: "2d", node: Cy }  
      })  
      .exec()  
  }  
}
  • 如果是vue3则去掉 proxy 即可
import { getCurrentInstance } from '@vue/composition-api'  

export default {  
  setup() {  
    const app = getCurrentInstance()  
    uni  
      .createSelectorQuery()  
      .in(app)  
      .select('#myCanvas')  
      .node(data => {  
        console.log(data) // 输出:{ nodeCanvasType: "2d", node: Cy }  
      })  
      .exec()  
  }  
}
继续阅读 »
  • 当你在 @vue/composition-api 使用 createSelectorQuery 时获取不到 this, 则使用 getCurrentInstance 替换
  • 演示代码:
import { getCurrentInstance } from '@vue/composition-api'  

export default {  
  setup() {  
    const app = getCurrentInstance()  
    uni  
      .createSelectorQuery()  
      .in(app.proxy)  
      .select('#myCanvas')  
      .node(data => {  
        console.log(data) // 输出:{ nodeCanvasType: "2d", node: Cy }  
      })  
      .exec()  
  }  
}
  • 如果是vue3则去掉 proxy 即可
import { getCurrentInstance } from '@vue/composition-api'  

export default {  
  setup() {  
    const app = getCurrentInstance()  
    uni  
      .createSelectorQuery()  
      .in(app)  
      .select('#myCanvas')  
      .node(data => {  
        console.log(data) // 输出:{ nodeCanvasType: "2d", node: Cy }  
      })  
      .exec()  
  }  
}
收起阅读 »

Some App Tech Support

一、软件介绍
名称:轻速云
类型:软件工具

二、功能
轻速云在线教育云平台,提供在线考试系统、在线培训系统、网上考试系统、知识竞赛等多方面的培训考试软件服务,超高并发,支持电脑、Pad和手机三端使用,并且可以实现微信考试、钉钉考试或与其他App无缝衔接,我们以更专业可靠的实力让您组织在线培训考试变得简单方便。

三、Getting Support:

邮箱: disanfang@qingsuyun.com

继续阅读 »

一、软件介绍
名称:轻速云
类型:软件工具

二、功能
轻速云在线教育云平台,提供在线考试系统、在线培训系统、网上考试系统、知识竞赛等多方面的培训考试软件服务,超高并发,支持电脑、Pad和手机三端使用,并且可以实现微信考试、钉钉考试或与其他App无缝衔接,我们以更专业可靠的实力让您组织在线培训考试变得简单方便。

三、Getting Support:

邮箱: disanfang@qingsuyun.com

收起阅读 »

VUE中定义的变量的生命期(个人测试, 如表述有误,欢迎指正)

我做了三个单元
common/myUtils.js

pages/index/index.vue (默认)

pages/page2/page2.vue

以下例子是为了证明:
这个例子,主要是证明:
1>.一个vue页面中,在script第一级中(非export),定义的变量,对自身是有效的
2>.即便这个vue页面关闭后,再打开,这个变量值仍是上次的值,
3>.如果你要避免这种情况, 你就要在onload或onshow中,初始化了一下

4>.第2个vue页面是无法访问到第1个vue页面的值(即使你已在第1页中已export了这个变量)
5>.但是,如果你在目录common中的js文件中定义了一个变量,则在vue中import一下,就可以访问\
6>.但也仅限于读取, 无法写入更改这个变量的值,
7>.如果你实在想搞个全局变量,可以用uni.setStorageSync,uni.getStorageSync来实现

common/myUtils.js

var kkkk='hello';  

export{  
  kkkk  

}
继续阅读 »

我做了三个单元
common/myUtils.js

pages/index/index.vue (默认)

pages/page2/page2.vue

以下例子是为了证明:
这个例子,主要是证明:
1>.一个vue页面中,在script第一级中(非export),定义的变量,对自身是有效的
2>.即便这个vue页面关闭后,再打开,这个变量值仍是上次的值,
3>.如果你要避免这种情况, 你就要在onload或onshow中,初始化了一下

4>.第2个vue页面是无法访问到第1个vue页面的值(即使你已在第1页中已export了这个变量)
5>.但是,如果你在目录common中的js文件中定义了一个变量,则在vue中import一下,就可以访问\
6>.但也仅限于读取, 无法写入更改这个变量的值,
7>.如果你实在想搞个全局变量,可以用uni.setStorageSync,uni.getStorageSync来实现

common/myUtils.js

var kkkk='hello';  

export{  
  kkkk  

}
收起阅读 »

plus.cache.clear实现白名单效果保存localStorage

本地存储 缓存

实现方法很简单,使用前把所有localStorage的key和值存储到两个数组,plus.cache.clear清除完成后利用循环重新写入即可

function plusReady() {  
    var key = []  
    var key_ = []  
    for (let i = 0; i < localStorage.length; i++) {  
        key.push(localStorage.key(i))  //获取所有localStorage的key  
        key_.push(localStorage.getItem(localStorage.key(i)))  //获取所有localStorage的值  
        length = localStorage.length  //获取所有localStorage数量  
        if (i == localStorage.length - 1) {  
            plus.nativeUI.confirm("确定清除缓存数据?", function (e) {  
                if (e.index == 0) {  
                    plus.cache.clear(function () { });//清除缓存  
                    plus.nativeUI.toast('已清除缓存');  
                    for (let a = 0; a < length; a++) {  
                        localStorage.setItem(key[a], key_[a])  //清除完毕后利用重新写入localStorage  
                    }  
                }  
            }, "清除缓存数据", ["确定", "取消"]);  
        }  
    }  
}  
if (window.plus) {  
    plusReady();  
} else {  
    document.addEventListener('plusready', plusReady, false);  
}
继续阅读 »

实现方法很简单,使用前把所有localStorage的key和值存储到两个数组,plus.cache.clear清除完成后利用循环重新写入即可

function plusReady() {  
    var key = []  
    var key_ = []  
    for (let i = 0; i < localStorage.length; i++) {  
        key.push(localStorage.key(i))  //获取所有localStorage的key  
        key_.push(localStorage.getItem(localStorage.key(i)))  //获取所有localStorage的值  
        length = localStorage.length  //获取所有localStorage数量  
        if (i == localStorage.length - 1) {  
            plus.nativeUI.confirm("确定清除缓存数据?", function (e) {  
                if (e.index == 0) {  
                    plus.cache.clear(function () { });//清除缓存  
                    plus.nativeUI.toast('已清除缓存');  
                    for (let a = 0; a < length; a++) {  
                        localStorage.setItem(key[a], key_[a])  //清除完毕后利用重新写入localStorage  
                    }  
                }  
            }, "清除缓存数据", ["确定", "取消"]);  
        }  
    }  
}  
if (window.plus) {  
    plusReady();  
} else {  
    document.addEventListener('plusready', plusReady, false);  
}
收起阅读 »

关于我的插件easyEcharts1.0.5更新新版本报插件名称问题

升级更新

为什么我的easy-Echarts1.0.5更新新版本一直提示下面附件的问题,单个组件已符合命名规范了。官方请告知详情

为什么我的easy-Echarts1.0.5更新新版本一直提示下面附件的问题,单个组件已符合命名规范了。官方请告知详情

分享一个苹果运行自定义基座失败终极解决方案!

本人遇到了一次苹果运行自定义基座失败的提示,如图1
不论我重启电脑、重启手机、升级手机、还是重新打包(测试UDID没有问题)均无法解决。最后使用appuploader手动将基座包安装到手机上后即可解决,希望官方也想办法解决一下!

继续阅读 »

本人遇到了一次苹果运行自定义基座失败的提示,如图1
不论我重启电脑、重启手机、升级手机、还是重新打包(测试UDID没有问题)均无法解决。最后使用appuploader手动将基座包安装到手机上后即可解决,希望官方也想办法解决一下!

收起阅读 »

如何使用 uni-app 30分钟快速开发即时通讯应用|开发者活动

即时通信 uniapp

“一套代码,多端运行”是很多开发团队的梦想,基于 uni-app 跨平台框架支持 iOS、Android、Web以及各种小程序并支持平台间互通,快速实现搭建多端即时通讯功能,降低开发难度,提升开发效率。
12月13日 晚 19:00,环信线上公开课《使用 uniapp 30分钟快速开发即时通讯应用》为题,讲解多端 uni-app 基础框架知识及搭建即时通讯功能项目实战技巧,掌握开发步骤及思路,大大增强代码复用率,提升效率。来直播间 get 环信 IM 的正确打开方式!

一、时间地点

活动时间:12 月 13 日(星期二)19:00-20:00
活动地点:线上直播

二、演讲大纲

uni-app 跨平台框架介绍
使用uni-app 生成 Android&iOS 应用
如何搭建自己的即时通讯应用
IM实战篇-uni-app 经典问题答疑
三、活动报名

报名链接:报名表单

继续阅读 »

“一套代码,多端运行”是很多开发团队的梦想,基于 uni-app 跨平台框架支持 iOS、Android、Web以及各种小程序并支持平台间互通,快速实现搭建多端即时通讯功能,降低开发难度,提升开发效率。
12月13日 晚 19:00,环信线上公开课《使用 uniapp 30分钟快速开发即时通讯应用》为题,讲解多端 uni-app 基础框架知识及搭建即时通讯功能项目实战技巧,掌握开发步骤及思路,大大增强代码复用率,提升效率。来直播间 get 环信 IM 的正确打开方式!

一、时间地点

活动时间:12 月 13 日(星期二)19:00-20:00
活动地点:线上直播

二、演讲大纲

uni-app 跨平台框架介绍
使用uni-app 生成 Android&iOS 应用
如何搭建自己的即时通讯应用
IM实战篇-uni-app 经典问题答疑
三、活动报名

报名链接:报名表单

收起阅读 »

【通知权限】app判断通知权限是否开启,前往系统设置页面开关通知权限

Push uniapp

来源:https://ext.dcloud.net.cn/plugin?id=789

// 判断通知权限是否开启  
function isOn() {  
    // #ifdef APP-PLUS  
    if (plus.os.name == "Android") {  
        var main = plus.android.runtimeMainActivity();  
        var NotificationManagerCompat = plus.android.importClass("android.support.v4.app.NotificationManagerCompat");  
        if (NotificationManagerCompat == null) {  
            NotificationManagerCompat = plus.android.importClass("androidx.core.app.NotificationManagerCompat");  
        }  
        var areNotificationsEnabled = NotificationManagerCompat.from(main).areNotificationsEnabled();  
        return areNotificationsEnabled;  
    } else if (plus.os.name == "iOS") {  
        var isIosOn = undefined;  
        var types = 0;  
        var app = plus.ios.invoke("UIApplication", "sharedApplication");  
        var settings = plus.ios.invoke(app, "currentUserNotificationSettings");  
        if (settings) {  
            types = settings.plusGetAttribute("types");  
            plus.ios.deleteObject(settings);  
        } else {  
            types = plus.ios.invoke(app, "enabledRemoteNotificationTypes");  
        }  
        plus.ios.deleteObject(app);  
        isIosOn = 0 != types;  
        return isIosOn;  
    }  
    // #endif  
}  

// 前往系统设置页面开启或关闭通知权限  
function switchPushPermissions() {  
    // #ifdef APP-PLUS  
    let title = isOn() ? "通知权限关闭提醒" : "通知权限开启提醒";  
    let content = isOn()  
        ? "通知权限已开启,是否前往设置关闭?"  
        : "您还没有开启通知权限,无法接受到消息通知,是否前往设置?";  
    // 打开安卓系统设置页面  
    let openAndroidSetting = () => {  
        var main = plus.android.runtimeMainActivity();  
        var pkName = main.getPackageName();  
        var uid = main.getApplicationInfo().plusGetAttribute("uid");  
        var Intent = plus.android.importClass("android.content.Intent");  
        var Build = plus.android.importClass("android.os.Build");  
        //android 8.0引导  
        if (Build.VERSION.SDK_INT >= 26) {  
            var intent = new Intent("android.settings.APP_NOTIFICATION_SETTINGS");  
            intent.putExtra("android.provider.extra.APP_PACKAGE", pkName);  
        } else if (Build.VERSION.SDK_INT >= 21) {  
            //android 5.0-7.0  
            var intent = new Intent("android.settings.APP_NOTIFICATION_SETTINGS");  
            intent.putExtra("app_package", pkName);  
            intent.putExtra("app_uid", uid);  
        } else {  
            //(<21)其他--跳转到该应用管理的详情页  
            intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);  
            var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);  
            intent.setData(uri);  
        }  
        // 跳转到该应用的系统通知设置页  
        main.startActivity(intent);  
    };  
    // 打开苹果系统设置页面  
    let openIOSSetting = () => {  
        var app = plus.ios.invoke("UIApplication", "sharedApplication");  
        var setting = plus.ios.invoke("NSURL", "URLWithString:", "app-settings:");  
        plus.ios.invoke(app, "openURL:", setting);  
        plus.ios.deleteObject(setting);  
        plus.ios.deleteObject(app);  
        // ios18跳转不过去的解决方案  
        // 方案一:使用uni.openAppAuthorizeSetting(),文档地址:https://uniapp.dcloud.net.cn/api/system/openappauthorizesetting.html  
        // 方案二:待验证,AI生成;来源评论区:iOS 18以后,openURL:完全被弃用,需要用openURL:options:completionHandler:替代。  
        // var app = plus.ios.invoke("UIApplication", "sharedApplication");  
        // var url;  
        // // 获取安全 URL(iOS 8+)  
        // if (plus.ios.invoke("UIApplication", "respondsToSelector:", "openSettingsURLString")) {  
        //  var urlString = plus.ios.invoke("UIApplication", "openSettingsURLString");  
        //  url = plus.ios.invoke("NSURL", "URLWithString:", urlString);  
        // } else {  
        //  url = plus.ios.invoke("NSURL", "URLWithString:", "app-settings:");  
        // }  
        // // 判断新 API 可用性(iOS 10+)  
        // var supportsNewAPI = plus.ios.invoke(app, "respondsToSelector:", "openURL:options:completionHandler:");  
        // if (supportsNewAPI) {  
        //  var options = plus.ios.newObject("NSDictionary");  
        //  var completion = plus.ios.newBlock(function(success) {  
        //      console.log("跳转结果:" + success);  
        //      if (!success) {  
        //          plus.nativeUI.toast("无法打开设置,请手动前往");  
        //      }  
        //  }, "v@:B");  
        //  plus.ios.invoke(app, "openURL:options:completionHandler:", url, options, completion);  
        //  plus.ios.deleteObject(completion);  
        // } else {  
        //  if (plus.ios.invoke(app, "canOpenURL:", url)) {  
        //      plus.ios.invoke(app, "openURL:", url);  
        //  } else {  
        //      throw new Error("当前系统不支持跳转设置");  
        //  }  
        // }  
        // plus.ios.deleteObject(url);  
        // plus.ios.deleteObject(app);  
    };  
    // 弹窗提醒开通或关闭权限,点击确认后,跳转到系统设置页面进行设置  
    uni.showModal({  
        title: title,  
        content: content,  
        showCancel: true,  
        confirmColor: "#ff903f",  
        success: (res) => {  
            if (res.confirm) {  
                if (plus.os.name == "Android") {  
                    openAndroidSetting();  
                } else if (plus.os.name == "iOS") {  
                    openIOSSetting();  
                }  
            }  
        },  
    });  
    // #endif  
}  

export default {  
    isOn,  
    switchPushPermissions,  
};

↓↓↓ 各位大佬点点赞

继续阅读 »

来源:https://ext.dcloud.net.cn/plugin?id=789

// 判断通知权限是否开启  
function isOn() {  
    // #ifdef APP-PLUS  
    if (plus.os.name == "Android") {  
        var main = plus.android.runtimeMainActivity();  
        var NotificationManagerCompat = plus.android.importClass("android.support.v4.app.NotificationManagerCompat");  
        if (NotificationManagerCompat == null) {  
            NotificationManagerCompat = plus.android.importClass("androidx.core.app.NotificationManagerCompat");  
        }  
        var areNotificationsEnabled = NotificationManagerCompat.from(main).areNotificationsEnabled();  
        return areNotificationsEnabled;  
    } else if (plus.os.name == "iOS") {  
        var isIosOn = undefined;  
        var types = 0;  
        var app = plus.ios.invoke("UIApplication", "sharedApplication");  
        var settings = plus.ios.invoke(app, "currentUserNotificationSettings");  
        if (settings) {  
            types = settings.plusGetAttribute("types");  
            plus.ios.deleteObject(settings);  
        } else {  
            types = plus.ios.invoke(app, "enabledRemoteNotificationTypes");  
        }  
        plus.ios.deleteObject(app);  
        isIosOn = 0 != types;  
        return isIosOn;  
    }  
    // #endif  
}  

// 前往系统设置页面开启或关闭通知权限  
function switchPushPermissions() {  
    // #ifdef APP-PLUS  
    let title = isOn() ? "通知权限关闭提醒" : "通知权限开启提醒";  
    let content = isOn()  
        ? "通知权限已开启,是否前往设置关闭?"  
        : "您还没有开启通知权限,无法接受到消息通知,是否前往设置?";  
    // 打开安卓系统设置页面  
    let openAndroidSetting = () => {  
        var main = plus.android.runtimeMainActivity();  
        var pkName = main.getPackageName();  
        var uid = main.getApplicationInfo().plusGetAttribute("uid");  
        var Intent = plus.android.importClass("android.content.Intent");  
        var Build = plus.android.importClass("android.os.Build");  
        //android 8.0引导  
        if (Build.VERSION.SDK_INT >= 26) {  
            var intent = new Intent("android.settings.APP_NOTIFICATION_SETTINGS");  
            intent.putExtra("android.provider.extra.APP_PACKAGE", pkName);  
        } else if (Build.VERSION.SDK_INT >= 21) {  
            //android 5.0-7.0  
            var intent = new Intent("android.settings.APP_NOTIFICATION_SETTINGS");  
            intent.putExtra("app_package", pkName);  
            intent.putExtra("app_uid", uid);  
        } else {  
            //(<21)其他--跳转到该应用管理的详情页  
            intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);  
            var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);  
            intent.setData(uri);  
        }  
        // 跳转到该应用的系统通知设置页  
        main.startActivity(intent);  
    };  
    // 打开苹果系统设置页面  
    let openIOSSetting = () => {  
        var app = plus.ios.invoke("UIApplication", "sharedApplication");  
        var setting = plus.ios.invoke("NSURL", "URLWithString:", "app-settings:");  
        plus.ios.invoke(app, "openURL:", setting);  
        plus.ios.deleteObject(setting);  
        plus.ios.deleteObject(app);  
        // ios18跳转不过去的解决方案  
        // 方案一:使用uni.openAppAuthorizeSetting(),文档地址:https://uniapp.dcloud.net.cn/api/system/openappauthorizesetting.html  
        // 方案二:待验证,AI生成;来源评论区:iOS 18以后,openURL:完全被弃用,需要用openURL:options:completionHandler:替代。  
        // var app = plus.ios.invoke("UIApplication", "sharedApplication");  
        // var url;  
        // // 获取安全 URL(iOS 8+)  
        // if (plus.ios.invoke("UIApplication", "respondsToSelector:", "openSettingsURLString")) {  
        //  var urlString = plus.ios.invoke("UIApplication", "openSettingsURLString");  
        //  url = plus.ios.invoke("NSURL", "URLWithString:", urlString);  
        // } else {  
        //  url = plus.ios.invoke("NSURL", "URLWithString:", "app-settings:");  
        // }  
        // // 判断新 API 可用性(iOS 10+)  
        // var supportsNewAPI = plus.ios.invoke(app, "respondsToSelector:", "openURL:options:completionHandler:");  
        // if (supportsNewAPI) {  
        //  var options = plus.ios.newObject("NSDictionary");  
        //  var completion = plus.ios.newBlock(function(success) {  
        //      console.log("跳转结果:" + success);  
        //      if (!success) {  
        //          plus.nativeUI.toast("无法打开设置,请手动前往");  
        //      }  
        //  }, "v@:B");  
        //  plus.ios.invoke(app, "openURL:options:completionHandler:", url, options, completion);  
        //  plus.ios.deleteObject(completion);  
        // } else {  
        //  if (plus.ios.invoke(app, "canOpenURL:", url)) {  
        //      plus.ios.invoke(app, "openURL:", url);  
        //  } else {  
        //      throw new Error("当前系统不支持跳转设置");  
        //  }  
        // }  
        // plus.ios.deleteObject(url);  
        // plus.ios.deleteObject(app);  
    };  
    // 弹窗提醒开通或关闭权限,点击确认后,跳转到系统设置页面进行设置  
    uni.showModal({  
        title: title,  
        content: content,  
        showCancel: true,  
        confirmColor: "#ff903f",  
        success: (res) => {  
            if (res.confirm) {  
                if (plus.os.name == "Android") {  
                    openAndroidSetting();  
                } else if (plus.os.name == "iOS") {  
                    openIOSSetting();  
                }  
            }  
        },  
    });  
    // #endif  
}  

export default {  
    isOn,  
    switchPushPermissions,  
};

↓↓↓ 各位大佬点点赞

收起阅读 »

撤回反馈,可删帖

撤回反馈,可删帖

撤回反馈,可删帖

页面向上滚动的情况和居中样式

滚动

描述:点击元素后,页面滚动到顶部,
有可能是滚动元素绑定了某个事件并执行滚动相关的方法,
如:给滚动元素添加一个事件并执行滚动元素.scrollIntoView(true); 为true时,是滚动到顶部。
在元素出发相应的事件就会页面滚动到顶部

居中方式:
这里有种居中方式:绝定定位+margin:0
可以实现上下左右居中。
如果只左右居中,margin-left:0;margin-right:0;
如果只左右居中,margin-top:0;margin-bottom:0;
注意:最好不要用实现居中后的其他margin属性,可能会导致居中失败(你可以试一试,如果不影响,就没事),如左右居中时,想要调整上下的距离,可以使用top或bottom的定位属性。

继续阅读 »

描述:点击元素后,页面滚动到顶部,
有可能是滚动元素绑定了某个事件并执行滚动相关的方法,
如:给滚动元素添加一个事件并执行滚动元素.scrollIntoView(true); 为true时,是滚动到顶部。
在元素出发相应的事件就会页面滚动到顶部

居中方式:
这里有种居中方式:绝定定位+margin:0
可以实现上下左右居中。
如果只左右居中,margin-left:0;margin-right:0;
如果只左右居中,margin-top:0;margin-bottom:0;
注意:最好不要用实现居中后的其他margin属性,可能会导致居中失败(你可以试一试,如果不影响,就没事),如左右居中时,想要调整上下的距离,可以使用top或bottom的定位属性。

收起阅读 »

html制作腾讯地图定位

<html>  

<head>  
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">  
  <style type="text/css">  
    #mapWrap {  
      margin: 10px 0;  
      width: 100%;  
      height: 300px;  
    }  
  </style>  
</head>  

<body>  
  <p>HTML5定位功能</p>  
  <p>您的纬度:<span id="latitude"></span></p>  
  <p>您的精度:<span id="longitude"></span></p>  
  <p id="errMsg"></p>  

  <button id="openTXMap">开启腾讯地图</button>  
  <div id="mapWrap"></div>  

  <script>  
    var latitude, longitude  

    if (navigator.geolocation) {  
      console.log("支持")  
      navigator.geolocation.getCurrentPosition(showPosition, showError)  
      // navigator.geolocation.watchPosition(showPosition, showError)     
    }  
    else {  
      console.log("不支持")  
    }  

    function showPosition(position) {  
      document.querySelector('#latitude').innerText = position.coords.latitude  
      document.querySelector('#longitude').innerText = position.coords.longitude  
      // 这里做了经纬度偏差的修正  
      latitude = position.coords.latitude - 0.002463  
      longitude = position.coords.longitude + 0.005591  
    }  

    function showError(error) {  
      errMsg = document.querySelector('#errMsg')  

      switch (error.code) {  
        case error.PERMISSION_DENIED:  
          // User denied the request for Geolocation.  
          errMsg.innerText = "定位失败,用户拒绝请求地理定位"  
          break;  
        case error.POSITION_UNAVAILABLE:  
          // Location information is unavailable.  
          errMsg.innerText = "定位失败,位置信息是不可用"  
          break;  
        case error.TIMEOUT:  
          // The request to get user location timed out.  
          errMsg.innerText = "定位失败,请求获取用户位置超时"  
          break;  
        case error.UNKNOWN_ERROR:  
          // An unknown error occurred.  
          errMsg.innerText = "定位失败,定位系统失效"  
          break;  
      }  
    }  

    function init() {  
      var myLatlng = new qq.maps.LatLng(latitude, longitude);  
      var myOptions = {  
        zoom: 16,  
        center: myLatlng  
      };  
      var map = new qq.maps.Map(document.getElementById("mapWrap"), myOptions);  
    }  

    function loadScript() {  
      var script = document.createElement("script");  
      script.type = "text/javascript";  
      script.src = "https://map.qq.com/api/js?v=2.exp&callback=init";  
      document.body.appendChild(script);  
    }  

    document.getElementById("openTXMap").onclick = function () {  
      loadScript()  
      init()  
    }  

  </script>  
</body>

为了这条文章不丢失,请把点在和关注点亮,谢谢大家!

继续阅读 »
<html>  

<head>  
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">  
  <style type="text/css">  
    #mapWrap {  
      margin: 10px 0;  
      width: 100%;  
      height: 300px;  
    }  
  </style>  
</head>  

<body>  
  <p>HTML5定位功能</p>  
  <p>您的纬度:<span id="latitude"></span></p>  
  <p>您的精度:<span id="longitude"></span></p>  
  <p id="errMsg"></p>  

  <button id="openTXMap">开启腾讯地图</button>  
  <div id="mapWrap"></div>  

  <script>  
    var latitude, longitude  

    if (navigator.geolocation) {  
      console.log("支持")  
      navigator.geolocation.getCurrentPosition(showPosition, showError)  
      // navigator.geolocation.watchPosition(showPosition, showError)     
    }  
    else {  
      console.log("不支持")  
    }  

    function showPosition(position) {  
      document.querySelector('#latitude').innerText = position.coords.latitude  
      document.querySelector('#longitude').innerText = position.coords.longitude  
      // 这里做了经纬度偏差的修正  
      latitude = position.coords.latitude - 0.002463  
      longitude = position.coords.longitude + 0.005591  
    }  

    function showError(error) {  
      errMsg = document.querySelector('#errMsg')  

      switch (error.code) {  
        case error.PERMISSION_DENIED:  
          // User denied the request for Geolocation.  
          errMsg.innerText = "定位失败,用户拒绝请求地理定位"  
          break;  
        case error.POSITION_UNAVAILABLE:  
          // Location information is unavailable.  
          errMsg.innerText = "定位失败,位置信息是不可用"  
          break;  
        case error.TIMEOUT:  
          // The request to get user location timed out.  
          errMsg.innerText = "定位失败,请求获取用户位置超时"  
          break;  
        case error.UNKNOWN_ERROR:  
          // An unknown error occurred.  
          errMsg.innerText = "定位失败,定位系统失效"  
          break;  
      }  
    }  

    function init() {  
      var myLatlng = new qq.maps.LatLng(latitude, longitude);  
      var myOptions = {  
        zoom: 16,  
        center: myLatlng  
      };  
      var map = new qq.maps.Map(document.getElementById("mapWrap"), myOptions);  
    }  

    function loadScript() {  
      var script = document.createElement("script");  
      script.type = "text/javascript";  
      script.src = "https://map.qq.com/api/js?v=2.exp&callback=init";  
      document.body.appendChild(script);  
    }  

    document.getElementById("openTXMap").onclick = function () {  
      loadScript()  
      init()  
    }  

  </script>  
</body>

为了这条文章不丢失,请把点在和关注点亮,谢谢大家!

收起阅读 »