uni-app 接入高德地图案例

第一步：注册高德地图开发者账号地址：https://lbs.amap.com/

第二步：创建自己的应用（我这里是小程序的）

第三步：下载相关sdk文件，导入amap-wx.js到项目中

第四步：创建AMapWX对象
方式一：

方式二：

第四步：代码编写

/**  * map 用到的属性 * @param width map宽度* @param height map高度* @param latitude 中心纬度* @param longitude 中心经度* @param scale 缩放级别，取值范围为5-18* @param markers 标记点 * @param show-location 显示带有方向的当前定位点* @param markertap 点击标记点时触发* */
<template>
<view>
<view class="page-body">
<view class="page-section page-section-gap">
<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" scale="16" :markers=markersshow-location="true" @markertap=markertap>
</map>
</view>
</view>
</view>
</template><script>export default {data() {return {markers: [{}, {}, {}],poisdatas: [{}, {}, {}],title: 'map',latitude: 30.208487,longitude: 120.21202,}},onLoad() {var that = this;var amapFile = require('../../gaodemap/amap-wx.js');var amapPlugin = new amapFile.AMapWX({key: "d79********************c2"});amapPlugin.getPoiAround({success: function(data) {//成功回调that.markers = data.markers;that.poisdatas=data.poisData;var markers_new = [];that.markers.forEach(function(item, index) {markers_new.push({id: item.id,              //marker 序号width: item.width,        //marker 宽度height: item.height,      //marker 高度iconPath: item.iconPath,  //marker 图标路径latitude: item.latitude,  //marker  纬度longitude: item.longitude, //marker 经度//自定义标记点上方的气泡窗口callout:{padding:2,        //callout 文本边缘留白fontSize:15,      //callout  文字大小bgColor:'blue',   //callout 背景颜色color:'#6B8E23',  //callout 文字颜色borderRadius:5,   //边框圆角display:'BYCLICK',//callout 'BYCLICK':点击显示; 'ALWAYS':常显content:that.poisdatas[index].name //地理位置名称}})})that.markers = markers_new;console.log("data", JSON.stringify(that.poisdatas));},fail: function(info) {//失败回调console.log("info", info)}})},methods: {//得到点击的marker的id，遍历markers数组，判断有没有相等的id//如果有的就能从this.poisdatas[i].address得到坐标位置（没有就提醒下）markertap: function(e) {for (var i = 0; i < this.markers.length; i++) {if (JSON.stringify(e).substring(18, 20) == this.markers[i].id) {console.log("markers" + this.poisdatas[i].name+"   "+this.poisdatas[i].address);uni.showToast({title: this.poisdatas[i].name,mask: false,duration: 1500});}}}}}
</script><style>
</style>

第五步：效果

点击marker显示callout

第二部分：针对下面博友问的怎么连接点。

1.代码编写

data() {return {markers: [{}, {}, {}],poisdatas: [{}, {}, {}],title: 'map',latitude: 30.208487,longitude: 120.21202,SRC: '111111111111',polyline: [{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下points: [{ latitude: 30.208487,longitude: 120.21202},{latitude: 30.209403,longitude: 120.213845},],color: "#000000", //设置连接的线的颜色width: 2, //线的宽度dottedLine: true, //线是否是虚线arrowLine: true,//线是带箭头的线，开发者工具暂时不支持}],}
},

<view class="page-section page-section-gap"> // 绑定polyline数组
<map style="width: 100%; height: 300px;" :polyline='polyline' :latitude="latitude" :longitude="longitude" scale="17" :markers=markers show-location="true" @markertap=markertap>
</map>
</view>

2.效果

这个链接是是有效的，我试过啊。
源码地址：https://pan.baidu.com/s/1Wf3b2YpuaJjE7aaDkEgawA

密码：w3mk
gitlab源码地址
https://git.lug.ustc.edu.cn/sunshine_0707/map

我这里是小程序，是在微信开发者工具上显示的，不是app啊，你们自己注意点这个啊。

uni-app 接入高德地图案例相关推荐

uniapp中app接入高德地图实现标点定位
ps:如果你只想用在一个平台上那么就看对应的准备工作即可.例:你只需h5接入地图,那么你只需看一. h5接入高德地图准备工作和最后的代码即可. 一. h5接入高德地图准备工作 1. 去高德地图平 ...
视频教程-Web前端开发仿美团/饿了吗移动App之高德地图接口对接案例-JavaScript
Web前端开发仿美团/饿了吗移动App之高德地图接口对接案例互联网编程行业10年开发和授课经验曾任太极集团,外资企业等一线互联网python高级开发工程师现任聚焦计算机技术有限公司项目组担任架构 ...
uniapp 开发安卓App实现高德地图路线规划导航
文章目录技术概述技术详述问题与解决我的总结参考文献技术概述描述这个技术是做什么的/什么情况下会使用到这个技术,学习该技术的原因,技术的难点在哪里.控制在50-100字内. uniapp的 ...
uniapp 打包app 引入高德地图sdk
uniapp 打包app 引入高德地图sdk 1. 注册高德地图开放平台账号并添加应用,在应用中添加key 2. 生成自有证书(windows系统) 3. 高德地图key生成并配置到项目中 4. 地 ...
app内接入高德地图常用设置及工具方法整理
地图初始化.权限设置.代码混淆等不再赘述,官方文档都有 1.常用基础设置 UiSettings uiSettings = aMap.getUiSettings(); uiSettings.setZoo ...
快速接入高德地图SDK（地图+定位+标记+路线规划+搜索）
文章目录申请接入流程显示高德地图显示定位 Marker 显示地图标记 Route 路线规划 Search 搜索申请接入流程 1.首先到 [ 高德地图API官网] 申请注册帐号 2.进入控制台, ...
uni-app接入高德地图SDK实现定位用户城市
参考文章:http://ask.dcloud.net.cn/article/35070 本文以高德微信小程序 SDK 为例,简述如何在 uni-app 中利用微信小程序第三方 SDK,实现 App 端 ...
高德地图小程序步行路线显示_微信小程序之：小程序接入高德地图SDK
前言最近在捣腾小程序,想开发一个自己的小程序,过一把独立开发的瘾. 自己设计,自己搞数据,自己找图标,自己决定要或者不要什么功能,完全跟着心走,目前体验下来,感觉还是蛮爽的.比在公司产品要你做什么你 ...
Android开发知识（十）快速接入高德地图SDK（地图+定位+标记+路线规划+搜索）
文章目录申请接入流程显示高德地图显示定位 Marker 显示地图标记 Route 路线规划 Search 搜索申请接入流程 1.首先到 [ 高德地图API官网] 申请注册帐号 2.进入控制台, ...

uni-app 接入高德地图案例

uni-app 接入高德地图案例相关推荐

最新文章

热门文章