预览
腾讯地图官方网址
代码示例
<template><view></view></template><script>export default {name: "map",data() {return {title:'装修地址',address:'四川省成都市武侯区富美森家居1号软装馆6层',key:'QARBZ-P4BED-72F4W-HFHAQ-4EU6T-PBKQ' // 腾讯地图 key}},onShow(){this.openmap()},methods: {openmap() {window.open(`https://apis./tools/poimarker?type=0&marker=coord:39.96554,116.26719;title:${this.title};addr:${this.address}6020号&key=${this.key}&referer=zx$init_view=1`)}}}</script><style lang="less"></style>
// 第二种，选择 高德，百度，腾讯地图，示例图
代码实现示例
<template><view><view id="baidu-map" style="width: 100%;height: 100%;"></view><slot></slot><view class="map-btn"><view class="fix-btn" v-show="showmore"><view><text @click="initMap($event)">{{this.fixBtn[0]}}</text><text><image src="@/static/arrow_down.png" alt="" @click="showmore = !showmore" v-show="showmore"> </image></text></view><view><text @click="initMap($event)">{{this.fixBtn[1]}}</text><text></text></view></view><view class="map-type"><text @click="initMap($event)">{{defaultBtn[0]}}</text><text><image src="@/static/arrow_up.png" alt="" @click="showmore = !showmore" v-show="!showmore"></image></text></view><view class="guide-btn" @click="beginGuide">开始导航</view></view></view></template><script>export default {name: "com-map",data() {return {btns: ['百度地图', '腾讯地图', '高德地图'],defaultBtn: ['高德地图'],fixBtn: [],showmore: false,position: [],mapObj: null, // 地图实例userLocation: null, // 用户位置 or 中心位置geolocation: null, // 定位geocoder: null, // 地理编码type: '高德地图',//百度地图参数center: {lng: 109.45744048529967, lat: 36.49771311230842 },zoom: 13,GCJPosition: {lat: 0,lng: 0},//微信获取的当前定位curP: [],bdPosition: []}},methods: {//点击切换地图initMap(e) {this.showmore = falsethis.defaultBtn[0] = e.target.innerHTMLthis.filterBtn()this.type = e.target.innerHTMLswitch (e.target.innerHTML) {case '百度地图': this.initBMap(); break;case '腾讯地图': this.initTMap(); break;case '高德地图': this.initAMap(); break;}},//开始导航beginGuide() {switch (this.type) {case '百度地图':window.location.href = `http://api./direction?origin=latlng:${this.curP[1]},${this.curP[0]}|name:我的位置&destination=${this.bdPosition[1]},${this.bdPosition[0]}&mode=driving®ion=上海&output=html`;break;case '腾讯地图':window.location.href = `https://apis./uri/v1/routeplan?type=bus&to=终点&tocoord=${this.position[1]},${this.position[0]}&referer=PGCBZ-7XVC3-XKO36-3CEGN-B2L63-XYBHT`;break;case '高德地图':window.location.href = `/marker?position=${this.position[0]},${this.position[1]}&coordinate=gaode&callnative=1`break;}},//从微信jssdk获取当前定位getConfig() {let that = this// 接口调用this.$api.weixinjs().then(res => {wx.config({beta: true,debug: true, //开启debug模式.正式环境设置为false,测试环境设置为trueappId: res.data.appId, // 必填，公众号的唯一标识timestamp: res.data.timestamp, // 必填，生成签名的时间戳nonceStr: res.data.nonceStr, // 必填，生成签名的随机串signature: res.data.signature,// 必填，签名，见附录1jsApiList: ['checkJsApi', 'getLocation', 'openLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2});wx.checkJsApi({jsApiList: ['getLocation'],success: function (res) {if (res.checkResult.getLocation == false) {that.$toast('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');return;}},fail: function (res) {console.log('checkJsApi fail=' + JSON.stringify(res))}});// 1, 微信公众号 授权 手机号，每点击一次，授权一次// 2，微信公众号，地图// 获取地理位置接口wx.ready(function () {wx.getLocation({type: "gcj02", //jssdk获取的坐标类型success: function (res) {console.log(res, 'success')that.GCJPosition.lat = res.latitude //纬度that.GCJPosition.lng = res.longitude //经度},cancel: function (res) {console.log(res, 'cancel')},fail: function (res) {console.log('fail', res)}});})})},// 初始化高德地图initAMap() {this.showmore = false// 实例化地图var mapObj = new AMap.Map('baidu-map', {resizeEnable: true,zoom: 17,zooms: [8, 17]});this.mapObj = mapObj;if (location.href.indexOf('&guide=1') !== -1) {mapObj.setStatus({scrollWheel: false })}// 加载定位插件this.addGeolocationPlugin();// 加载地理编码插件this.addGeocoderPlugin();// 绑定地图移动事件let that = this;setTimeout(function () {that.getLocation();}, 500)this.addMark(this.position)},// 初始化百度地图initBMap() {console.log('初始化百度地图', this.GCJPosition)this.showmore = falselet map = new BMap.Map('baidu-map');var point = new BMap.Point(168.95, 34.27);map.centerAndZoom(point, 18);let that = thisthis.bdPosition = this.$map.GCJtobd09(this.position[0], this.position[1])this.curP = this.$map.GCJtobd09(that.GCJPosition.lng, that.GCJPosition.lat) //当前坐标(gcj02)转成百度坐标let pt = new BMap.Point(this.bdPosition[0], this.bdPosition[1]);var mk = new BMap.Marker(pt);map.addOverlay(mk);//标出所在地map.panTo(pt);//地图中心移动var point = new BMap.Point(this.position[0], this.position[1]);//用所定位的经纬度查找所在地省市街道等信息console.log(this.GCJPosition, this.position)mk.addEventListener("click", function (e) {window.location.href = `http://api./direction?origin=latlng:${this.curP[1]},${this.curP[0]}|name:我的位置&destination=${this.bdPosition[1]},${this.bdPosition[0]}&mode=driving®ion=上海&output=html`;});},// 初始化腾讯地图initTMap() {console.log('初始化腾讯地图')this.showmore = falselet that = thisvar myLatlng = new qq.maps.LatLng(this.position[1], this.position[0]);//定义工厂模式函数var myOptions = {zoom: 17,//设置地图缩放级别center: myLatlng,//设置中心点样式mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType}//获取dom元素添加地图信息var map = new qq.maps.Map(document.getElementById("baidu-map"), myOptions);var latlngs = [new qq.maps.LatLng(this.position[1], this.position[0])];for (var i = 0; i < latlngs.length; i++) {(function (n) {//实例标注var marker = new qq.maps.Marker({position: latlngs[n],map: map});//标注点击事件qq.maps.event.addListener(marker, 'click', function (e) {window.location.href = `https://apis./uri/v1/routeplan?type=bus&to=终点&tocoord=${that.position[1]},${that.position[0]}&referer=PGCBZ-7XVC3-XKO36-3CEGN-B2L63-XYBHT`;});})(i);}},// 高德地图加标记addMark(position) {var marker = new AMap.Marker({content: '<view class="marker-route marker-marker-bus-from locationMarker"></view>',offset: new AMap.Pixel(-13, -34),position: position});this.mapObj.setCenter(position);this.userLocation = marker;this.userLocation.setMap(this.mapObj);marker.on('click', function (e) {marker.markOnAMAP({position: marker.getPosition()})})},getLocation() {this.geolocation.getCurrentPosition(); // 定位},addGeocoderPlugin: function () {this.mapObj.plugin(['AMap.Geocoder'], () => {this.geocoder = new AMap.Geocoder();});},addGeolocationPlugin: function () {this.mapObj.plugin(['AMap.Geolocation'], () => {this.geolocation = new AMap.Geolocation({enableHighAccuracy: true, //是否使用高精度定位，默认:truetimeout: 10000, //超过10秒后停止定位，默认：无穷大maximumAge: 0, //定位结果缓存0毫秒，默认：0showButton: false,convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowMarker: false, //定位成功后在定位到的位置显示点标记，默认：trueshowCircle: false, //定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: false, //定位成功后将定位到的位置作为地图中心点，默认：truezoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false});this.mapObj.addControl(this.geolocation);AMap.event.addListener(this.geolocation, 'complete', (data) => {console.log('定位成功', data.position)this.GCJPosition.lat = data.position.latthis.GCJPosition.lng = data.position.lng});AMap.event.addListener(this.geolocation, 'error', (data) => {console.log('定位失败')});});},filterBtn() {this.fixBtn = this.btns.filter(item => this.defaultBtn.indexOf(item) < 0)}},created() {this.getConfig()this.filterBtn()}}</script><style lang="less">.smnoprint {display: none; //去掉腾讯地图放大缩小控件}.amap-info-content {font-size: 12px;}#myPageTop {position: absolute;top: 5px;right: 10px;background: #fff none repeat scroll 0 0;box-shadow: -1px -1px 10px rgba(0, 0, 0, 0.08);margin: 0.2rem auto;padding: 0.2rem;font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";font-size: 14px;}#myPageTop label {margin: 0 20px 0 0;color: #666666;font-weight: normal;}#myPageTop input {width: 4rem;height: 0.5rem;border: 1px solid #c6c6c6;padding: 0 10px;}#myPageTop .column2 {padding-left: 25px;}.amap-sug-result {z-index: 99999;}.map-btn {display: flex;position: absolute;width: 100%;bottom: 0;left: 0;height: 100px;background-color: #fff;.map-type {width: 50%;text-align: center;background-color: #fff;line-height: 100px;font-size: 34px;color: #2c96f6;display: flex;justify-content: center;align-items: center;text:nth-child(1) {margin-right: 10px;}text:nth-child(2) {display: flex;align-items: center;width: 30px;image {width: 100%;}}}.guide-btn {width: 50%;text-align: center;background-color: #2c96f6;line-height: 100px;font-size: 34px;color: #fff;}.fix-btn {width: 50%;position: absolute;bottom: 100px;left: 0;text-align: center;view {height: 100px;line-height: 100px;background-color: #fff;font-size: 34px;color: #2c96f6;display: flex;justify-content: center;align-items: center;text:nth-child(1) {margin-right: 10px;}text:nth-child(2) {display: flex;align-items: center;width: 30px;image {width: 100%;}}}}}</style>
