1.注册账号并申请Key

  • 首先,注册开发者账号,成为高德开放平台开发者

  • 登陆之后,在进入「应用管理」 页面「创建新应用」

  • 为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

2.准备页面
先建个js文件,加载jsAPI

export default function MapLoader() {
  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(window.AMap);
    } else {
		var script = document.createElement('script');
		 script.type = "text/javascript";
		 script.async = true;
		script.src = "https://webapi.amap.com/maps?v=1.4.15&key=xxxxxxxxxxxxx&callback=callAMap";
		script.onerror = reject;
		  document.head.appendChild(script);
    }
    window.callAMap= () => {
      resolve(window.AMap);
    };
   })
  }

JSAPI 1.3 开始完全支持 HTTPS 协议,如需使用安全协议,替换 JS API 的入口脚本URL中的http为https即可。随着
Chrome、iOS 等相继限制非安全域的定位请求,我们建议您升级网站到HTTPS协议,并使用HTTPS协议加载 JS API。

3.创建地图
需要先导入才能使用,我这是做了两个地方的路线,想要怎么做按照文档来就行

<template>
	<view class="content">
		<view id="container">
			
		</view>

	</view>
</template>

<script>
	import AMap from "../../util/utils.js"
	export default {
		data() {
			return {
				 resAmap:null,
				 startlng:116.397428,   
				 startlat:39.90923,
				 endlng:116.407428,
				 endlat:39.10923,
				 zoom: 11,
			}
		},
		onLoad() {
			this.initAMap();
		},
		methods: {
			async initAMap() {
				try {
					//console.log(this.resAmap);
					this.resAmap = await AMap();
					this.$nextTick(function() {
						let self=this;
				        let map = new self.resAmap.Map('container', {
				            mapStyle:'amap://styles/whitesmoke',  //设置地图的显示样式
				            zoom: 5,
				            center: [self.startlng,self.startlat],
							showBuildingBlock:true,
							resizeEnable: true,
							viewMode: '3D',
							zoom: self.zoom,
							zooms: [3, 20],
				        });	
						this.resAmap.plugin(['AMap.DrivingPolicy', 'AMap.Driving'], function () {
						        
						})
						let marker = new self.resAmap.Marker({
						     position: new self.resAmap.LngLat(self.startlng,self.startlat),   // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
	
							offset: new self.resAmap.Pixel(-13, -20),
							content: '<img src="../static/image/icon.png" style="width:26px;height:26px"/>',
							map: self.map
						});
						map.add(marker);
						
						let InfoWindow = new self.resAmap.InfoWindow({
							 autoMove:true,
							 content:'这个屯',
							 offset:new self.resAmap.Pixel(-13, -20),
						})
						InfoWindow.open(map,[self.endlng, self.endlat]);
						
						const drivingOption = {
						  // policy: AMap.DrivingPolicy.LEAST_DISTANCE, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
						  province: '浙' // 车牌省份的汉字缩写
						}
							
						//构造路线导航类 
						const driving = new self.resAmap.Driving(drivingOption);	
								console.log(self.startlat)
						  // 根据起终点经纬度规划驾车导航路线 
						driving.search(new self.resAmap.LngLat(self.startlng,self.startlat), new self.resAmap.LngLat(self.endlng,self.endlat,), function (status, result) {
						  // result即是对应的驾车导航信息,相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
						  if (status === 'complete') {
							  console.log(result);
							  drawRoute(result.routes[0]); 
						  } else {
						      console.log('获取驾车数据失败:' + result);
						  }
						});
						
						//
						function drawRoute (route) {
						        var path = self.parseRouteToPath(route)
						
						        var startMarker = new self.resAmap.Marker({
						            position: path[0],
						            icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
						            map:map
						        })
						
						        var endMarker = new self.resAmap.Marker({
						            position: path[path.length - 1],
						            icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
						            map:map
						        })
								
						        var routeLine = new self.resAmap.Polyline({
						            path: path,
						            isOutline: true,
						            outlineColor: '#ffeeee',
						            borderWeight: 2,
						            strokeWeight: 5,
						            strokeColor: '#0091ff',
						            lineJoin: 'round'  
						        })
						
						        routeLine.setMap(map)
						        // 调整视野达到最佳显示区域
						        map.setFitView([startMarker, endMarker, routeLine])
						}
					})
				}catch(e){
					console.log(e)
				}

			},
			parseRouteToPath(route) {
			        var path = []
			
			        for (var i = 0, l = route.steps.length; i < l; i++) {
			            var step = route.steps[i]
			
			            for (var j = 0, n = step.path.length; j < n; j++) {
			              path.push(step.path[j])
			            }
			        }
			
			        return path
			}
		}
	}
</script>

<style>
	#container {
		z-index: 99;
		width: 100%;
		height:calc(100vh - 500rpx);
	
	}
</style>

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐