vue使用百度地图记录
2017-09-06 21:58
302 查看
<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.streetNumber if(_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>
相关文章推荐
- Vue使用问题解决记录(持续更新)
- 记录一下,百度地图使用过程
- vue项目中使用百度地图的方法
- 前端框架Vue(9)——百度地图使用
- Windows使用Node.js自动生成Vue.js模版环境部署步骤-----记录
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
- 百度地图中热力图使用中json数据转换与构造出现了问题——记录下JSON使用的问题
- vue中使用百度地图
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
- aardio学习记录-3.使用Vue+JSON实现aardio与HTML内容互动
- 使用vue-cli构建vue工程,及一些小坑的记录
- Vue 使用过程中的问题记录
- 项目中使用百度地图记录
- 记录百度地图使用中遇到的问题
- Vue系列:在vux的popup组件中使用百度地图遇到显示不全的问题
- vue 使用出现的问题(持续记录)
- vue中使用heatmapjs的示例代码(结合百度地图)
- vue使用百度地图
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
- vue 使用记录