三恨 2023-09-08 21:42 采纳率: 0%
浏览 79

vue如何使用高德获取地理位置

我用Uni-app使用的是Vue2,在模拟器上编写了一个App,想要调用高德的API给我提供定位,结果一调用就显示报错

reportJSException >>>> exception function:createInstanceContext, exception:
white screen cause create instanceContext failed,check js stack 
->Uncaught Error: AMap JSAPI can only be used in Browser.

我查了一下自己的模拟器,浏览器能打开百度,应该是支持WebView的?
官方说要密钥和Key一起配套使用,我也有,但是我觉得不是这个问题,希望高人指点一二

<template>
    <div class="home_div">
        <div class="map-title">
            <h3>JSAPI Vue3地图组件示例</h3>
        </div>
        <div id="container"></div>
    </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader"
import { shallowRef } from '@vue/reactivity'
export default {
    name:"mapcomtaint",
    setup(){
        const map = shallowRef(null);
        return{
            map,
        }

    },
    create(){

    },
    methods:{
        ininMap(){
            AMapLoader.load({
                key:'[6xxxxxed870620ccxxxxxce1xxxxx597]',  //设置您的key
                version:"2.0",
                plugins:['AMap.ToolBar','AMap.Driving'],
                AMapUI:{
                    version:"1.1",
                    plugins:[],

                },
                Loca:{
                    version:"2.0.0"
                },
            }).then((AMap)=>{
                this.map = new AMap.Map("container",{
                    viewMode:"3D",
                    zoom:5,
                    zooms:[2,22],
                    center:[105.602725,37.076636],
                });
                let positionArr = [
                    [113.357224,34.977186],
                    [114.555528,37.727903],
                    [112.106257,36.962733],
                    [109.830097,31.859027],
                    [116.449181,39.98614],
                ];
                for(let item of positionArr){
                    let marker = new AMap.Marker({
                        position:[item[0],item[1]],
                    });
                    this.map.add(marker);
                }


            }).catch(e=>{
                console.log(e);
            })
        },
        addMarker(){
            
        }
    },
    mounted(){
        //DOM初始化完成进行地图初始化
        this.ininMap();
    }
}
</script>
<style scope>
    .home_div{
        height: 100%;
        width: 100%;
        padding: 0px;
        margin: 0px;
        position: relative;
    }
    #container{
        height: 100%;
        width: 100%;
        padding: 0px;
        margin: 0px;
    }
    .map-title{
         position:absolute;
         z-index: 1;
         width: 100%;
         height: 50px;
         background-color: rgba(27, 25, 27, 0.884);

    }
    h3{
        position:absolute;
        left: 10px;
        z-index: 2;
        color: white;
    }



</style>
  • 写回答

2条回答 默认 最新

  • ChatGPTᴼᴾᴱᴺᴬᴵ 2023-09-08 21:47
    关注

    该回答引用ChatGPT-3.5,仅为您提供参考,不保证完全正确
    根据您提供的代码和报错信息,问题似乎出现在模拟器上无法调用高德地图的API,报错信息提示"AMap JSAPI can only be used in Browser",说明高德地图的API只能在浏览器环境中使用,不能在模拟器中使用。


    在Vue中使用高德地图的时候,确保以下几点:

    1. 确认模拟器支持WebView,并且WebView的环境与浏览器环境相似,以便高德地图API能够正常工作。

    2. 确保你的高德地图API密钥配置正确。你在示例代码中有提供密钥,但是为了安全起见,请确保密钥没有泄漏,并且已正确配置。

    3. 检查是否有其他代码或插件可能干扰了高德地图API的正常加载。有时其他第三方库或插件可能会引发冲突。

    4. 确保你的Uni-app应用已正确配置和初始化,并且模拟器环境也已正确设置。可以尝试在真实的移动设备上运行应用,以验证是否仍然出现相同的问题。

    如果问题仍然存在,你可能需要联系Uni-app社区或高德地图的支持团队,以获取更具体的支持和帮助,因为问题可能涉及到Uni-app和高德地图API的集成细节,需要更深入的调查和解决。同时,确保你的Uni-app和高德地图API的版本都是最新的,以避免已知的问题。


    该回答引用NewBing,仅为您提供参考,不保证完全正确
    根据我的搜索结果,有以下几种方法可以实现您的需求:

    • vue项目使用高德地图获取当前位置信息¹:这篇文章介绍了如何在vue项目中引入高德地图,并使用AMap.Geolocation插件来获取用户的当前位置信息,包括经纬度、城市、地址等。文章还提供了完整的代码示例和效果图。
    • JS API 结合 Vue 使用²:这是高德地图官方提供的教程,详细说明了如何在vue项目中使用JS API Loader来加载高德地图,并创建一个地图组件。教程还分别介绍了vue2和vue3的用法,并给出了在线示例。
    • vue3 使用 高德地图api³:这篇文章基于上述教程,进一步展示了如何在vue3中使用高德地图api,包括添加标记、绘制路线、显示实时交通等功能。文章也提供了完整的代码示例和效果图。

    源: 与必应的对话, 2023/9/8
    (1) vue项目使用高德地图获取当前位置信息 - 掘金. https://juejin.cn/post/7145836522850222116.
    (2) JS API 结合 Vue 使用-基础-进阶教程-地图 JS API 2.0 | 高德地图API. https://lbs.amap.com/api/javascript-api-v2/guide/abc/amap-vue.
    (3) vue3 使用 高德地图api - 掘金. https://juejin.cn/post/7208370120849801271.


    该回答引用文心一言,仅为您提供参考,不保证完全正确
    超出输入上限(2000)


    该回答引用讯飞星火,仅为您提供参考,不保证完全正确
    在Vue项目中使用高德地图,需要确保以下几点:

    1. 请确保你的key和AMap.ToolBar插件的版本匹配。例如,如果你使用的是高德地图的JavaScript API,那么key应该是'amap.jsapi.key',而AMap.ToolBar插件的版本应该是'2.0'。

    2. 请确保你的浏览器支持WebView。你可以在模拟器的设置中查看是否已经启用了WebView功能。

    3. 请确保你的代码中已经正确引入了高德地图的JavaScript API。在你的代码中,你需要在mounted生命周期钩子中调用ininMap方法来初始化地图。同时,确保你已经正确引入了@amap/amap-jsapi-loader@amap/amap-jsapi-view这两个依赖。

    根据你提供的代码,我发现你已经正确地引入了高德地图的JavaScript API,并且在mounted生命周期钩子中调用了ininMap方法。但是,我注意到你在ininMap方法中的key属性值可能不正确。请尝试将key属性值更改为正确的密钥,例如:

    key: 'your_amap_jsapi_key', // 请替换为你的高德地图API密钥
    

    如果问题仍然存在,请检查你的浏览器控制台是否有其他错误信息,并尝试解决这些错误。希望这些信息能帮助你解决问题。

    评论

报告相同问题?

问题事件

  • 创建了问题 9月8日

悬赏问题

  • ¥100 有偿寻云闪付SDK转URL技术
  • ¥30 基于信创PC发布的QT应用如何跨用户启动后输入中文
  • ¥20 非root手机,如何精准控制手机流量消耗的大小,如20M
  • ¥15 远程安装一下vasp
  • ¥15 自己做的代码上传图片时,报错
  • ¥15 Lingo线性规划模型怎么搭建
  • ¥15 关于#python#的问题,请各位专家解答!区间型正向化
  • ¥15 unity从3D升级到urp管线,打包ab包后,材质全部变紫色
  • ¥50 comsol温度场仿真无法模拟微米级激光光斑
  • ¥15 上传图片时提交的存储类型