vue使用百度地图记录
来源:互联网 发布:免费的海关数据网站 编辑:程序博客网 时间:2024/05/16 18:25
<template><div class="home_map"><section><div class="map" id="allmap"></div></section><footer><div class="info fb"><div class="child"><p class="left_text"><em>{{streetNumber?streetNumber:''}}</em><span>{{address?address:''}}</span></p><img src="../../../static/imgs/home_map.jpg"></div></div></footer></div></template><style scoped lang='scss'> @import '../../styles/commonscss.scss';.home_map .map{width: 100vw;height:100vh; position: fixed;}.home_map .info{width: 100%; height: 5.4rem;padding-top: 0.85rem;z-index: 100; background-color: white;img{width: 2.95rem;height: 2.95rem;}} .home_map .left_text{width: 15.2rem;padding-top:0.3rem; display: inline-block;text-align: center; vertical-align: top; em{margin-bottom: 0.25rem; font-size: 0.8rem;font-weight: bold;display: block;}span{color:$lg;}}</style><script type="text/babel">import {host,my_log} from '@/config/config'export default{data(){return{address:null,streetNumber:null}},created:function(){},mounted:function(){this.init()},methods:{init:function(){var _this = this// 百度地图API功能var map = new BMap.Map("allmap");var point = new BMap.Point(113.335535,22.99421);map.centerAndZoom(point,15);var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(r){if(this.getStatus() == BMAP_STATUS_SUCCESS){var mk = new BMap.Marker(point);map.addOverlay(mk);map.panTo(point);var geoc = new BMap.Geocoder(); geoc.getLocation(point, (rs)=>{var addComp = rs.addressComponents;// 所有位置信息都在rs.addressComponents里面,坐标要有标志性的坐标信息才会全my_log(rs.addressComponents)_this.address = addComp.province + addComp.city + addComp.district + addComp.street_this.streetNumber = addComp.street + addComp.streetNumberif(_this.streetNumber == '')_this.streetNumber = '获取不到具体位置'console.log(_this.streetNumber)}); }else {alert('failed'+this.getStatus());} },{enableHighAccuracy: true})//关于状态码//BMAP_STATUS_SUCCESS检索成功。对应数值“0”。//BMAP_STATUS_CITY_LIST城市列表。对应数值“1”。//BMAP_STATUS_UNKNOWN_LOCATION位置结果未知。对应数值“2”。//BMAP_STATUS_UNKNOWN_ROUTE导航结果未知。对应数值“3”。//BMAP_STATUS_INVALID_KEY非法密钥。对应数值“4”。//BMAP_STATUS_INVALID_REQUEST非法请求。对应数值“5”。//BMAP_STATUS_PERMISSION_DENIED没有权限。对应数值“6”。(自 1.1 新增)//BMAP_STATUS_SERVICE_UNAVAILABLE服务不可用。对应数值“7”。(自 1.1 新增)//BMAP_STATUS_TIMEOUT超时。对应数值“8”。(自 1.1 新增) }}}</script>
最后在html引入ak在百度地图开放平台获取
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EVEOIF80XN5tuPoetNZOFxNHlTKUgNVs"></script>
阅读全文
0 0
- vue使用百度地图记录
- vue中使用百度地图
- 百度地图API使用记录
- html百度地图使用记录
- 在vue中使用百度地图
- Vue调用百度地图
- vue加载百度地图
- vue + 百度地图api
- 记录一下,百度地图使用过程
- 项目中使用百度地图记录
- 前端框架Vue(9)——百度地图使用
- vue项目中调用百度地图API使用简介
- vue-cli 引入百度地图
- 百度地图学习记录
- 百度地图定位记录
- 百度地图学习记录
- 错误记录集:使用百度地图出现的问题
- 记录百度地图使用中遇到的问题
- iOS 24种设计模式~原理图
- (Android网络2)Volley
- 商城左侧菜单条代码
- localtime 和 localtime_r的区别
- 虚拟机安装CentOS 64位教程
- vue使用百度地图记录
- python selenium查找网页内容
- 假如时光能够倒流, 我会这么学习Java
- 史上最详 创建一个私有的Pod教程
- ThreadPoolExecutor详解-FixedThreadPool
- 暑期项目实训之健康宝APP(八)
- 九大内置对象及其常用方法
- Android项目文件结构
- VS2010无法创建新c++程序的解决办法