微信小程序开发-高德地图api

第一步：

既然是高德地图的使用，那么我们首先进入高德地图开放平台：高德地图

注册之后在应用管理新建一个应用获取key

获取key之后我们去高德地图API看看高德对API的介绍，

相关下载那有sdk的下载链接，参考文档有相关的方法介绍。

第二步：

登录微信开发者平台，在设置里面获取appid，另外在服务器域名设置里面将https://restapi.amap.com设置好。

确定都设置成功。

第三步：

打开微信开发者工具。

新建项目，输入appid。

项目文件目录：

- - libs

- - amap-wx,js

- - pages

- - index

- - index.js

- - index.json

- - index.wxml

- - index.wxss

- - utils

- - utils.js

- - app.js

- - app.json

- - app.wxss

- - project.config.json

直接撸上代码

wxml：

<view><view>城市：{{weather.liveData.province}}-{{weather.liveData.city}}</view>
</view>
<view class="map_container"><map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map>
</view>
<view class="map_text"><text class="h1">{{textData.name}}</text><text>{{textData.desc}}</text>
</view>

js：

var amapFile = require('../../libs/amap-wx.js');
var markersData = [];
Page({data:{weather:"",markers: [],latitude: '',longitude: '',textData: {}},onLoad: function () {var that = this;var myAmapFun = new amapFile.AMapWX({ key: '4af0431b3c68398b661cac70d4d700aa' });myAmapFun.getWeather({city:"武侯区",success: function (data) {//成功回调console.log(data);that.setData({weather:data})},fail: function (info) {//失败回调console.log("failed!!!!")}});myAmapFun.getPoiAround({location:'104.05,30.65', //经纬度success: function (data) {markersData = data.markers;that.setData({markers: markersData});that.setData({latitude: markersData[0].latitude});that.setData({longitude: markersData[0].longitude});that.showMarkerInfo(markersData, 0);},fail: function (info) {wx.showModal({ title: info.errMsg })}})},showMarkerInfo: function(data, i) {var that = this;that.setData({textData: {name: data[i].name,desc: data[i].address}});      },changeMarkerColor: function (data, i) {var that = this;var markers = [];markers.push(data[j]);that.setData({markers: markers});},makertap: function (e) {var id = e.markerId;var that = this;that.showMarkerInfo(markersData, id);that.changeMarkerColor(markersData, id);}
})

wxss：

.map_container{position: absolute;top: 0;bottom: 80px;left: 0;right: 0;
}
.map{width: 100%;height: 100%;
}
.map_text{position: absolute;left: 0;right: 0;bottom: 0px;height: 80px;background: #fff;padding: 0 15px;
}
text{margin: 5px 0;display: block;font-size:12px;
}
.h1{margin: 15px 0;font-size:15px;
}

代码没有好好整理一下，最好自己写几个例子，看看高德开放平台的参考手册 -- 链接

微信小程序开发-高德地图api相关推荐

微信小程序使用高德地图API获取准确定位地址描述
wxml <button bindtap="getLocation">获取定位</button> const app=getApp() const amap ...
uniapp：微信小程序使用高德地图进行坐标反解析获取详细地址
开发过小程序的都了解,我们在调用 uni.getLocation Api的时候,在微信小程序端,只会返给我们一个坐标系,当前位置的经纬度,当我们需要去知道当前位置的详细地址时,我们就需要进行反解析来获 ...
uni-app 中微信小程序使用高德地图等第三方 SDK的方法
获取SDK 首先在高德开放平台,注册账号并且申请相关的 key 等信息: 然后下载它的微信小程序版 SDK:微信小程序 SDK 然后填写app包名,申请原生sdk的appkey信息,但不需要下载原生s ...
微信小程序使用高德地图实现标点图标修改
微信小程序引入高德地图高德地图开放平台根据入门指南完成前五步后建议在app.js中引入 amap-wx.js 并初始化高德地图 app.json // 引入路径根据自己文件所在位置引入 v ...
微信小程序引入高德地图Demo 快速上手
文章目录前言一.获取高德key 二.引入官方实例总结前言本文参照官方文档进行编写最后引入官方实例最终效果 ` 一.获取高德key 注册账号 https://lbs.amap.com/?r ...
uniapp开发微信小程序使用高德地图
uniapp 官方文档地图组件控制地图组件高德地图key需要公司去申请,之后自己在下载高德地图微信小程序插件下好的js文件放在项目中,之后在vue项目中的main.js文件中全局注入 // ...
微信小程序：高德地图在小程序中的实践（含静态地图）
前言前人栽树,后人乘凉.记录下工作的点点滴滴,让同道中人少走弯路~ 来看看需求和问题:房产相关的项目,详情中需要显示房源地址,底部要有固定的菜单(不是tabbar),房源数据过多,数据超过一屏时,m ...
微信小程序使用高德地图Web服务爬取企业数据
高德地图Api官网:高德开放平台 | 高德地图API 一.高德地图使用说明 "POI2.0" 地点搜索服务2.0是一类Web API接口服务:服务提供多种场景的地点搜索能力,包括关 ...
微信小程序使用高德地图
微信小程序--高德地图开发应用(获取key) 1.利用高德开发平台创建应用 http://lbs.amap.com/dev/index 2.点击创建新应用进入创建模态框 3.添加新Key 在创建的应用 ...

微信小程序开发-高德地图api

微信小程序开发-高德地图api相关推荐

最新文章

热门文章