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 = truescript.src = 'http://webapi.amap.com/maps?v=1.4.8&callback=initAMap&key=你的key值' //key值要去高德api官网申请script.onerror = rejectdocument.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：

<style lang="scss" scoped>#entrepotAmap{width: 750upx;box-sizing: border-box;background: #fff;height: 100vh;overflow: hidden;.back {position: absolute;top: 26upx;left: 16upx;width: 24upx;height: 32upx;background: url('../../static/images/home/2.png') no-repeat center /100%;transform: rotate(180deg);z-index: 999;}#container{width: 100%;height: 100vh;}#panel {position: absolute;background-color: white;max-height: 35%;overflow-y: auto;top: 10upx;right: 10upx;width: 560upx;font-size: 24upx;}}
</style>

uniApp使用高德地图api相关推荐

uniapp使用高德地图api找车位简单案例
功能: 随着地图移动红色标点跟着变化并在其范围内出现最近的10个停车场,并按距离排序. 点击蓝色标点会出现其对应的信息窗口右下角定位功能(点击回到当前所在位置) (因使用静态数据,所以蓝色标点不会刷 ...
uniApp获取高德高德地图api发布版安全码SHA1
我在开发中使用到了高德地图api:基座测试时候可以正常使用,但是打包之后发现高德地图无法使用:所以为了解决uniApp打包后,高德地图无法使用的问题,我们需要发布版安全码SHA1来申请高德地图的key ...
uniapp 微信小程序选择地图位置并返回经纬度及详细地址（uni.chooseLocation和高德地图api两种方式实现）
uniapp 微信小程序实现选择地图位置功能最近在做商家小程序,就是用于给实体店老板进行网上开店的小程序. 其中有一项功能就是获取商店的位置,要求支持:获取当前定位/检索到指定位置/地图选点等功能, ...
uniapp+高德地图api 获取定位信息及详细地址
引入高德地图js api 高德地图api官方文档根据官方文档建议,我使用的是JSAPI Loader 并且是通过npm安装的 npm i @amap/amap-jsapi-loader --save ...
uniapp做高德地图
这是在uniapp中集成高德地图,需要城市名字确定地图城市, 使用精准定位并且设为地图中心,在初始化地图的时候先不设置center,在下面得到精准定位之后 onComplete的参数data中的lng ...
高德地图markevents_GitHub - mingxuWang/Map: 高德地图API二次封装
Map组件设计文档组件设计目的分析当前各业务方向(销售端.商城.数据可视化.TMS)内地图相关应用的地图功能使用情况,封装Map组件供给各业务向进行使用. 将高德地图API进行二次封装,降低地图相 ...
【高德地图API】那些年我们一起开发的APP—即LBS应用模式分享
2019独角兽企业重金招聘Python工程师标准>>> 摘要:利用地图API都能做些什么应用呢?应用商店里所有的分类,都可以结合上LBS来丰富应用.除了传统的生活服务应用,还有新潮的 ...
高德地图API路径规划结果清除
关于高德地图API之路径规划结果的清除(js API) 偶然用到高德地图API做路径规划,在做的过程中发现连续进行不同的路径规划产生的结果是叠加的.如何清除上一次的路径规划呢?开发手册上有一个 cle ...
html高德地图api使用教程,高德地图API如何使用？
这个很简单,需要先注册一下高德地图开发者,然后创建应用.添加Key,最后通过script标签引入网页,就可以直接使用高德地图API了,下面我简单介绍一下实现过程,主要内容如下: 1.首先,注册高德地图 ...

uniApp使用高德地图api

uniApp使用高德地图api

uniApp使用高德地图api相关推荐

最新文章

热门文章