uniApp使用高德地图api
uniApp使用高德地图api
1，在自己项目中的/src/common/js中的weixin.js写入，没有就新建文件，（具体目录因自己项目而议）
export const weixin = {
/* 获取地理位置接口 */
getLocation: function (callback) {
let option = {
type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
success: function (res) {
// var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
// var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
// var speed = res.speed; // 速度，以米/每秒计
// var accuracy = res.accuracy; // 位置精度
if (callback && callback instanceof Function) {
callback(res);
}
}
}
wx.getLocation(option);
},
/* 调起地图 */
openLocation: function(data){
wx.openLocation({
longitude: Number(data.longitude),
latitude: Number(data.latitude),
name: data.name,
address: data.address
})
},
}
2，在自己项目中的/src/common/js中的新建aMap.js文件，（具体目录因自己项目而议）
// <-- 原作者这里使用的是module.exports,在webpack环境下可能会导致一个错误
export const MapLoader = function () {
return new Promise((resolve, reject) => {
if (window.AMap) {
resolve(window.AMap)
} else {
var script = document.createElement('script')
script.type = 'text/javascript'
script.async = true
script.src = 'http://webapi.amap.com/maps?v=1.4.8&callback=initAMap&key=你的key值' //key值要去高德api官网申请
script.onerror = reject
document.head.appendChild(script)
}
window.initAMap = () => {
resolve(window.AMap)
}
})
}
/**
* 逆向地理编码：将地理坐标（经纬度）转换成地址描述信息
* 对应为 AMap.Geocoder 的 getAddress 方法
* @param {Number} longitude 经度
* @param {Number} latitude 纬度
*/
export const getAddress = function (longitude, latitude) {
// if (arguments[0] == null || arguments[1] == null) {
// longitude = 113.4129
// latitude = 23.172686
// }
MapLoader().then(AMap => {
AMap.plugin('AMap.Geocoder', function () {
var geocoder = new AMap.Geocoder()
var lnglat = [longitude, latitude]
geocoder.getAddress(lnglat, function (status, result) {
if (status === 'complete' && result.info === 'OK') {
// console.log(result)
return result
// result为对应的地理位置详细信息
}
})
})
},
e => { console.log('地图加载失败', e) }
)
}
/**
* 正向地理编码：将地址描述信息转换成地理坐标（经纬度），
* 对应为 AMap.Geocoder 的 getLocation 方法
* @param {String} site 详细地址
*/
export const getLocation = function (site) {
return new Promise((resolve)=>{
MapLoader().then(AMap => {
AMap.plugin('AMap.Geocoder', function () {
var geocoder = new AMap.Geocoder()
geocoder.getLocation(site, function (status, result) {
if (status === 'complete' && result.info === 'OK') {
// console.log(result,'result')
resolve(result)
// return result
// result中对应详细地理坐标信息
}
})
})
},
e => {
console.log('地图加载失败', e);
resolve(false)
}
)
})
}
/**
* 获取地图周边
*/
export const getCircum = function (newLng,newLat) {
return new Promise((resolve)=>{
MapLoader().then(AMap => {
AMap.plugin('AMap.Geocoder', function () {
var map = new AMap.Map("container", {
resizeEnable: true
});
AMap.service(["AMap.PlaceSearch"], function() {
//构造地点查询类
var placeSearch = new AMap.PlaceSearch({
type: '', // 兴趣点类别
pageSize: 6, // 单页显示结果条数
pageIndex: 1, // 页码
city: "", // 兴趣点城市
citylimit: false, //是否强制限制在设置的城市内搜索
map: map, // 展现结果的地图实例
panel: "panel", // 结果列表将在此容器中进行展示。
autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
});
var cpoint = [newLng, newLat]; //中心点坐标
// var cpoint = [113.342309, 23.170892]; //中心点坐标
placeSearch.searchNearBy('', cpoint, 200);
AMap.event.addListener(placeSearch, 'complete', onComplete)
function onComplete (data) {
console.log('定位成功信息')
}
});
})
},
e => {
console.log('地图加载失败', e);
resolve(false)
}
)
})
}
3，在要使用到高德的api文件中使用：
//引用
import { getWxOpenId, weixin } from '@/common/js/weixin.js'
import { getLocation } from '@/common/js/AMap.js';
methods: {
//导航
openLocation(item, index){
// console.log(9999, item);
let that = this;
getLocation(item).then(res=>{
// console.log(res);
if(res && res.geocodes.length >0){
let lng = res.geocodes[0].location.lng;
let lat = res.geocodes[0].location.lat;
if(index == 0) {
weixin.openLocation({
longitude: lng,
latitude: lat,
name: res.geocodes[0].formattedAddress,
address: res.geocodes[0].formattedAddress
})
}else{
//navigateTo是封装的跳转方法，这里是跳转自己写的地图周边
that.navigateTo('./entrepotAmap?lng=' + lng + '&lat=' + lat);
}
}
});
},
}
4，新建放地图周边的vue文件entrepotAmap.vue：（这一步看自己项目需求写，没有可以不管）
html：
<template>
<view id="entrepotAmap">
<view class="back" @click="backPage()">view>
<view id="container">view>
<view id="panel">view>
view>
template>
js：
<script>
import { getCircum } from '@/common/js/AMap.js';
export default {
data() {
return {
aMapLng: '',
aMapLat: '',
}
},
mounted() {
//使用了高德地图api的方法要使用mounted生命周期，使用created页面会显示空白
this.aMapLng = this.$route.query.lng;
this.aMapLat = this.$route.query.lat;
this.getLocation();
},
methods: {
// 获取经纬度信息
getLocation () {
// 搜索周边
getCircum(this.aMapLng,this.aMapLat).then(res=>{
console.log('');
});
},
// 返回上一页
backPage() {
uni.navigateBack({});
},
}
}
</script>
css：