微信小程序 高德地图SDK详解及简单实例(源码下(2)

<view> <map longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map> </view> <view> <text>{{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; }

第 7 步:构建和手机预览您的小程序

点击左侧菜单栏中 控制台 按钮,构建您的小程序,查看运行效果。

您也可以选择在微信上看最终的效果,选择开发工具左侧菜单栏的"项目",点击"预览",使用微信扫码后即可在微信客户端中体验。

获取Key

最后更新时间: 2017年1月6日

1、进入控制台,创建一个新应用。如果您之前已经创建过应用,可直接跳过这个步骤。

微信小程序 高德地图SDK详解及简单实例(源码下

2、 在创建的应用上点击"添加新Key"按钮,在弹出的对话框中,依次:输入应用名名称,选择绑定的服务平台为“微信小程序”,如下图所示:

微信小程序 高德地图SDK详解及简单实例(源码下

在阅读完高德地图API服务条款后,勾选此选项,点击“提交”,完成 Key 的申请,此时您可以在所创建的应用下面看到刚申请的 Key 了。

配置工程

最后更新时间: 2017年1月6日

第 1 步:新建一个小程序项目

新建一个本地小程序项目,您可参考入门指南<创建项目>章节。

第 2 步:添加 js 文件

在创建的项目中,新建一个名为 libs 目录,将 amap-wx.js 文件拷贝到 libs 的本地目录下,如下图所示。

微信小程序 高德地图SDK详解及简单实例(源码下

获取POI数据

最后更新时间: 2017年1月9日

查找您当前位置周边 “餐饮服务”、“商务住宅”、“生活服务”类型的POI,解决您的吃穿住行问题。

SDK 返回 marker 数组,可以直接用来在微信的地图组件上标记,同时,也返回了POI数组用于您的自定义的界面页面展示。

实现POI周边查询功能的步骤如下:

1、在页面的 js 文件中,实例化 AMapWX 对象,处理搜索数据。

首先,引入 amap-wx.js 文件。

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

然后,构造 AMapWX 对象,并调用 getPoiAround 方法,代码如下:

Page({ onLoad: function() { var that = this; var myAmapFun = new amapFile.AMapWX({key:'高德Key'}); myAmapFun.getPoiAround({ success: function(data){ //成功回调 }, fail: function(info){ //失败回调 console.log(info) } }) }, })

2、编写页面的 wxml 文件,搭建页面结构。

<view> <!--定义页面结构,可以使用地图组件也能使用其他组件 --> </view>

3、编写页面的 wxss 文件,设置页面样式。

.map_container{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; } ……

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwdxpw.html