微信小程序---高德地图（一）

最新推荐文章于 2024-04-05 23:05:12 发布
VIP文章 最新推荐文章于 2024-04-05 23:05:12 发布
阅读量1.3k 收藏
点赞数
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51747920/article/details/130455872
版权
最低0.47元/天 解锁文章
weixin_51747920
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序----高德地图API实现的DEMO
02-07
微信小程序----高德地图API实现的周边，天气，路线规划，地址详情等的DEMO。简单的效果，问一下官方能不能不要乱涨积分，你们涨积分，作者被骂！我真的很失望，再这样，我就不上传资源了！
小计：怎样在微信小程序中使用高德地图，10分钟出页面。
Xpy 的博客
05-26 1621
一、申请高德地图key 高德地图文档写的很详细，这里我就不赘述了： 高德地图微信小程序入门指南传送门：https://lbs.amap.com/api/wx/gettingstarted 文档中包含了： 下载并安装微信小程序开发工具 获取高德Key 创建项目 下载并安装微信小程序SDK 设置安全通讯域名 注意：配置好了之后，一定要重启微信开发者工具！ 完整的code：Hello AMapWX ( js、wxml、wxss ) 注意js文件中的，引入路径，引入的图片，key值都需要手动修改 二、全部
在微信小程序中加载高德地图
最新发布
whbke的博客
04-05 374
在微信小程序中加载高德地图
微信小程序，高德地图
xueer43的博客
07-25 5222
微信小程序地图组件使用
微信小程序开发(第二天)-引用高德地图、定位等
梁白开的博客
09-04 3479
如何引用高德地图
微信小程序地图插件系列（一）：微信小程序使用高德地图（不定期更新）
实事求是，艰苦奋斗，小小的梦想，终将实现。
12-10 2万+
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例
微信小程序 高德地图SDK详解及简单实例（源码下载）
08-31
主要介绍了微信小程序 高德地图详解及简单实例（源码下载）的相关资料,需要的朋友可以参考下
微信小程序 高德地图
SunNang的博客
12-25 585
使用Lin UI 添加搜索框样式 show.wxml <view bindtap='onChangeAddress'> <l-search-bar placeholder="搜索" bg-color="#f6f6f6" shape="circle" front-text="广州市" value="{{address}}" name="address" placeholder=".
mpvue微信小程序-地图
11-09
基于mpvue，涉及的功能有首页地图展示，地图控件、页面跳转、组件间的调用
微信小程序-废品回收
06-14
一个简单微信小程序开发的demo，实现了微信小程序与服务器（数据库）之间的交互，以及调用了高德地图sdk实现了路径规划
微信小程序 高德地图路线规划实现过程详解
10-16
主要介绍了微信小程序 路线规划实现过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
小程序版高德地图完美运行demo
08-09
小程序版高德地图完美运行demo，1:小程序增加域名白名单https://restapi.amap.com，2修改app.js内的key为你设置的，完美运行
微信小程序基于高德地图查找位置并显示文字
10-16
主要介绍了微信小程序基于高德地图查找位置并显示文字,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序引入高德地图Demo 快速上手
weixin_51751186的博客
09-19 2397
微信小程序引入高德地图Demo 快速上手
高德地图-微信小程序
weixin_46032200的博客
10-22 1516
1、 申请高德地图key 点我查看获取key的步骤 2、配置工程 点我去查看配置工程的步骤 3、使用 1、在使用地图的页面引入amap-wx.js文件 import amapFile from '../../libs/amap-wx.130.js' 2、 简单引入 <template> <map class="map" id="map" :longitude="longitude" :latitude="latitude" :scale="scale" show-location="t
微信小程序---高德地图API
热门推荐
vio小黑
11-29 3万+
本文章介绍微信小程序调用高德地图API的过程，使用高德定位功能做演示。 微信小程序目前支持百度地图、高德地图、腾讯地图。用法都基本一致，简单说一下他们的区别，高德地图精度应该是最准确的，毕竟本来就是做地图出生的。百度地图的精度目前较高德而言，还是要稍稍欠缺一点，但是他的附近商家那些要比高德好一点。而关于腾讯地图，暂时来说还是只能表示呵呵，希望越来越好吧。 1.既然本章是介绍微信小程序如何使用高德...
微信小程序之：小程序接入高德地图SDK
weixin_34349320的博客
11-21 2441
前言 最近在捣腾小程序，想开发一个自己的小程序，过一把独立开发的瘾。 自己设计，自己搞数据，自己找图标，自己决定要或者不要什么功能，完全跟着心走，目前体验下来，感觉还是蛮爽的。比在公司产品要你做什么你就得做什么舒服多了，巴适的很（假装自己是四川人），哈哈 虽然我是一个App开发，但我还是蛮注重用户体验的，我会去考虑应用的使用场景，使用习惯，不断的去调整，去优化。这次开发的小程序，从配色、图标选择、...
微信小程序调用高德地图
weixin_34249678的博客
01-25 1438
index.wxml: 　　　　longitude:经度 　　　　latitude：维度 　　　地图所定位的区域 index.js 　　地图所定位的点 转载于:https://www.cnblogs.com/yxj9536/p/10319122.html...
微信小程序使用高德地图
m0_37576698的博客
05-07 2万+
微信小程序—-高德地图开发应用（获取key）1.利用高德开发平台创建应用http://lbs.amap.com/dev/index 2、点击创建新应用进入创建模态框3.添加新Key在创建的应用上点击”添加新Key”按钮。 得到KEY微信小程序—-map路线规划进入页面直接定位到当前位置，输入目的地！案例代码：WXML：<view class="tui-map"> <map id="map"
微信小程序如何引入高德地图
05-24
要在微信小程序中引入高德地图，可以按照以下步骤进行操作： 1.在高德地图开放平台上注册账号并创建应用，获取应用的Key。 2.在微信小程序开发者工具中，找到app.json文件，在"permission"字段中添加"scope.userLocation"。 3.在需要使用地图的页面的wxml文件中添加以下代码： ```html <view class="map"> <map id="myMap" longitude="113.324520" latitude="23.099994" markers="{{markers}}" show-location bindtap="bindMapTap"></map> </view> ``` 其中，longitude和latitude分别为地图的中心点经纬度坐标，markers为标记点数组，show-location表示显示定位按钮，bindtap表示绑定地图点击事件。 4.在对应页面的js文件中，引入高德地图SDK并初始化地图： ```javascript const amapFile = require('../../libs/amap-wx.js'); Page({ data: { markers: [{ iconPath: "../../images/marker.png", id: 0, latitude: 23.099994, longitude: 113.324520, width: 50, height: 50 }] }, onLoad: function () { var that = this; var myAmapFun = new amapFile.AMapWX({key: 'your amap key'}); myAmapFun.getRegeo({ success: function(data){ //成功回调 console.log(data); that.setData({ markers: [{ iconPath: "../../images/marker.png", id: 0, latitude: data[0].latitude, longitude: data[0].longitude, width: 50, height: 50 }] }) }, fail: function(info){ //失败回调 console.log(info); } }) }, bindMapTap: function(){ //地图点击事件 console.log('map tap'); } }) ``` 其中，amap-wx.js是高德地图提供的微信小程序SDK，需要下载并放在libs文件夹下。初始化地图时，需要传入之前获取的应用Key，在onLoad函数中调用getRegeo方法获取当前定位信息，并将标记点设置为当前定位点。 5.在小程序管理后台中，进入开发设置页面，将请求域名列表中添加以下域名： ``` https://restapi.amap.com ``` 以上就是在微信小程序中引入高德地图的基本步骤，具体的使用可以根据需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值