一、uniapp使用高德地图小程序
高德地图可以很方便地应用到uniapp小程序中。要使用高德地图小程序，需要先安装uni-app插件。安装方式如下：
npm install uni-app安装完插件后，在项目中引入地图组件：
<template>
<view>
<map :longitude="longitude" :latitude="latitude" :markers="markers" style="width:100%; height:300px;"/>
</view>
</template>
<script>
export default {
data() {
return {
longitude: 116.397428,
latitude: 39.90923,
markers: [{
id: 1,
latitude: 39.90923,
longitude: 116.397428,
name: 'T.I.T 创意园'
}]
}
}
}
</script>其中，longitude和latitude用于指定地图显示的中心点位置，markers用于标记地图上的点位。
二、uniapp调用高德地图
在uniapp中调用高德地图进行定位或者路径规划，需要使用高德地图API。首先，需要在高德地图开发者中心申请开发者账号，获得API key。在应用中使用API时，需要将API key添加到请求参数中。
示例代码：
<template>
<view>
<button type="primary" @click="getLocation">获取当前位置</button>
</view>
</template>
<script>
export default {
methods: {
getLocation() {
uni.getLocation({
type: 'gcj02',
success: function(res) {
const url = 'http://restapi.amap.com/v3/geocode/regeo?key=yourkey&location=' +
res.longitude + ',' + res.latitude + '&poitype=&radius=1000&extensions=all';
uni.request({
url: url,
success: (res) => {
console.log(res);
}
});
}
});
}
}
}
</script>上面的代码会在点击按钮后，通过uni.getLocation方法获取当前位置的经纬度，并将API key和经纬度信息添加到请求参数中，向高德地图API中心发出请求，并打印返回结果。
三、uniapp使用高德地图搜索位置
高德地图API提供了位置搜索的接口，可以根据关键词或者类型进行位置搜索，返回搜索结果的经纬度。
示例代码：
<template>
<view>
<input v-model="searchText" type="text" placeholder="输入搜索关键字"/>
<button type="primary" @click="searchLocation">搜索位置</button>
</view>
</template>
<script>
export default {
data() {
return {
searchText: '',
location: ''
}
},
methods: {
searchLocation() {
const url = 'https://restapi.amap.com/v3/place/text?key=yourkey&keywords=' +
encodeURIComponent(this.searchText) + '&city=&output=json&offset=20&page=1&extensions=all';
uni.request({
url: url,
success: (res) => {
console.log(res);
if (res.data && res.data.pois && res.data.pois.length > 0) {
this.location = res.data.pois[0].location;
}
}
});
}
}
}
</script>上面的代码中，会在输入框中输入搜索关键字后，通过调用高德地图API的位置搜索接口，返回搜索结果并打印到控制台中。
四、uniapp使用高德地图手动获取位置
除了使用定位API获取位置信息外，还可以通过手动选择地图上的点位来获取位置信息。
示例代码：
<template>
<view>
<map :longitude="longitude" :latitude="latitude" :markers="markers" :show-location="true"
@bindmarkertap="onMarkerTap" style="width:100%; height:300px;"/>
</view>
</template>
<script>
export default {
data() {
return {
longitude: 116.397428,
latitude: 39.90923,
markers: [{
id: 1,
latitude: 39.90923,
longitude: 116.397428,
name: 'T.I.T 创意园'
}]
}
},
methods: {
onMarkerTap(e) {
console.log('onMarkerTap', e);
if (e.markerId === 1) {
this.longitude = 116.424655;
this.latitude = 39.925519;
}
}
}
}
</script>上面的代码中，通过配置地图组件的show-location属性为true，可以在地图上显示当前位置的标记。然后通过监听组件的bindmarkertap事件，获取用户点击的标记信息，修改地图的中心位置。
五、uniapp使用高德地图路径规划
高德地图API还提供了路径规划的接口，可以根据起点和终点，返回规划好的路径方案。可以在地图上展示规划好的路径。
示例代码：
<template>
<view>
<map :longitude="longitude" :latitude="latitude" :polyline="polyline" style="width:100%; height:300px;"/>
</view>
</template>
<script>
export default {
data() {
return {
longitude: 116.397428,
latitude: 39.90923,
polyline: []
}
},
methods: {
drawRoute() {
const that = this;
uni.request({
url: 'https://restapi.amap.com/v3/direction/driving?key=yourkey&origin=116.481028,39.989643&destination=116.434446,39.90816&extensions=base',
success: function(res) {
const steps = res.data.route.paths[0].steps;
const paths = [];
for (let i = 0; i < steps.length; i++) {
const segment = steps[i].polyline.split(';');
for (let j = 0; j < segment.length; j++) {
const point = segment[j].split(',');
paths.push({
longitude: point[0],
latitude: point[1]
});
}
}
that.polyline.push({
points: paths,
color: "#FF0000DD",
width: 2,
dottedLine: false
});
console.log(res);
}
});
}
}
}
</script>上面的代码中，通过调用高德地图API的路径规划接口，获取起点和终点的路径，并将路径展示在地图上。
六、uniapp地图接入高德地图
将高德地图接入uniapp应用，需要先在高德地图开发者中心注册开发者账号，获得API key，然后安装uni-app插件，对应的命令为：
npm install uni-app然后在项目中安装高德地图组件，对应的命令为：
npm i --save uni-amap-map@latest然后在需要使用地图的页面中，引入地图组件：
<template>
<view>
<u-amap
:scrollZoom="true"
:scaleControl="true"
:zoom="16"
:center="{longitude: longitude, latitude: latitude}"
:markers="markers"
style="width: 100%;height: 100%;position: absolute;top: 0;"
/>
</view>
</template>
<script>
export default {
data() {
return {
longitude: 116.397428,
latitude: 39.90923,
markers: [{
id: 1,
latitude: 39.90923,
longitude: 116.397428
}]
}
}
}
</script>上面的代码中，引入了高德地图组件，并配置组件的一些属性，如地图缩放、中心点、标记等。
七、uniapp高德地图API使用教程
高德地图API提供较为丰富的接口供开发者使用，包括但不限于定位、搜索、路径规划等。下面是一些高德地图API使用示例：
//获取当前位置
uni.getLocation({
type: 'wgs84',
success: function (res) {
console.log(res);
},
fail: function () {
console.log('获取位置失败');
}
});
//搜索位置
uni.request({
url: "https://restapi.amap.com/v3/place/text?key=yourkey&keywords=" + encodeURIComponent('北京大学') + "&city=&output=json&offset=1&page=1&extensions=all",
success: (res) => {
console.log(res.data);
}
});
//路径规划
uni.request({
url: "https://restapi.amap.com/v3/direction/driving?key=yourkey&origin=116.481028,39.989643&destination=116.434446,39.90816&extensions=base",
success: (res) => {
console.log(res.data);
}
});可根据实际需要，在应用中根据文档提供的接口，进行开发相关功能。
