uniapp使用地图,uniapp地图定位
如何用uniapp开发一个简单的地图导航？本文将为你提供一个制作简易地图的思路，希望对你有所帮助！
UNI-APP开发(仿饿)开发课程：进入学习
先看看效果图。
简易map
在图1的地图中，可以看到A点和B点的联系，基本信息和基本控件(放大、缩小、返回指定点)。接下来，我们将分别一步一步地解释。
所需配置
首先需要在manifest.json的app模块中配置map，并添加相关map的键。如果没有，可以在相关开发者平台申请。
配置完这一部分后，您就可以开始使用map组件了。
地图标记点
要在uniapp地图中创建标记，您需要使用属性标记。
我们先来看看标记的常见属性。
描述类型必需的id标记idnumbertruelatitude纬度数字true经度经度数字trueiconPath显示的图标stringfalsecallout自定义标记气泡框对象falselabel将标签添加到标记对象的边缘false查看更多信息请参见：
https://uniapp.dcloud.io/component/map.html
了解了这一点，我们可以使用markers属性来创建标记。markers属性是数组类型的，所以我们应该像这样创建标记。
this.covers=[
{
id: 1，
纬度：34.7486，
经度：113.6709，
图标路径： ././static/shop.png ，
标题：“目的地”
}
];如果你想添加更多的标记，你可以继续添加对象到数组中，
每个对象代表一个标记点。
增加
地图：标记=封面/地图坐标连线
为了连接我们的坐标，我们需要使用折线属性。
我们先来看看折线的常见属性。
描述类型必选点纬度和纬度数组颜色线条颜色stringfalsewidth线条宽度NumberfalseiconPath显示图标stringfalsearrowLine带箭头的线条BooleanfalsecolorList彩虹显示数组false平台差异请参见
https://uniapp.dcloud.io/component/map.html#app平台地图服务提供商的差异
这里要关注两个坑，笔者会踩。
折线属性是一个数组。
Polyline是一个数组，因为它可以创建多条线并同时连接它们，每条线可以有不同的颜色、箭头、图标等。
Points也是一个数组。
点是一个数组，因为要确定某条线上的每一个点，每一个点都要由经纬度组成。
所以折线的正确写法应该是这样的。
//连接
this.polyline=[
//第一行
{
//每个点的纬度和经度
分：[{34.7486，113.6709}，{28.7486，113.6709}]，
//颜色
颜色： #000 ，
//宽度
宽度：10
}
]如果要添加第二条线，只需要在折线中添加一个对象。增加
map:polyline= polyline /map放大缩小
地图的放大和缩小取决于比例属性。
因此您只需要动态更改scale属性的值。
不过这里要注意的是，scale的取值范围是3~20，是数字型的。
这就是放大缩小功能的依赖性。
回到指定位置
将地图返回到指定位置也非常简单。您只需要使用uni.createMapContext()方法创建一个mapContent对象，并且可以使用附带的moveToLocatio方法将地图返回到指定的位置。
//回到定位点
goBackToLocation() {
uni.createMapContext(map )。moveToLocation({34.7486，113.6709 })；
},
导航弹框
图2中的地图应用选择框使用h5Plus。
nativeUI.actionSheet方法创建一个项目符号框。
Runtime.openURL方法打开导航软件或h5页面导航。
请检查nativeUI。
https://www.html5plus.org/doc/zh_cn/nativeui.html
请检查运行时情况
https://www.html5plus.org/doc/zh_cn/runtime.html
//导航会打开导航菜单供用户选择。
openNavigation(经度，纬度，名称){
设URL=“”；//应用程序url
让webUrl=“”；web url用于在没有安装导航软件的情况下打开浏览器。
plus.nativeUI.actionSheet({ //选择菜单
标题： 选择地图应用，
取消： 取消，
按钮：[{title:高德地图}] //可选的地图类型
}，(e)={
//判断用户选择的地图
开关（电子索引){
//下面是拼接url，不同系统以及不同地图都有不同的拼接字段
案例1:
//安卓
if(plus.os.name==Android) {
URL=`安卓地图：//查看地图？source application=appnameponame=$ { name } lat=$ { latitude } lon=$ { longitude } dev=0 `；
}否则{
url=`iosamap://viewMap？source application=applicationnameponame=$ { name } lat=$ { latitude } lon=$ { longitude } dev=0 `；
}
网址=`https://uri.amap.com/marker？位置=$ {经度}，$ {纬度}名称=$ {名称} src=我的页面坐标=高德
打破；
}
//如果选中
如果（网址！=) {
URL=encodeURI(URL)；
//打开应用导航
plus.runtime.openURL(url，(err)={ //失败回到
//如果失败则说明未安装直接打开网页版进行导航
//毕竟用户可能没有安装应用但一定安装的有浏览器
另外。运行时。openurl(webUrl)；
});
}
})
}这就是我导航弹窗实现的逻辑了，这里我仅仅只是用了高德地图的选项，大家可以根据需要增加相应地图app，其他常见的我放在下方了。
腾讯
app url
let appUrl=` QQ地图：//map/geocoder？坐标=${纬度},${经度}参考点=$ {腾讯地图key } `
web url
let webUrl=`https://apis.map.qq.com/uri/v1/marker？标记=坐标：经度，纬度；标题：名称；地址：地址referer=myapp `
百度
app url
let appUrl=`百度地图：//map/marker？location=${latitude}，$ {经度} title=$ { name } coord _ type=gcj 02 src=andr。百度一下。openapi演示`
web url
let webUrl=`http://api.map.baidu.com/marker？位置=$ {纬度}，$ {经度}标题=$ {名称}内容=$ {内容}输出=html src=web app。百度一下。openapi演示` 1推荐： 《uniapp教程》 以上就是利用uniapp开发一个简单的地图导航的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。