vue使用百度地图记录

来源：互联网发布：免费的海关数据网站编辑：程序博客网时间：2024/05/24 06:39

<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