小程序添加搜索功能🔍
高德地图链接: 地理/逆地理编码
// 搜索框
<u-search placeholder="请输入城市" v-model="keyword" @search="getAddressName"></u-search>
<view class="map_box">
<view class="card_box top_box u-font-14 font_bold u-m-b-30 u-m-t-30">
<!-- 地图 模块名：js_sdk -->
<!-- 文档地址https://ext.dcloud.net.cn/plugin?id=1217 -->
<map
class="map_style"
:latitude="latitude"
:longitude="longitude"
:markers="markers"
:polyline="polyline"
@tap="MapTap"
/>
</view>
</view>
//方法
getAddressName() {
let aa = encodeURI(this.keyword);
let that = this
Amap.GetGeo(aa, function (res) {
if (res) {
console.log(res,'daying')
let str =res[0].longitude
that.longitude = Number(str.split(',')[0]);
that.latitude = Number( str.split(',')[1]);
Amap.MakemarkersStart(str.split(',')[0], str.split(',')[1], function (res) {
console.log(res,'参数接收')
that.markers.push.apply(that.markers, res);
});
let location = [Number(str.split(',')[0]), Number(str.split(",")[1])];
Amap.GetRegeo(location.join(","), function (accept) {
console.log("获取当前位置11", accept);
that.newaddress = accept[0].regeocodeData.formatted_address;
});
that.newlongitude = Number(str.split(',')[0]);
that.newlatitude = Number( str.split(',')[1]);
}
});
},
// amap-uni.js中配置地图查询逆地理
AMapWX.prototype.getRegeo = function (a) {
function c(c) {
var d = b.requestConfig;
uni.request({
url: "https://restapi.amap.com/v3/geocode/regeo",
data: {
key: d.key,
location: c,
extensions: "all",
s: d.s,
platform: d.platform,
appname: d.key,
sdkversion: d.sdkversion,
logversion: d.logversion
},
method: "GET",
header: {
"content-type": "application/json"
},
success: function (b) {
console.log('入口测试收到哪些', b)
var d, e, f, g, h, i, j, k, l;
b.data.status && "1" == b.data.status ? (d = b.data.regeocode, e = d.addressComponent, f = [], g = "", d && d.roads[
0] && d.roads[0].name && (g = d.roads[0].name + "附近"), h = c.split(",")[0], i = c.split(",")[1], d.pois && d
.pois[0] && (g = d.pois[0].name + "附近", j = d.pois[0].location, j && (h = parseFloat(j.split(",")[0]), i =
parseFloat(j.split(",")[1]))), e.provice && f.push(e.provice), e.city && f.push(e.city), e.district && f.push(
e.district), e.streetNumber && e.streetNumber.street && e.streetNumber.number ? (f.push(e.streetNumber.street),
f.push(e.streetNumber.number)) : (k = "", d && d.roads[0] && d.roads[0].name && (k = d.roads[0].name), f.push(
k)), f = f.join(""), l = [{
iconPath: a.iconPath,
width: a.iconWidth,
height: a.iconHeight,
name: f,
desc: g,
longitude: h,
latitude: i,
id: 0,
regeocodeData: d
}], a.success(l)) : a.fail({
errCode: b.data.infocode,
errMsg: b.data.info
})
},
fail: function (b) {
a.fail({
errCode: "0",
errMsg: b.errMsg || ""
})
}
})
}
var b = this;
a.location ? c(a.location) : b.getWxLocation(a, function (a) {
c(a)
})
}, AMapWX.prototype.getGeo = function (a) {
function c(c) {
var d = b.requestConfig;
//uni.request({
wx.request({
url: "https://restapi.amap.com/v3/geocode/geo",
data: {
key: 'abe006938325e446020611f5e4815052',
address: decodeURI(a.address),
//key: d.key,
//s: d.s,
},
method: "GET",
header: {
"content-type": "application/json"
},
success: function (b) {
console.log(b, b.data.geocodes, b.data.geocodes[0].location, '出口数据2')//data.geocodes,b.data.geocodes[0].location
var d, e, f, g, h, i, j, k, l;
b.data.status && "1" == b.data.status ? (d = b.data, f = [], g = "", l = [{
longitude: d.geocodes[0].location,
city: d.geocodes[0].city,
id: 0,
provice: d.geocodes[0].provice,
info: b.info
}], a.success(l)) :
a.fail({
errCode: b.infocode,
errMsg: b.info
})
},
fail: function (b) {
a.fail({
errCode: "0",
errMsg: b.errMsg || ""
})
}
})
}
var b = this;
a.location ? c(a.location) : b.getWxLocation(a, function (a) {
c(a)
})
},
//lyn4ever-gaode.js
//高德key，请不要使用本人的这个key用于生产环境
// const key = '49b8927b1ba20328fbc693696f77b598';
//请注意使用我在static目录下的图片资源，你也可以自己修改
const amapFile = require('./amap-uni.js');
console.log(amapFile, '地图111')
function PlanningRoute(start, end, _waypoints, result, fail) {
let that = this;
var myAmapFun = new amapFile.AMapWX({
key: key
});
myAmapFun.getDrivingRoute({
origin: start,
destination: end,
waypoints: _waypoints,
success: function (data) {
var points = [];
if (data.paths && data.paths[0] && data.paths[0].steps) {
var steps = data.paths[0].steps;
for (var i = 0; i < steps.length; i++) {
var poLen = steps[i].polyline.split(';');
for (var j = 0; j < poLen.length; j++) {
points.push({
longitude: parseFloat(poLen[j].split(',')[0]),
latitude: parseFloat(poLen[j].split(',')[1])
})
}
}
}
//这个返回结果就是对应的路线坐标,其他属性页面自己配置,请参照uniapp地图组件一章节
//https://uniapp.dcloud.io/component/map
result({
points: points,
color: "#0606ff",
width: 8
})
},
fail: function (info) {
fail(info)
}
})
}
//标记标记点
function Makemarkers(startpoi, endpoi, waypoints, success) {
let markers = [];
//起点
let start = {
iconPath: "/static/start.png",
id: 0,
longitude: startpoi.split(",")[0],
latitude: startpoi.split(",")[1],
width: 40,
height: 40
}
markers.push(start)
//终点
let end = {
iconPath: "/static/end.png",
id: 1,
longitude: endpoi.split(",")[0],
latitude: endpoi.split(",")[1],
width: 40,
height: 40
}
markers.push(end)
//途经点,先将其分隔成为数组
let _waypoints = waypoints.split(';')
for (let i = 0, _len = _waypoints.length; i < _len; i++) {
let point = {
iconPath: "/static/tjd.png",
id: i,
longitude: parseFloat(_waypoints[i].split(",")[0]),
latitude: parseFloat(_waypoints[i].split(",")[1]),
width: 40,
height: 40
}
markers.push(point)
}
//统一风格为回调方式,也可以直接返回这个markers
success(markers);
}
// 单个获取标记 （起始）
function MakemarkersStart(longitude, latitude, success) {
let markers = [];
//起点
let start = {
iconPath: "/static/mack.png",
id: 0,
longitude: longitude,
latitude: latitude,
width: 40,
height: 40
}
markers.push(start)
success(markers);
}
// 逆地理编码API服务地址(将坐标转成具体地址) getRegeo
function GetRegeo(location, success) {
console.log('location', location, key)
let myAmapFun = new amapFile.AMapWX({
key: key
});
myAmapFun.getRegeo({
location: location,
success: function (data) {
console.log('出出出口测试收到哪些', data)
success(data);
},
fail: function (info) {
fail(info)
}
})
}
// 逆地理编码API服务地址(将城市转成坐标) getGeo
function GetGeo(address, success) {
let myAmapFun = new amapFile.AMapWX({
key: key
});
myAmapFun.getGeo({
address: address,
success: function (data) {
success(data);
},
fail: function (info) {
fail(info)
}
})
}
module.exports = {
line: PlanningRoute,
markers: Makemarkers,
MakemarkersStart: MakemarkersStart,
GetRegeo: GetRegeo,
GetGeo: GetGeo,
}
链接: 申请key
//要申请web端的key作为小程序的key,否则会有次数限制
高德地图链接: 错误码说明
776
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
