地图显示 微信开发_微信开发工具不显示地图 - CSDN
  • 转载请注明出处:http://blog.csdn.net/crazy1235/article/details/55004841本篇blog主要介绍微信小程序中的地图模块相关功能。基本使用地图组件使用起来也很简单。.wxml...

    转载请注明出处:http://blog.csdn.net/crazy1235/article/details/55004841


    本篇blog主要介绍微信小程序中的地图模块相关功能。

    基本使用

    地图组件使用起来也很简单。

    .wxml

    <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" circles="{{circles}}" bindregionchange="regionchange" show-location style="width: 100%; height: 350px;">
    </map>

    参数列表及说明如下:

    这里写图片描述

    除了显示基本地图,还可以在地图上添加markers–标注,polyline–折线,circles–圆形,controls–控件。

    markers

    这里写图片描述

    data: {
        //
        markers: [{
          iconPath: "../../img/marker_red.png",
          id: 0,
          latitude: 40.002607,
          longitude: 116.487847,
          width: 35,
          height: 45
        }],
        ... //省略代码
        }

    在data中定义markers变量来表示覆盖物

    然后map控件引入即可:

    <map id="map" longitude="{{longitude}}"  markers="{{markers}}" style="width: 100%; height: 350px;" ...//省略代码>
    </map> 

    效果如下:

    这里写图片描述


    polyline

    这里写图片描述

    
    data: {
        //
        polyline: [{
          points: [{
            longitude: '116.481451',
            latitude: '40.006822'
          }, {
            longitude: '116.487847',
            latitude: '40.002607'
          }, {
            longitude: '116.496507',
            latitude: '40.006103'
          }],
          color: "#FF0000DD",
          width: 3,
          dottedLine: true
        }],
        ... //省略代码
        }
    
    <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" polyline="{{polyline}}" style="width: 100%; height: 350px;">

    circles

    这里写图片描述

    
    data: {
        //
        circles: [{
          latitude: '40.007153',
          longitude: '116.491081',
          color: '#FF0000DD',
          fillColor: '#7cb5ec88',
          radius: 400,
          strokeWidth: 2
        }],
        ... //省略代码
        }
    
    <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" circles="{{circles}}" style="width: 100%; height: 350px;">

    效果如下:

    这里写图片描述


    controls

    这里写图片描述

    controls: [{
          id: 1,
          iconPath: '../../img/marker_yellow.png',
          position: {
            left: 0,
            top: 300 - 50,
            width: 50,
            height: 50
          },
          clickable: true
        }]
    <map id="map" controls="{{controls}}" bindcontroltap="controltap" style="width: 100%; height: 350px;">

    control点击事件如下:

    controltap: function (e) {
        console.log(e.controlId);
      },

    其实可以通过在map上添加一个按钮,来实现诸如:定位、状态返回等操作。
    (直接通过布局文件在map上添加view是显示不出来的)

    绑定事件

    这里写图片描述


    BUG

    关于经纬度,官方文档上都写的是Number类型。但是通过IDE调试的时候,写成字符串也是可以的。但是在IOS真机上运行时,markers却显示不出来,也不报错。

    后来自己对照属性的类型,发现后台传来的经纬度是字符串类型的。而字符串类型的经纬度在IOS真机上经测试就是显示不出来。

    所以将字符串转成Number类型即可。



    百度地图API

    百度地图团队的速度还是不错的!在小程序正式公测的第三天(2017.1.11)就发布了小程序版百度地图API

    百度地图微信小程序JavaScript API

    然而一期的功能并不多:

    • POI检索服务

    • POI检索热刺联想服务

    • 逆地址解析服务

    • 天气查询

    关于这四个功能,大家自行去调用API就是了!

    我要吐槽的是,为什么只有逆地址解析服务,没有地址编码服务呢?!

    SouthEast

    好吧,你不提供,我加上好吧!!

    把参考 web服务API里关于地址编码的API ,在小程序里面封装一下即可!

    其实上面看到的四个API也是从他们原有的web服务API中抽出来的 !

    核心代码如下:

    let startGeocoding = function (e) {
                wx.request({
                    url: 'https://api.map.baidu.com/geocoder/v2/',
                    data: geocodingparam,
                    header: {
                        "content-type": "application/json"
                    },
                    method: 'GET',
                    success(data) {
                        let res = data["data"];
                        if (res["status"] === 0) {
                            let result = res["result"];
                            // outputRes 包含两个对象,
                            // originalData为百度接口返回的原始数据
                            // wxMarkerData为小程序规范的marker格式
                            let outputRes = {};
                            outputRes["originalData"] = res;
                            outputRes["wxMarkerData"] = [];
                            outputRes["wxMarkerData"][0] = {
                                id: 0,
                                latitude: result["location"]['lat'],
                                longitude: result["location"]['lng'],
                                address: geocodingparam["address"],
                                iconPath: otherparam["iconPath"],
                                iconTapPath: otherparam["iconTapPath"],
                                desc: '',
                                business: '',
                                alpha: otherparam["alpha"],
                                width: otherparam["width"],
                                height: otherparam["height"]
                            }
                            otherparam.success(outputRes);
                        } else {
                            otherparam.fail({
                                errMsg: res["message"],
                                statusCode: res["status"]
                            });
                        }
                    },
                    fail(data) {
                        otherparam.fail(data);
                    }
                });
            };

    使用方法:

    // 地理编码
    
      startGeocoding: function () {
        Bmap.geocoding({
          fail: fail,
          success: success,
          address: '北京大学',
          iconPath: '../../img/marker_red.png',
          iconTapPath: '../../img/marker_red.png'
        })
      },

    这里写图片描述


    然后我还对 静态图 这个API进行了小程序化!!!

    /**
         * 静态图
         * 
         * @author ys
         *
         * @param {Object} param 检索配置
         * http://lbsyun.baidu.com/index.php?title=static
         */
        getStaticImage(param) {
            var that = this;
            param = param || {};
            let staticimageparam = {
                ak: that.ak2,
                width: param["width"] || 400,
                height: param["height"] || 300,
                center: param["center"] || '北京', // 地址或者经纬度
                scale: param["scale"] || 1, // 是否为高清图 返回图片大小会根据此标志调整。取值范围为1或2。 1表示返回的图片大小为size= width *height; 2表示返回图片为(width*2)*(height *2),且zoom加1  注:如果zoom为最大级别,则返回图片为(width*2)*(height*2),zoom不变。
                zoom: param["zoom"] || 11, //高清图范围[3, 18];0低清图范围[3,19]
                copyright: param["copyright"] || 1, // 0表示log+文字描述样式,1表示纯文字描述样式
                markers: param["markers"] || null, // 标注,可通过经纬度或地址/地名描述;多个标注之间用竖线分隔
            };
            return "http://api.map.baidu.com/staticimage/v2?" + "ak=" + staticimageparam["ak"] + "&width=" + staticimageparam["width"] + "&height=" + staticimageparam["height"] + "&center=" + staticimageparam["center"] + "&zoom=" + staticimageparam["zoom"] + "&scale=" + staticimageparam["scale"] + "&copyright=" + staticimageparam["copyright"];
        }

    关于静态图,在web端调用的时候需要单独申请key,所以这里要在传入一个key!

    在BMapWX构造函数中,传入ak2作为静态图的key

    constructor(param) {
            this.ak = param["ak"];
            this.ak2 = param["ak2"];
        }
    var Bmap = new bmap.BMapWX({
      ak: 'xxxxxxxxxxx',
      ak2: 'xxxxxxxxxxx'
    });

    使用方法也很简单:

    //获取静态图
      getStaticImage: function () {
        var url = Bmap.getStaticImage({
          scale: 2
        });
        console.log(url);
        that.setData({
          staticImageUrl: url
        })
      }

    这里写图片描述

    这里写图片描述


    高德地图API

    相比百度地图团队,高德地图团队更及时! 小程序公测第二天就发布了 小程序高德地图API

    微信小程序SDK > 概述

    目前提供的功能有:

    • 获取POI数据

    • 获取地址描述数据

    • 获取实时天气数据

    • 获取输入提示词

    • 路径规划

    • 绘制静态图

    在官网上,直接提供了路径规划的功能代码,和布局代码(.wxml & .wxss)

    可见,高德还是比较靠谱的!

    这里写图片描述


    腾讯地图API

    微信小程序JavaScript SDK

    • 地点搜索

    • 关键词输入提示

    • 逆地址解析

    • 地址解析

    • 距离计算

    • 获取城市列表

    • 获取城市区县


    注意

    使用需要注意以下几点:

    • map 组件是由客户端创建的原生组件,它的层级是最高的。

    • 请勿在 scroll-view 中使用 map 组件。

    • css 动画对 map 组件无效。


    百度地图小程序SDK扩展下载地址:

    https://github.com/crazy1235/WXlittleApplication

    展开全文
  • 微信开发中遇到了安卓正常显示内置地图,但是ios苹果系统不显示,经过排查是因为ios系统调用网页时的经度和纬度必须使用Number类型的,但是安卓的可以. wx.config({ debug: false, // 开启调试模式,调用的所有api的...

    在微信开发中遇到了安卓正常显示内置地图,但是ios苹果系统不显示,经过排查是因为ios系统调用网页时的经度和纬度必须使用Number类型的,但是安卓的可以.

     wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: [[${wxConfig.appId}]] , // 必填,公众号的唯一标识
            timestamp:[[${wxConfig.timestamp}]] , // 必填,生成签名的时间戳
            nonceStr: [[${wxConfig.nonceStr}]] , // 必填,生成签名的随机串
            signature: [[${wxConfig.signature}]] ,// 必填,签名
            jsApiList: ['checkJsApi', // 必填,需要使用的JS接口列表
                'openLocation',// 使用微信内置地图查看地理位置接口
                'getLocation']// 获取地理位置接口
        });
    
    wx.ready(function(){
            // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
            wx.getLocation({
                type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
                success: function (res) {
                   // var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
                    //var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
                   // gaoBegin(longitude,latitude);
    
                    wx.openLocation({
                        latitude: Number([[${wxrouteneed.glatitude}]]), // 纬度,浮点数,范围为90 ~ -90
                        longitude: Number([[${wxrouteneed.glongitude}]]), // 经度,浮点数,范围为180 ~ -180。
                       // latitude: 31.846120131031, // 纬度,浮点数,范围为90 ~ -90
                       // longitude: 117.271610135544, // 经度,浮点数,范围为180 ~ -180。
                        name: [[${wxrouteneed.garagename}]], // 位置名
                        address: [[${wxrouteneed.address}]], // 地址详情说明 address
                        scale: 18, // 地图缩放级别,整形值,范围从1~28。默认为最大
                        infoUrl: 'http://www.cetcbw.com' // 在查看位置界面底部显示的超链接,可点击跳转
                    });
    
    
                },
                fail:function (res) {
                    alert("对不起,您不能选择拒绝定位:"+res);
                }
            });
    
    
        });
    

    重要的是上面的代码经度和纬度的前面加上了Number();

    展开全文
  • 相关环境:微信公众号+百度地图 ...1.微信接口定位+百度地图显示位置(成功) 开始做的时候,由于微信只是刚接触,虽然知道微信有定位的接口,但是还是先去尝试了百度地图的定位和h5的定位,结果当然是...

    相关环境:微信公众号+百度地图

    需求:需要在页面上实现,点击落图按钮——》定位当前位置(获取经纬度)——》通过百度地图显示

    内容:

    做这个功能之前,并未接触过百度地图还有微信公众号开发之类的,所以即便突击学习了一下,也不太了解。

    1.微信接口定位+百度地图显示位置(成功)

    开始做的时候,由于微信只是刚接触,虽然知道微信有定位的接口,但是还是先去尝试了百度地图的定位和h5的定位,结果当然是失败(后面会总结一下失败的经验),最后尝试的使用微信公众号定位接口获取当前坐标+百度地图显示位置的方式才成功搞定,

     //这就是微信获取地理位置的接口,官方文档,百度资料一大堆
        function getwxlocal(){
            wx.getLocation({
                success: function (res) {
                    var point=new BMap.Point(res.longitude , res.latitude);
                    //使用百度接口对h5定位坐标进行坐标转换0-》4
                    BMap.Convertor.translate(point,0,translateCallback);
                    //alert("获取地理位置成功,经纬度为:(" + res.latitude + "," + res.longitude + ")" );
                    //alert(JSON.stringify(res));
                },
                cancel: function (res) {
                  $.alert('用户拒绝授权获取地理位置',"提示");
                } 
             });
        }

    //坐标转换完之后的回调函数方法
        function translateCallback(point) {
            initMap(point.lng,point.lat);//用得到的经纬度初始化地图
      }

    2.百度地图的api进行实时定位(失败)

        测试遇到了一些问题:

      (1)定位位置偏移严重(室内偏移-正常)

       虽然不太了解地图,但是一看到功能需求的时候,就想到了使用百度地图的api进行定位,第一次点击按钮,垮。。。成功了,可以定位,但是偏的几百米,偏了几百米,感觉挺严重的,拼命研究各种方法,什么百度的纠偏接口,纠偏算法,一点用也没有。

         咋办啊,愁死了,跟一个同事说起的时候,答案居然是正常的,手机的定位的基于卫星还有基站的什么的(了解不多),所以在室内进行测试的时候,偏移是很正常的,好吧,虽然很郁闷,但是知道原因了。后来在室外测试确实没问题,这个问题算是解决了。

    (2)无法进行第二次定位(app才有实时定位),(但是如果打开手机上的地图app,后台运行,公众号内的实时定位就完全没问题了)

      一开始定位完,没发现问题,但是在回家的路上,我开着微信,打开网页,按钮那么一按,问题出来了,咋还是公司的位置,一直刷一直刷,没有用还是公司的位置,没办法,放弃了,打算回公司再看一下情况,过了几个小时,心血来潮,定位按钮一按,成功了。要喷血啊,这是咋回事,开始疯狂查资料,百度没找到,谷歌没找到,每次定位完,都要好久才可以再定位一次,这显然是不行的。找来找去,在只言片语中发现,一句话,百度地图只支持在app程序中实现实时定位,在网页上只能是过好久才能定位一次(当然我现在也不知道真的假的?),反正我是实现不了,姑且当他是真的。那使用百度地图实现实时定位的方法,就没有用了。(本方法宣告失败)

    百度定位代码 (定位一次后,许久才能定位一次)//百度定位当前位置 --与h5定位类似(根据h5定位做的)
        var geolocation = new BMap.Geolocation();
        function getLocal(){
            geolocation.getCurrentPosition(function(r){
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    initMap(r.point.lng,r.point.lat);//定位完获取经纬度,初始化地图
                } else {
                    alert('failed'+this.getStatus());
                }        
            },{enableHighAccuracy: true})
        } 

    3.h5定位实现实时定位(失败)

    百度地图实时定位的方法失败后,就开始找其他方法了,百度了一下,h5定位的方法例子一大堆,高兴了一下,还以为有解决方案了,但是最终还是失望了。

    由于h5的定位和百度定位很相似(网上是说百度定位是根据h5定位做的),反正是失败了,与百度定位一样过好久才能实现一次定位,(一样也是打开手机上的地图app,实时定位就可以实现)

    //h5定位代码

    function getLocation() {

    if (navigator.geolocation) {

    navigator.geolocation.getCurrentPosition(showPosition, showError);

    } else {

           str= "Geolocation is not supported by this browser.";//浏览器不支持定位

    }   }

    function showPosition(position) {

          str = "Latitude: " + position.coords.latitude+ "<br />Longitude: " + position.coords.longitude;//经纬度

    }

    function showError(error) {

    switch (error.code) {

    case error.PERMISSION_DENIED:

        str= "User denied the request for Geolocation.";//用户不允许地理定位

        break;

    case error.POSITION_UNAVAILABLE:

        str= "Location information is unavailable.";//无法获取当前位置

        break;

    case error.TIMEOUT:

        str= "The request to get user location timed out.";//操作超时

        break;

    case error.UNKNOWN_ERROR:

        str= "An unknown error occurred.";//未知错误

        break;

    }   }

    4.h5跟踪定位实现实时定位(尝试失败,勉强可一用)

      百度和h5定位失败后,突发奇想使用h5的跟踪定位实现,跟踪定位大概每过几十秒自动定位一次,但是我要的功能是点击按钮采取定位,所以想通过跟踪定位看能不能实现,大概想了几个方案:

    (1)点击定位按钮,删除当前跟踪定位,重新建一个,然后定位,但是跟普通定位一样失败了,还是只能几十秒定位一次

    (2)跟踪定位在后台运行,每定位一次,把坐标存到一个变量里面,点击定位按钮的时候,直接去取坐标,然后定位显示到百度地图上,当然这种方法虽然还是几十秒才能定位一次,但是在需要的时候去取坐标,且几十秒的时间,人大概也移动不了多远,满足基本的需求是足够了,但是想一想还是排除,感觉用在实时定位上还是很不合适。

    //h5跟踪定位代码
        function getLocal(){
            if(loc!=null){  loc=null;  }
            loc=window.navigator.geolocation;
            if (loc) {
                if(watchID!=null){ watchID=null; }
                watchID=loc.watchPosition(showPosition,showError);//h5跟踪定位
                 if(currentID!=null){ currentID==null;   }
                //h5当前位置定位
                currentID=loc.getCurrentPosition(showPosition,showError,{provider:'baidu'});  
            }else {
                alert("该浏览器不支持定位。");
            } 
        } 

    展开全文
  • 不会的朋友可以看看《微信开发-初级接入微信公众平台MP》 2. 引用微信js-sdk, http://res.wx.qq.com/open/js/jweixin-1.0.0.js,然后通过config接口注入权限验证配置。先在自己的服务器上写个获取数据的接口...


    1.第一步当然是已经正确接入了微信并且配置好了回调安全域名。不会的朋友可以看看《微信开发-初级接入微信公众平台MP》

    2.   引用微信js-sdk, http://res.wx.qq.com/open/js/jweixin-1.0.0.js,然后通过config接口注入权限验证配置。先在自己的服务器上写个获取数据的接口:

    /**
    	 * 获取页面需要的配置信息的参数
    	 * 
    	 * @param request
    	 * @param url
    	 * @return
    	 */
    	@ResponseBody
    	@RequestMapping(value = "getJsTicket")
    	public Map<String, Object> getWeJsTicket(HttpServletRequest request, String url) {
    		Map<String, Object> map = new HashMap<String, Object>();
    		try {
    			// 获取微信signature
    			WxJsapiSignature sin = wxMpService.createJsapiSignature(url);
    			map.put("appId", configStorage.getAppId());
    			map.put("timestamp", sin.getTimestamp());
    			map.put("nonceStr", sin.getNonceStr());
    			map.put("signature", sin.getSignature());
    		} catch (Exception e) {
    			this.logger.error(e.getMessage());
    		}
    		return map;
    	}
    

    3.在引用了jweixin-1.0.0.js的页面里配置wx.config的验证(反正我把相关代码独立到单独的js文件里不行,不知为何),用ajax方式请求上面提供的url获得相关验证消息,然后再调用we.config方法去向微信服务器做验证:

    function configWx() {
    		var thisPageUrl = location.href.split('#')[0];
    		var json = {
    			url : thisPageUrl
    		};
    		var ajaxHelper = new AjaxHelper()
    		ajaxHelper.get("../weixin/getJsTicket", json, function(data) {
    			if (data != null) {
    				configWeiXin(data.appId, data.timestamp, data.nonceStr,
    						data.signature);
    			} else {
    				console.log("配置weixin jsapi失败");
    			}
    		}, function() {
    			console.log("配置请求错误");
    		});
    	}
    
    	function configWeiXin(appId, timestamp, nonceStr, signature) {
    		wx.config({
    			debug : true,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    			appId : appId,
    			timestamp : timestamp,
    			nonceStr : nonceStr,
    			signature : signature,
    			jsApiList : [ 'chooseImage', 'uploadImage', 'downloadImage',
    					'previewImage', 'openLocation', 'getLocation',
    					'scanQRCode', 'checkJsApi', 'onMenuShareTimeline',
    					'onMenuShareAppMessage', 'onMenuShareQQ',
    					'onMenuShareWeibo', 'onMenuShareQZone' ]
    		});
    	}
    

    注意jsApiList里配的权限。其它权限可从https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E4.BD.BF.E7.94.A8.E5.BE.AE.E4.BF.A1.E5.86.85.E7.BD.AE.E5.9C.B0.E5.9B.BE.E6.9F.A5.E7.9C.8B.E4.BD.8D.E7.BD.AE.E6.8E.A5.E5.8F.A3  config接口注入权限验证配置完成。

    3.  测试号也可以使用地理位置功能,且微信是能使用alert(“”)弹出框的。

    WGS84:为一种大地坐标系,也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。

    GCJ02:又称火星坐标系,是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系

    BD09:为百度坐标系,在GCJ02坐标系基础上再次加密。其中bd09ll表示百度经纬度坐标,bd09mc表示百度墨卡托米制坐标。

     

    2个js方法:

    使用微信内置地图查看位置接口

    wx.openLocation({
       latitude: 0, // 纬度,浮点数,范围为90 ~ -90
       longitude: 0, // 经度,浮点数,范围为180 ~ -180。
       name: '', // 位置名
       address: '', // 地址详情说明
       scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
       infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
    });

    获取地理位置接口:

    wx.getLocation({
       type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
       success: function (res) {
           var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
           var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
           var speed = res.speed; // 速度,以米/每秒计
           var accuracy = res.accuracy; // 位置精度
       }
    });


    一般我们如下使用:

    function getLocation() {
    		wx.getLocation({
    			type : 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
    			success : function(res) {
    				//使用微信内置地图查看位置接口
    				wx.openLocation({
    					latitude : res.latitude, // 纬度,浮点数,范围为90 ~ -90
    					longitude : res.longitude, // 经度,浮点数,范围为180 ~ -180。
    					name : '我的位置', // 位置名
    					address : '329创业者社区', // 地址详情说明
    					scale : 28, // 地图缩放级别,整形值,范围从1~28。默认为最大
    					infoUrl : 'http://www.gongjuji.net' // 在查看位置界面底部显示的超链接,可点击跳转(测试好像不可用)
    				});
    			},
    			cancel : function(res) {
    				
    			}
    		});
    	}
    

    先通过getLocation方式获取 到当前的经纬度,然后再将经纬度传给openLocation.

    注意:jsApiList里若没配置openLocation和getLocation权限会报


    错误。

    getLocation方法用于获得当前的经纬度,openLocation用于打开微信内置地图显示详情。比如现在的地图如下:



    展开全文
  • var currurl = decodeURIComponent(location.href.split('#')[0]); $.ajax({//授权 url : "../initWXJSInterface", dataType : 'json', data : { 'url' : currurl/...
  • 本次讲解微信开发第三篇:获取用户地址位置信息,是非常常用的功能,特别是服务行业公众号,尤为需要该功能,本次讲解的就是如何调用微信JS-SDK接口,获取用户位置信息,并结合百度地铁,实现在线地图搜索,与在线...
  • 微信小程序地图定位显示 微信小程序中可以调用微信小程序内置的地图信息。 实现效果: wxml: <view class='ServiceCenterButton02' bindtap='gotomapLocation' > <text style='margin-top:1.5...
  • 微信公众号实现打开内置地图功能时所用的js插件,方便好用
  • 闲来无事写一篇使用高德地图微信小程序SDK开发应用的实例。 接下来先看需求: 我们要做的是,根据用户输入的关键词,给出相应的提示信息,列表中显示地方的名称,地方的详细地址以及对应的经纬度坐标。 当然在UI上...
  • 最近在做微信小程序的开发,不得不说,入伙你会vue的话,小程序开发轻而易举,原理是一样的,而且比vue更简单。这里主要是利用了小程序提供的腾讯地图展示接口和定位接口进行实现的。非常方便,下面就说一下代码: ...
  • 微信小程序地图制作

    2020-07-28 23:30:39
    微信小程序地图制作 小程序开发 地图制作,源码下载 ,
  • 微信小程序之获取经纬度显示地图
  • &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible"... conten
  • 微信公众平台开发——腾讯地图导航
  • 原文:微信JS-SDK坐标位置转换为百度地图坐标微信JS-SDK开发过程中,使用getLocation获取坐标位置,如何将微信获取的坐标直接应用到百度地图中,显示以下效果: 说明:红色图标是从微信转换过来的位置,蓝色图标是...
  • 以前好像也犯过这样的错误,就是一个页面上写两个地图,我以为怎么呢第二个死活出不来,结果发现是因为宽高的设置问题,这简直了,以为千万记住没宽高东西不会显示出来的。百度的api没啥好说的,很简单引用接口就行...
  • 1.需要在wx.config中声明需要使用的功能(openLocation) 例如: wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会...
  • 情况1:发布需求自动获取我的位置最好能让我自己选择,也就是他很出现多个位置,还有需要显示地图 情况2:用户可以查看附近的服务人员有哪些?这个应该是通过定位测算距离,找出最近的 求帮助,当前用Thinkphp开发...
  • 微信小程序—-高德地图开发应用(获取key)1.利用高德开发平台创建应用http://lbs.amap.com/dev/index 2、点击创建新应用进入创建模态框3.添加新Key在创建的应用上点击”添加新Key”按钮。 得到KEY微信小程序—-...
1 2 3 4 5 ... 20
收藏数 10,313
精华内容 4,125
关键字:

地图显示 微信开发