uniApp 地图使用
1、[官网地址][https://uniapp.dcloud.io/component/map]，[插件市场地址][https://ext.dcloud.net.cn/]
2、地图分显示，和获取定位两部分；显示可选择腾讯地图、高德地图、百度地图
3、获取定位方法由 uniApp 提供，坐标为固定的 gcj02、即使设置类型 wgs84,也是得到 gcj02 坐标
<template><map :controls="controls" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polyline" :scale="scale" :show-compass="true" :show-location="true" :style="mapStyle" @controltap="controltap" @regionchange="regionchange" id="map2">
</template>创建地图
onReady() {let vm = thisvm.map = uni.createMapContext('map2', this)vm.getLocation()},methods: {//获取定位getLocation() {let vm = thisuni.getLocation({type: 'gcj02',geocode: true,//获取城市具体地址success: (e) => {if (e.address.city) {vm.cityName = e.address.cityvm.poiName = e.address.poiNamevm.moveToLocation()}vm.latitude = e.latitudevm.longitude = e.longitudevm.run = 'start'vm.addDingwei()},fail: (e) => {vm.longitude = 113.953834 //e.longitudevm.latitude = 22.540235 //e.latitudevm.run = 'start'vm.addDingwei()},})},//移动到指定位置moveToLocation() {let vm = thislet falg = Object.keys(vm.map).lengthif (falg) {vm.map.moveToLocation({longitude: vm.longitude,latitude: vm.latitude,success: () => {}})}}，//添加定位点addDingwei() {let vm = this,arr = [];arr.push({id: 0,latitude: vm.latitude,longitude: vm.longitude,iconPath: '../../static/dingwei.png',callout: {content: '删除此站点', //文本color: '#ffffff', //文字颜色fontSize: 14, //文本大小borderRadius: 2, //边框圆角bgColor: '#00c16f', //背景颜色display: 'BYCLICK', //点击显示},})vm.markers = arr},//点击控件controltap(e) {let vm = thisif (e.detail.controlId === 0) {vm.getLocation()}if (e.detail.controlId === 1) {uni.chooseLocation({success: (e) => {vm.getLine(e)}})}},//移动地图位置触发获取地图中心店坐标regionchange(e) {let vm = thisif (e.type != 'begin' && vm.run == 'start') {vm.getCenterLocation()}},}
唤醒第三方地图
//引入插件
import Map from '@/js_sdk/fx-openMap/openMap.js'//既有起点也有终点var options = {origin: { //导航起点坐标和名称,如果不传则起点为当前位置latitude: vm.latitude,longitude: vm.longitude,name: "大冲商务中心C座"},destination: { //导航终点点坐标和名称latitude: item.latitude,longitude: item.longitude,name: item.name},mode: "drive" //导航方式 公交：bus驾车：drive（默认）,步行：walk,骑行：bike}//只有有终点(起点默认为当前位置)var options = {destination: { //导航终点点坐标和名称latitude: item.latitude,longitude: item.longitude,name: item.name},mode: "drive" //导航方式 公交：bus驾车：drive（默认）,步行：walk,骑行：bike}Map.openMap(options, 'gcj02')
app 端生成导航线路
//引入插件
import Amap from '../../js_sdk/Lyn4ever-gaodeRoutePlanning/lyn4ever-gaode.js';//搜索路线getLine(item) {let vm = thislet latitude = JSON.stringify(vm.latitude).slice(0, 9),longitude = JSON.stringify(vm.longitude).slice(0, 10);let startPoi = longitude + ',' + latitude;let wayPoi = "";let endPoi = item.longitude + ',' + item.latitude;vm.polyline = []if (window === undefined) {Amap.line(startPoi, endPoi, wayPoi, function(res) {vm.polyline.push(res)});Amap.markers(startPoi, endPoi, wayPoi, function(res) {vm.markers = res});} else {window.open('https://map.baidu.com/')}},
阶段总结
1，运行环境判断 window === undefined？“app”：“h5”
2，变量样式获取使用 :style="mapStyle"||:style="coverView()"
3，造轮子之前，先查看插件库，研究研究