vue加载vue-amap 报错解决办法

main.js中的

// 高德地图
import VueAMap from 'vue-amap';
setTimeout(() => {localStorage.clear();Vue.use(VueAMap);
}, 0);VueAMap.initAMapApiLoader({key: '******',plugin: ["AMap.Autocomplete", //输入提示插件"AMap.PlaceSearch", //POI搜索插件"AMap.Scale", //右下角缩略图插件 比例尺"AMap.OverView", //地图鹰眼插件"AMap.ToolBar", //地图工具条"AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制"AMap.PolyEditor", //编辑 折线多，边形"AMap.CircleEditor", //圆形编辑器插件"AMap.Geolocation" //定位控件，用来获取和展示用户主机所在的经纬度位置],// 默认高德 sdk 版本为 1.4.4v: '1.4.4'
});
// 高德地图// initSearch  控件搜索组件<template lang="html"><div class="container"><div class="search-box"><inputv-model="searchKey"type="search"id="search"><button @click="searchByHand">搜索</button><div class="tip-box" id="searchTip"></div></div><!--amap-manager： 地图管理对象vid：地图容器节点的IDzooms： 地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默认范围[3-19]，取值范围[3-19]center： 地图中心点坐标值plugin：地图使用的插件events： 事件--><el-amap class="amap-box" ref="map":amap-manager="amapManager":vid="'amap-vue'":zoom="zoom":plugin="plugin":center="center":events="events"><!-- 标记 --><el-amap-marker v-for="(marker, index) in markers" :position="marker" :key="index"></el-amap-marker></el-amap></div>
</template>
<script>import {AMapManager, lazyAMapApiLoaderInstance} from 'vue-amap'
let amapManager = new AMapManager();export default {data () {let self = thisreturn {address: null,searchKey: '',amapManager,markers: [],searchOption: {city: '全国',citylimit: true},center: [121.329402, 31.228667],zoom: 17,lng: 0,lat: 0,loaded: false,events: {init (o) {console.log(o.getCenter())// console.log(this.$refs.map.$$getInstance())o.getCity(result => {console.log(result)})lazyAMapApiLoaderInstance.load().then(() => {console.log(lazyAMapApiLoaderInstance)self.initSearch()})},'moveend': () => {},'zoomchange': () => {},//地图图块加载完成后触发事件'complete': (o) => {console.log(o)},// 点击获取地址的数据click (e) {// console.log(e)self.markers = []let { lng, lat } = e.lnglatself.lng = lngself.lat = latself.center = [lng, lat]self.markers.push([lng, lat])// 这里通过高德 SDK 完成。let geocoder = new AMap.Geocoder({radius: 1000,extensions: 'all'})geocoder.getAddress([lng, lat], function (status, result) {if (status === 'complete' && result.info === 'OK') {if (result && result.regeocode) {console.log(result.regeocode.formattedAddress)self.address = result.regeocode.formattedAddressself.searchKey = result.regeocode.formattedAddressself.$nextTick()}}})}},// 一些工具插件plugin: [// {//   pName: 'Geocoder',//   events: {//     init (o) {//       console.log(o.getAddress())//     }//   }// },{// 定位pName: 'Geolocation',events: {init (o) {// o是高德地图定位插件实例o.getCurrentPosition((status, result) => {if (result && result.position) {// 设置经度self.lng = result.position.lng// 设置维度self.lat = result.position.lat// 设置坐标self.center = [self.lng, self.lat]self.markers.push([self.lng, self.lat])// loadself.loaded = true// 页面渲染好后self.$nextTick()}})}}},{// 工具栏pName: 'ToolBar',events: {init (instance) {// console.log(instance);}}},{// 鹰眼pName: 'OverView',events: {init (instance) {// console.log(instance);}}},{// 地图类型pName: 'MapType',defaultType: 0,events: {init (instance) {// console.log(instance);}}},{// 搜索pName: 'PlaceSearch',events: {init (instance) {// console.log(instance)}}}]}},methods: {initSearch () {let vm = thislet map = this.amapManager.getMap();if(typeof(AMapUI)=='undefined'){$.getScript("https://webapi.amap.com/ui/1.0/main.js").done(function (script, textstatus) {if (textstatus == "success" && typeof (AMapUI) != undefined) {//所有使用AMap的内容vm.amapulload();} else {alert("无法加载地图，请打开网络");}});}else{      vm.amapulload()}},amapulload(){let vm=thislet map = this.amapManager.getMap();AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {var poiPicker = new PoiPicker({input: 'search',placeSearchOptions: {map: map,pageSize: 10},suggestContainer: 'searchTip',searchResultsContainer: 'searchTip'})vm.poiPicker = poiPicker// 监听poi选中信息poiPicker.on('poiPicked', function (poiResult) {// console.log(poiResult)let source = poiResult.sourcelet poi = poiResult.itemif (source !== 'search') {poiPicker.searchByKeyword(poi.name)} else {poiPicker.clearSearchResults()vm.markers = []let lng = poi.location.lnglet lat = poi.location.latlet address = poi.cityname + poi.adname + poi.namevm.center = [lng, lat]vm.markers.push([lng, lat])vm.lng = lngvm.lat = latvm.address = addressvm.searchKey = address}})})},searchByHand () {if (this.searchKey !== '') {this.poiPicker.searchByKeyword(this.searchKey)}}},mounted() {}
}
</script>
<style lang="css">
.container {width: 100%;height: 100%;position: absolute;left: 50%;top: 50%;transform: translate3d(-50%, -50%, 0);border: 1px solid #999;
}
.search-box {position: absolute;z-index: 5;width: 70%;left: 13%;top: 10px;height: 30px;
}
.search-box input {float: left;width: 80%;height: 100%;border: 1px solid #30ccc1;padding: 0 8px;outline: none;
}
.search-box button {float: left;width: 20%;height: 100%;background: #30ccc1;border: 1px solid #30ccc1;color: #fff;outline: none;
}
.tip-box {width: 100%;max-height:260px;position: absolute;top: 30px;overflow-y: auto;background-color: #fff;
}
</style>

vue加载vue-amap 报错解决办法相关推荐

vue 动态加载图片路径报错解决方法
vue 动态加载图片路径报错解决方法参考文章: (1)vue 动态加载图片路径报错解决方法 (2)https://www.cnblogs.com/qingcui277/p/8930507.html ...
vue-element-admin动态加载接口和报错解决
需要修改的文件只有两个: 修改文件\src\router\index.js 和修改文件 src\store\modules\permission.js 接口可以放在user.js里面 1. \s ...
php5.5.25升级到php5.6.30，加载yaf.so报错解决方法！
2019独角兽企业重金招聘Python工程师标准>>> 按照 "yaf 实践(安装&部署)",进入已有 yaf-2.3.5 文件夹,重新装一遍yaf,ph ...
vue 加载image图片不显示解决
vue 加载image图片不显示解决------------写了个vue的demo(自己做一个表格,可以横向增加列也可以纵向增加行)想给demo加图片怎么都出不来,,,,,查图片太大?加载位置不对?配 ...
报错解决：加载数据库驱动报错-Loading class `com.mysql.jdbc.Driver‘. The new driver class is `com.mysql.cj.jdb
Loading class com.mysql.jdbc.Driver'. This is deprecated. The new driver class iscom.mysql.cj.jdbc.D ...
MTK的Flashtool 加载scatter-loading是报错
Flashtool 加载scatter-loading是报错: Image UBOOT checksum failed! Checksum reference value(0xf6b7)in the ...
java HelloWorld时报错:“找不到或无法加载主类“问题的解决办法
java HelloWorld时报错:"找不到或无法加载主类"问题的解决办法参考文章: (1)java HelloWorld时报错:"找不到或无法加载主类"问 ...
Numpy报错解决办法
bug描述: 经常出现加载numpy会报错或者在安装tensoflow.pytorch时,出现如下错误: 问题一: RuntimeError: module compiled against API ...
element is not attached to the page document报错解决办法
element is not attached to the page document报错解决办法 1.场景:将一条子单记录合并到母单记录,子单记录消失后,再次定位母单记录的操作按钮,报错代码如下 ...
idea安装及项目导入过程中pom报错解决办法
1.idea安装可用破解版或者在淘宝上买正版账号(20多块钱一年,挺便宜的) 2.pom报错解决办法: 在项目导入过程中pom报错: 原因:相关jar包未下载完.(下载速度慢,因为下载的链接是国外的节 ...

vue加载vue-amap 报错解决办法

vue加载vue-amap 报错解决办法相关推荐

最新文章

热门文章