概要
微信小程序中，微信官方提供了地图打点选地址组件，但是在h5中，无法使用，接下来我们通过地图jssdk和某度poi信息检索实现地图打点选址。
先来看看最终效果
拖动地图打点选址、输入地址搜索都可以。
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/093b446a1d974c318f68fa5319949684.png
整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择地址</title>
<link rel="stylesheet" href="../../css/bootstrap.min.css"/>
<link rel="stylesheet" href="../../css/mask.css"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/popper.js"></script>
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin:0;
}
#container{
width:100%;
height:56%;
overflow: hidden;
}
.flex{
display: flex;
padding-top: 20px;
margin: 0 10px;
border-bottom: #e2e2e2 solid 1px;
background: #FFF;
}
.detail{
font-weight: 200;
font-size: 10px;
}
.float-right img {
width: 30px;
height: 30px;
float: right;
display: none;
}
.active img{
display: block;
}
@keyframes iconChecked {
from {
padding-bottom: 15px;}
to {
padding-bottom: 0;}
}
.icon{
animation-name: iconChecked;
animation-duration: 0.6s;
}
.input {
height: 44px;
width: 80%;
border: none;
outline: 0;
}
.search{
border: #41cc8b solid 2px;
border-radius: 20px;
background: #FFF;
height: 48px;
width: 80%;
margin: 10px auto;
padding: 0 10px;
}
.s-icon{
width: 30px;
height: 30px;
}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=<你的ak>"></script>
<title>选址服务</title>
</head>
<body style="background: #eafaf2">
<div id="container"></div>
<div style="border-radius: 30px;height: 44%;">
<div style="text-align: center">
<div class="search">
<img src="img/search.png" class="s-icon" alt="">
<input type="text" placeholder="输入关键字搜索" class="input" id="keywords">
</div>
</div>
<div id="addrs" style="padding-bottom: 60px; height: 85%;overflow-y: scroll;border-radius: 20px">
</div>
</div>
<div style="position: fixed;bottom: 10px;text-align: center;width: 100%;background: #eafaf2;">
<span class="btn w-75 " onclick="onSelect()" style="background: #41cc8b;color: #fff">确认选择</span>
</div>
<script>
var local;
var surroundingPois = [];
var checked;
function showAddrList(arr) {
if (!arr && arr.length > 0) {
checked = undefined;
return
}
checked = arr[0];
var s =
" <div οnclick='selAddr(0);' class=\"flex active\">\n" +
" <div style=\"width: 88%;\">\n" +
" <div class='title'>"+arr[0].title+"</div>\n" +
" <div class=\"detail\">"+arr[0].address+"</div></div>\n" +
" <div class=\"float-right\" >\n" +
" <img src=\"../../img/success.png\" alt=\"\">\n" +
" </div>\n" +
" </div>"
for (var i = 1; i < arr.length; i++) {
var item = arr[i]
s = s+ " <div οnclick='selAddr("+i+");' class=\"flex\">\n" +
" <div style=\"width: 88%;\">\n" +
" <div class='title'>"+item.title+"</div>\n" +
" <div class=\"detail\">"+item.address+"</div></div>\n" +
" <div class=\"float-right\" >\n" +
" <img src=\"../../img/success.png\" alt=\"\">\n" +
" </div>\n" +
" </div>"
}
$("#addrs").html(s);
}
var options = {
onSearchComplete: function(results){
// 判断状态是否正确
if (local.getStatus() == BMAP_STATUS_SUCCESS){
surroundingPois = [];
var curPoi = results._pois;
surroundingPois = curPoi.map( i=>{
return {
title:i.title,address:i.address,province:results.province,city:results.city,district:results.district,pt:i.point}
})
showAddrList(surroundingPois)
}
}
};
function pio(pt) {
var geoc = new BMapGL.Geocoder({
extensions_town: true});
geoc.getLocation(pt, function(rs){
console.log(rs)
var addComp = rs.addressComponents;
var surroundingArr = rs.surroundingPois ?rs.surroundingPois :[];
surroundingPois = surroundingArr.map( i=>{
return {
title:i.title,address:i.address,province:addComp.province,city:addComp.city,district:addComp.district,pt:i.point}
})
surroundingPois.push({
title:rs.address,address:rs.address,province:addComp.province,city:addComp.city,district:addComp.district,pt:rs.point})
showAddrList(surroundingPois)
})
}
var map = new BMapGL.Map('container');
var point = new BMapGL.Point(102.717255,25.051134);
map.centerAndZoom(point,15);
var geolocation = new BMapGL.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
map.setCenter(r.point );
pio(new BMapGL.Point( r.point.lng, r.point.lat))
// console.log()
// var point = new BMapGL.Point(102.717255,25.051134);
}
else {
pio(point)
}
});
$("#keywords").bind('input propertychange',function(){
var suffix = $(this).val();
if (suffix != undefined && suffix.length >= 2)
{
local = new BMapGL.LocalSearch(map, options);
local.search(suffix);
}
});
function ZoomControl() {
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
var c = $('#container');
this.defaultOffset = new BMapGL.Size(c.width()/2 - 15, c.height()/2-30)
}
ZoomControl.prototype = new BMapGL.Control();
var icon ;
ZoomControl.prototype.initialize = function(map) {
//创建一个dom元素
var div = document.createElement('img');
div.src = "./img/selPoint.svg"
// 设置样式
div.style.cursor = "pointer";
div.style.borderRadius = "5px";
div.style.width = "30px";
div.style.height = "30px";
div.id = "addrIcon"
// 绑定事件,点击一次放大两级
div.onclick = function(e){
map.setZoom(map.getZoom() + 2);
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
icon = div
return div;
}
//创建控件元素
var myZoomCtrl = new ZoomControl();
//添加到地图中
map.addControl(myZoomCtrl);
map.addEventListener("dragend", function(){
var center = map.getCenter();
$("#addrIcon").addClass("icon");
setTimeout(function () {
$("#addrIcon").removeClass("icon");
},1000)
pio(center)
}
);
function selAddr(i) {
$('.flex').removeClass("active")
$($('.flex')[i]).addClass("active");
map.setCenter(new BMapGL.Point(surroundingPois[i].pt.lng,surroundingPois[i].pt.lat))
checked = surroundingPois[i];
}
function onSelect() {
if (!checked) {
return
}
var url = sessionStorage.getItem("redirect_url");
if (url && url.length > 0) {
location.href = url + "?addr=" + encodeURIComponent(JSON.stringify(checked));
} else {
history.go(-1)
}
}
</script>
</body>
</html>
部分图标：
search.png
selPoint.svg
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1635732744570" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17208" xmlns:xlink="http://www.w3.org/1999/xlink" width="153" height="153"><defs><style type="text/css"></style></defs><path d="M512 0C348.408493 0 215.878665 132.529828 215.878665 296.121335s132.529828 296.121335 296.121335 296.121334 296.121335-132.529828 296.121335-296.121334S675.591507 0 512 0z m30.026289 121.140546c-3.106168 11.389282-14.49545 18.637007-26.920121 16.566229-10.353893-2.070779-20.707786-4.141557-32.097068-4.141558-76.618807 0-137.706775 62.123357-137.706774 137.706775 0 9.318504 1.035389 19.672396 3.106167 28.9909 2.070779 11.389282-5.176946 23.813953-16.566228 25.884732h-4.141557c-10.353893 0-19.672396-7.247725-21.743175-17.601618-2.070779-12.424671-4.141557-24.849343-4.141557-37.274014 0-100.43276 81.795753-182.228514 182.228513-182.228514 14.49545 0 27.955511 2.070779 42.450961 5.176947 11.389282 3.106168 18.637007 15.530839 15.530839 26.920121zM557.557128 623.304348c-16.566229 3.106168-32.097068 4.141557-49.698685 4.141557s-33.132457-1.035389-49.698686-4.141557c-13.460061 3.106168-23.813953 15.530839-23.813953 30.026289v339.607685c0 16.566229 13.460061 31.061678 31.061678 31.061678h84.901921c17.601618 0 31.061678-14.49545 31.061679-31.061678V653.330637c0-14.49545-10.353893-25.884732-23.813954-30.026289z" p-id="17209" data-spm-anchor-id="a313x.7781069.0.i0" class="selected" fill="#FF3030"></path></svg>
success.png
小结
这是我多年前写的工具，今天分享给大家提供学习参考。此页面源码可单独部署使用，选择地址号通过回调链接回传选中地址。
提示：必须填入你在某度申请的ak才能正常使用，个人测试可以免费申请