精华内容
下载资源
问答
  • 要的是图片上的效果,展示出多个规划的路线(就是知道出发点和终点自动生成一条路,而不是两点之间的连线)

    在这里插入图片描述
    要的是图片上的效果,展示出多个规划的路线(就是知道出发点和终点自动生成一条路,而不是两点之间的连线)

    展开全文
  • 本篇文章给大家带来的内容是关于小程序如何能实现类似朋友圈定位的功能(高德地图),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。说明因项目需要,该功能类似于微信朋友圈发布时的选择位置思路可...

    本篇文章给大家带来的内容是关于小程序如何能实现类似朋友圈定位的功能(高德地图),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    说明

    因项目需要,该功能类似于微信朋友圈发布时的选择位置

    思路

    可使用第三方地图服务商的API,根据当前位置查询POI列表,再展示在小程序的界面上

    ##效果:

    代码实现

    1、申请Key,并下载核心SDK

    此步参照官方说明。

    高德:https://lbs.amap.com/

    百度:http://lbsyun.baidu.com/

    腾讯:https://lbs.qq.com/

    本案以高德为例。

    下载地址:https://lbs.amap.com/api/wx/download

    2、设置安全通讯域名

    登录微信公众平台,在 “设置”->”开发设置” 中设置 request 合法域名,将 https://restapi.amap.com 中添加进去。如下图所示:

    相关代码

    wxml

    搜索

    取消

    不显示位置

    {{item.name}}

    {{item.address}}

    jsvar amapFile = require('../../utils/amap-wx.js');

    var markersData = [];Page({ data: { inputShowed: false, inputVal: "", markersData: [], latitude: '', longitude: ''

    }, showInput: function() {

    this.setData({ inputShowed: true

    });

    }, hideInput: function() {

    this.setData({ inputVal: "", inputShowed: false

    });

    }, clearInput: function() {

    this.setData({ inputVal: ""

    });

    }, inputTyping: function(e) {

    this.setData({ inputVal: e.detail.value

    });

    }, onLoad: function(options) {

    var that = this;

    var myAmapFun = new amapFile.AMapWX({ key: '你申请的Key'

    });

    myAmapFun.getPoiAround({ success: function(data) {

    markersData = data.markers;

    that.setData({ markersData: markersData

    });

    }, fail: function(info) {

    wx.showModal({ title: info.errMsg

    })

    }

    })

    }

    })

    相关推荐:

    展开全文
  • 在vue中调用原生高德地图(html页面),展示路线和marker 一、需求及问题 **1、**uniapp中其实已经封装好了map组件,基本的功能都可实现,但我这边需要一个暗黑色的地图,如下图所示,找了uniapp官网一遍,没找到...

    在vue中调用原生高德地图(html页面和js文件),展示路线和marker,以及行政区域边界

    一、需求及问题

    1、uniapp中其实已经封装好了map组件,基本的功能都可实现,但我这边需要一个暗黑色的地图,并且要展示行政区域边界信息,如下图所示,在uniapp官网找了一遍,没找到解决方案,于是我就看了原生高德地图api,发现可以实现修改地图的样式。高德官方地址:https://lbs.amap.com/api/javascript-api/summary
    2、计划引入高德官方地图后,就需要把地图搞在一个html页面中,此时存在四个问题:
    (1)vue页面如何引入html页面?
    解决:在vue页面使用组件webview
    (2)在html页面中如何引入高德地图?
    解决:在高德官方注册账号并申请Key
    (3)地图引入成功且绘制出路线和行政区域后,如何对浏览器页面进行截图?
    解决:使用html2canvas
    (4)如何对截取的图片进行分享(微信好友和朋友圈)?
    解决:这里就需要使用到web-view 的页面和vue应用内的页面交互。参考:在 web-view 加载的 HTML 中调用 uni 的 API
    图1

    二:结果展示

    截图前手机展示的样式:
    在这里插入图片描述
    截图分享到微信好友后的图片:
    在这里插入图片描述

    三:具体实现过程

    一、js引入高德地图
    1、划重点了:一定要先注册账号并申请Key,里面步骤很详细,直接跟着步骤来。
    二、vue页面
    使用webview引入html页面,其中src地址为咱们自己写的html文件

    <template>
    	<view class="shareImage">
    		<view style="">
    			<web-view id="mapContainer" src="/hybrid/html/allrouter.html" @message="message"></web-view>
    		</view>
    	</view>
    </template>
    

    三、html页面
    (1)目录结构:一定要放在hybrid目录下:在这里插入图片描述
    (2)引入高德地图:在页面添加 JS API 的入口脚本标签,并将其中「您申请的key值」替换为您刚刚申请的 key;

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 
    

    注意:这里踩坑之处,运行中可能会报"AMap is not undefined",
    解决方法:将地图api的js 与JQuery的 调换下位置就好了 。
    (3)添加div标签作为地图容器,同时为该div指定id属性,并设置样式,然后加载map地图;

     #container {
    		width: 100%;
    		height: 100%;
    	  }
    
     <div id="container" ></div>
    
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
    <script type="text/javascript">
        var map = new AMap.Map('container', {
           center:[117.000923,36.675807],//地图的中心坐标
           resizeEnable: true, //是否监控地图容器尺寸变化
      	   mapStyle: "amap://styles/darkblue",//地图的主题颜色:暗黑色
           zoom:11//初始地图级别
        });
    </script>
    

    上面只是一个简单的高德地图绘制过程,若要加载路线、marker、行政区域规划,还需要多看看高德官方的api,里面都有案例可参考。
    核心代码如下:
    绘制路线

    // lineArrList后端返回的字段,包含走的路线的所有经纬度
    lineArrList.map((item,index )=> {
    	// 进行画线
    	//lineArr是所有的经纬度集合
    	item.points.map(t =>{
    		lineArr.push([t[0],t[1]])
    	})
    	arr = new AMap.Polyline({
    		path: lineArr,          //设置线覆盖物路径
    		strokeColor: "#df5000", //线颜色橘色:df5000蓝色:2faeea
    		strokeWeight: 3,        //线宽
    		strokeStyle: "solid",   //线样式
    		lineJoin: 'round' // 折线拐点连接处样式
    	})
    	map.add(arr);//把路线绘制到地图上
    })	
    

    绘制行政区并给每个城市添加marker
    本示例中后端返回的有多个城市和其对应的经纬度,所以我用for循环对每个城市添加了marker和行政区域边界绘制。

    // /*################ 绘制行政区 ###############*/
    AMap.plugin('AMap.DistrictSearch', function () {
      // 创建行政区查询对象
      var city = new AMap.DistrictSearch({
    	// 返回行政区边界坐标等具体信息
    	extensions: 'all',
    	// 设置查询行政区级别为 
    	level: 'city'
      })
      // cityList是当前自驾城市的列表,假设cityList[i][0]值为北京市
     for(var i=0;i<cityList.length;i++){
    	 city.search(cityList[i][0], function(status, result) {
    		// 获取当前自驾城市(级别为市级)的边界信息
    		var bounds = result.districtList[0].boundaries
    		var polygons = []
    		if (bounds) {
    		  for (var i = 0, l = bounds.length; i < l; i++) {
    		   //生成行政区划polygon
    		   var polygon = new AMap.Polygon({
    			 map: map,
    			 strokeWeight: 1,
    			 path: bounds[i],
    			 fillOpacity: 0.7,
    			 fillColor: '#355050',
    			 strokeColor: '#1c7294'
    		   })
    		   polygons.push(polygon)
    		 }
    		 // 地图自适应
    		 // map.setFitView()
    	   }
    	 })
    	 // // 添加marker
    	 marker = new AMap.Marker({
    		position: [cityList[i][1],cityList[i][2]],
    		content: '<img src="./img/qiIcon.png" style="width: 30px;height:30px" />', //自定义点标记覆盖物内容
    		offset: new AMap.Pixel(-12, -30)
    	});
    	//  markers 添加到地图
    	map.add(marker);
     }
    })
    

    注意:踩坑之处:添加marker图片时一直不起作用,只有占位符。
    官方是这样写的,使用的是icon放图片的绝对路径或相对路径,我在项目中也这样写,但一直不显示图片。

    // 构造点标记
    var marker = new AMap.Marker({
        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        position: [116.405467, 39.907761]
    });
    

    解决方法:我放弃了icon,直接使用content,轻松解决该问题。

    content: '<img src="./img/qiIcon.png" style="width: 30px;height:30px" />', //自定义点标记覆盖物内容
    

    到此就实现了调用原生高德地图,展示路线和marker以及行政区域边界的绘制功能。下一步我们就需要对该页面进行截图并分享。
    接下一篇文章:uniapp踩坑(三):调用高德地图绘制出路线后,用html2canvas截图并分享到微信(二)

    展开全文
  • 这一篇文章,将讲述如何在H5里调起高德地图APP,并展示兴趣点。适合于展示某个餐馆,商场等,让用户自行选择前往方式。 场景一、在高德地图展示Marker点或者POI标记 在一些基于位置分享的应用开发中,我们会在...

    这一篇文章,将讲述如何在H5里调起高德地图APP,并展示兴趣点。适合于展示某个餐馆,商场等,让用户自行选择前往方式。

    场景一、在高德地图上展示Marker点或者POI标记

    在一些基于位置分享的应用开发中,我们会在地图上标记marker点或者使用地图上的poi点,这时候如果能在高德地图客户端展示这个位置的话,用户就可以使用导航或者路线规划等功能前往指定地点,起到引导用户前往的作用,因此JSAPI提供的调起高德地图并显示点标记或者poi点的功能,以满足此类需求。

    点标记位置展示

    通常我们都使用Marker点来进行位置的标定,所以JSAPI在Marker类中提供了markOnAMAP的方法,这个方法接受一个JSON对象参数,参数对象包含position和name两个属性,调起之后将在高德地图客户端或者Web站点标记显示对应的Marker点,基于marker点的展示,用户可以接着使用周边搜索、路线规划和导航等功能。扫描右侧二维码,点击地图中见的marker点查看移动端调起来效果。

     

    核心代码:

    var marker = new AMap.Marker({
            position:[116.473188,39.993253]
        });
    
        marker.markOnAMAP({
            position: marker.getPosition(),
            name:'首开广场'//name属性在移动端有效
        })

     

    全部源代码,可复制后直接使用:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <title>点标记</title>
        <style>
            body,#mapContainer{
                margin:0;
                height:100%;
                width:100%;
                font-size:12px;
            }
        </style>
        <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0?v=1.0" />
        <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
        <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值&plugin=AMap.ToolBar"></script>
        <script>
            function init() {
                map = new AMap.Map("mapContainer", {
                    zoom: 18,
                    center:[116.473188,39.993253]
                });
                marker = new AMap.Marker({
                    map:map,
                    position:[116.473188,39.993253]
                })
                marker.setLabel({
                    offset: new AMap.Pixel(20, 20),//修改label相对于maker的位置
                    content: "点击Marker打开高德地图"
                });
                marker.on('click',function(e){
                    marker.markOnAMAP({
                        name:'首开广场',
                        position:marker.getPosition()
                    })
                })
                map.addControl(new AMap.ToolBar());
                if(AMap.UA.mobile){
                    document.getElementById('button_group').style.display='none';
                }
            }
        </script>
    </head>
    <body onload="init()">
        <div id="mapContainer" ></div>
        <div class="button-group" id='button_group' style='top:15px;bottom:inherit'>
            <img src="http://a.amap.com/lbs/static/img/markonapp.png" style='width:120px;height:120px'>
            <div class='button' style='text-align: center'>手机扫码打开demo</div>
        </div>
    </body>
    </html>

     

    ---------------------------------------------------------------------------------------------------------------

    即日起至 2016/10/31 止,凡注册成为高德开发者的新用户,即可获赠 1 张阿里云优惠券,可享受最低 6 折购买阿里云产品。数量有限,发完即止。详情点击: http://lbsbbs.amap.com/forum.php?mod=viewthread&tid=20143

     

    展开全文
  • 这一篇文章将告诉您,如果直接打开高德地图APP,并展示路线规划。适合有定位的移动设备,可以查询到从“我的位置”到目的地的路径规划,并直接导航。 场景二、调起高德地图的路线规划功能 导航是目前JSAPI无法...
  • 如何实现在H5里调起高德地图APP

    千次阅读 2019-09-25 21:19:42
    这个方法接受一个JSON对象参数,参数对象包含position和name两个属性,调起之后将在高德地图客户端或者Web站点标记显示对应的Marker点,基于marker点的展示,用户可以接着使用周边搜索、路线规划和导航等功能。...
  • 学习高德地图 Android SD可以在地图上展示地点、自己的位置,搜索附件的餐馆、电影院、加油站,以及出行规划的路线。帮助最终用户在地图上展示地点、商户位置,搜索自己想去的餐馆、旅游景点、小区、加油站……一...
  • 本章节将带您迅速了解地铁图 JS API的基本使用,学习如何创建和设置地铁简易图,如何添加点标记、信息窗体,如何绑定事件,如何路线规划,使您在最短时间内创建一个地铁图页面。准备页面在正式开始开发地图应用之前...
  • 学习高德地图 Android SDK可以在地图上展示地点、自己的位置,搜索附件的餐馆、电影院、加油站,以及出行规划的路线。帮助最终用户在地图上展示地点、商户位置,搜索自己想去的餐馆、旅游景点、小区、加油站……一...
  • 最后,调起高德mobile地图来进行路线规划和周边查询。 本案例可以应用在微信开发平台,支付宝公众服务上,适合餐饮商家,汽车4S店,银行,停车场等业务。 由于使用高德云图+URI API的方式实现,开发者无需进行...
  • 摘要:本文以【唱吧】531麦霸音乐节为案例,详细解读了如何导入自有数据到高德云图,并进行检索和展示。最后,调起高德mobile地图来进行路线规划和周边查询。本案例可以应用在微信开发平台,支付宝公众服务上,适合...
  • 除了提供大屏系统外,还将每个模块都做了独立的模块示例界面,每个模块都可以独立学习使用,里面用到的控件也单独做了控件示例界面,方便学习每个控件如何使用,考虑着实周到! 超级详细的开发和使用手册,其中包括...

空空如也

空空如也

1 2
收藏数 25
精华内容 10
关键字:

高德地图如何展示路线