1.以某一点为圆心，半径5000米以内的地方进行标注；
3.通过搜索进行定位：↑↓键进行选择Enter键确定，也可以点击选择，并添加覆盖物。
官网地址：
https://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-placeapi
这次的需求是，圆心五公里之内的地方，需要可以搜索定点。根据文档，需要用到的api是
https://api.map.baidu.com/place/v2/search?query=银行&location=39.915,116.404&radius=2000&output=xml&ak=您的密钥
具体参数看上面的网址就成~~
在解析地址时，可能会出现跨域问题，所以我们还需要安装一个vue-jsonp。
安装 ↓
main.js ↓
在utils中创建文件loadMap.js ↓
准备工作就完成啦~~~~
html ↓
css ↓ (首先要确保容器有足够的宽高)
script ↓
vue 获取当前位置经纬度（浏览器定位）在vue中使用高德地图，获取定位
我这个网页，需要放在安卓app内，因为安卓的webview是谷歌内核，所以不会支持，最后我使用了百度地图，发现是可以的
Vue实现城市定位（利用百度地图
我这边有改动，我需要根据经纬度来转换到具体的地址。要先去申请ak，这个看官方文档
JavaScript API GL
在public文件夹下的index.html中引入百度的引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta base="/" id="base" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover,user-scalable=no"
/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>第一个vue</title>
<meta name="format-detection" content="telephone=yes"/>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=xxxxx"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=xxxxxx"></script>
</head>
<body>
登录后复制
在vue.config.js里
//压缩打包文件大小
configureWebpack: (config) =>{
config.externals = {
"BMap": 'BMap'
登录后复制
在需要定位的地方。second.vue里使用
<template>
<div>{{ LocationCity }}</div>
</template>
<script>
export default {
name: "home",
data() {
return {
musicTypeJSON: {},
searchValue: "",
result: [],
titleTypeJSON: {}, //热门城市
LocationCity: "正在定位...", //一个初始值''
}
},
methods: {
city() {
//定义获取城市方法
const geolocation = new BMap.Geolocation()
var _this = this
geolocation.getCurrentPosition(
function getinfo(position) {
let city = position.address.city//获取城市信息
let province = position.address.province//获取省份信息
console.log(position)
// 创建地理编码实例
var myGeo = new BMapGL.Geocoder()
// 根据坐标得到地址描述
myGeo.getLocation(
new BMapGL.Point(position.longitude, position.latitude),
function (result) {
if (result) {
_this.LocationCity ="经纬度："+position.longitude+","+position.latitude+",地址："+
result.address
}
}
)
},
function (e) {
_this.LocationCity = "定位失败"
},
{ provider: "baidu" }
)
},
},
mounted() {
this.city()//触发获取城市的方法
},
}
</script>
<style>
div {
word-break: break-all
}
</style>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）