小程序中使用高德地图

小程序中使用高德地图：
第一步：申请高德地图的秘钥，https://lbs.amap.com/api/wx/summary/
按照官网这个步骤来就行。
第二步：注册完之后下载amap-wx.js这个js文件拷贝到你的项目中

第三步：设置小程序安全通讯域名，为了保证高德小程序 SDK 中提供的功能的正常使用，需要设置安全域名。
登录微信公众平台，在 “设置”－>“开发设置” 中设置 request 合法域名，将 https://restapi.amap.com 中添加进去，如下图所示：

第四步：
1、在你需要引用地图的页面的js文件中引入 amap-wx.js 文件。

var amapFile = require('path/to/amap-wx.js');//如：../../libs/amap-wx.js

然后，在js 中实例化 AMapWX 对象，调用 getPoiAround 方法，获取POI数据。
为保证 marker 以自定义的图标显示，需在项目中新建 img 目录，并将 marker 对应的图标拷贝到项目的本地的 img 目录中，同时在 index.js 添加以下代码：

var markersData = [];
Page({data: {markers: [],latitude: '',longitude: '',textData: {}},makertap: function(e) {var id = e.markerId;var that = this;that.showMarkerInfo(markersData,id);that.changeMarkerColor(markersData,id);},onLoad: function() {var that = this;var myAmapFun = new amapFile.AMapWX({key:'您的key'});myAmapFun.getPoiAround({iconPathSelected: '选中 marker 图标的相对路径', //如：../../img/marker_checked.pngiconPath: '未选中 marker 图标的相对路径', //如：../../img/marker.pngsuccess: 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 = [];for(var j = 0; j < data.length; j++){if(j==i){data[j].iconPath = "选中 marker 图标的相对路径"; //如：../../img/marker_checked.png}else{data[j].iconPath = "未选中 marker 图标的相对路径"; //如：../../img/marker.png}markers.push(data[j]);}that.setData({markers: markers});}})

2、设置 index.wxml 文件。
index.wxml 在项目空间的 page/index 目录下，该文件是页面结构文件，用来搭建页面结构，绑定数据和交互处理函数等。
示例代码如下：

<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>

3、设置 index.wxss 文件。
index.wxss 在项目空间的 page/index 目录下，是页面样式文件。
示例代码如下：

.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;
}

这样就可以了，关于高德地图一些具体的属性和方法就参照官方文档来就行了https://lbs.amap.com/api/wx/summary

小程序中使用高德地图相关推荐

微信小程序开发使用高德地图（精准一些）
1.在进行微信小程序开发时,发现使用高德地图精准一些,于是进行了相关的探索 2.使用高德地图符合一般地图使用的习惯,例如在"距离XX多远","在XXXX附近" ...
uni-app 微信小程序中关于 map 地图使用案例分享
这篇文章,我将带领大家使用微信内置地图详细讲解关于如何配置地图.打开地图和使用地图. 目录 1.配置地图 2.先写页面内,这里我创建了一个 map示例页面 mapDemo.vue 2.1 关于 map ...
微信小程序：高德地图在小程序中的实践（含静态地图）
前言前人栽树,后人乘凉.记录下工作的点点滴滴,让同道中人少走弯路~ 来看看需求和问题:房产相关的项目,详情中需要显示房源地址,底部要有固定的菜单(不是tabbar),房源数据过多,数据超过一屏时,m ...
小程序获取城市行政区号_小程序中通过经纬度如何获取所在省市区名字（腾讯地图JavaScript SDK）...
在小程序中通过经纬度来获取所在省市区名字,这个功能还是挺有意思的,小程序中竟然不直接返回所在省市区,只提供经纬度,还需要腾讯地图来获取,还是有点小坑的,不注意的话很容易出问题.废话不多说,请看下文. ...
在微信小程序中打开地图选择位置功能
在微信小程序中打开地图选择位置功能前言首先查看效果一.准备工作 1-1. **下载小程序地理定位** ,[qqmap-wx-jssdk.js](https://lbs.qq.com/miniPr ...
微信小程序中自定义导航和地图定位
在健康码中,主要的难点技术就是在小程序中定位.自定顶部导航. 自定义导航在微信小程序中,默认的顶部导航不能设置图片背景或者是透明背景,只能自定义导航. 在每一个页面中引入,就是得到自己定义[个性化的 ...
关于小程序中地图的应用（联动搜索，模糊查询，定位导航）
小程序中地图的应用一.获取微信地址二.联动搜索及模糊查询三.导航一.获取微信地址在小程序的开发中,内置了获取微信地址的API接口.我们可以直接调用,对返回的数据进行相关的处理即可.代码如下: ...
微信小程序中开发使用腾讯地图定位
在最近的微信小程序中开发使用到腾讯地图定位,开发记录一下相关的情况.首先地图使用的是腾讯地图接口,https://lbs.qq.com/ 上去注册,注册了后去创建APPID和应用名; 注意创建了应用后 ...
小程序 | 微信小程序中使用位置API打开地图
小程序 | 微信小程序中使用位置API打开地图一.效果展示二.代码实现使用微信内置地图查看位置,调用wx.openLocationAPI,具体内容可以查看微信官方文档. // js let In ...

小程序中使用高德地图

小程序中使用高德地图相关推荐

最新文章

热门文章