我用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>