谈腾讯地图web api如何实现类似百度地图内置的城市切换、关键字输入提示功能

PC WEB端新增客户的时候需要填写客户地址和联系人信息，包括：省市区、街道、详细地址和经纬度以及联系人、固话和移动电话。获取客户地址信息之前用的是百度地图，由于小程序中客户拜访时，需要对客户进行定位、距离计算，所以客户经纬度都转换成了gcj02坐标。由于之前的百度地图经纬度坐标是百度自己坐标，因此需要获取经纬度时进行坐标转换，根据坐标点在百度地图上显示时需要二次转换，所以打算将百度地图替换成腾讯地图。

1、腾讯地图WEB API缺陷

先看下百度地图提供的2个现成功能，简单设置即可用：
1）城市切换

2）关键字输入提示

看完百度地图web api，再看看腾讯地图web api有没有这2功能：
1）城市切换，没有自带的，需要自行实现；
2）搜索关键字提示，提供了api接口，没有UI，需要自行完善；

2、基于jquery、bootstrap的腾讯地图城市切换和搜索关键字提示实现

1）页面截图

2）html代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>腾讯地图API</title><link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /><link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" /><script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><style type="text/css">ul,li{margin:0; padding:0; list-style: none}.form-horizontal .form-group {margin-right: 0; margin-left: 0;}.form-control, .btn{border-radius:0; box-shadow:none;}.pr0 {padding-right: 0}.pl0 {padding-left: 0}#btn-reset, #btn-ok{width: 49.9%}#btn-ok {margin-left: -1px}.modal-backdrop {z-index: 900;}.modal {z-index: 901;}.pop_map .city-wrapper {position: absolute; background: #fff; border: 1px solid #e2e2e2; top: 46px; z-index: 9; width: 400px;}.pop_map .city-wrapper .hd {padding: 10px 10px 0; border-bottom: 1px solid #e5ebf3}.pop_map .city-wrapper .close {position: absolute; right: 0px; top: 0px; padding: 10px; font-size: 14px}.pop_map .city-wrapper .bd{padding: 10px; height: 300px; overflow-y: auto}.pop_map .city-wrapper .search{position: relative;}.pop_map .city-wrapper .search i {position: absolute; right: 10px; top: 10px;}.pop_map .form-control{box-shadow: none; border-radius:0;}.pop_map textarea{height: 48px;}.pop_map .keywords p {margin-bottom:0}.pop_map a, .pop_map a:hover {color: #166abe;}.pop_map a{line-height: 24px; margin-right: 10px; white-space:nowrap; text-decoration: none; outline:0}.pop_map .keywords {border-bottom: 1px solid #e5ebf3}.pop_map .cities li{padding: 4px 0; border-bottom: 1px solid #e5ebf3}.pop_map .cities .col1{width: 40px; margin-right: 12px;}.pop_map .cities .col2{width: 310px;}.pop_map .cities .col2 a {margin-right: 10px;}      </style>
</head>
<body>
<div class="page-content container"><div class='page-body'><div class='panel panel-default'><div class="panel-heading"><h3 class='panel-title'>腾讯地图：城市切换、搜索关键字演示</h3></div><table class='table table-bordered'><thead><tr><th width=35>No.</th><th width="40%">描述</th><th width="60%"><button type="button" class="btn btn-primary" id="btn-call">调用地图</button></th></tr></thead><tbody><tr><td>1</td><td>省-市-区</td><td id="td-city"></td></tr><tr><td>2</td><td>街道</td><td id="td-street"></td></tr><tr><td>3</td><td>详细地址</td><td id="td-address"></td></tr><tr><td>4</td><td>经纬度</td><td id="td-jwd"></td></tr><tr><td>5</td><td>联系人</td><td id="td-contact"></td></tr><tr><td>6</td><td>联系方式</td><td id="td-tel"></td></tr>                                                                        </tbody></table></div>
</div>
<div id="pop-map" class="modal fade modal-primary pop_map" tabindex="-1">
<div class="modal-dialog" style="width:760px; margin-top:20px; min-height: 420px;"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="refresh">×</button><h4 class="modal-title" id="title">新增/修改</h4></div><div class="modal-body form-horizontal clearfix "><div class="form-group"><div class="input-group"><span class="input-group-btn"><button type="button" class="btn btn-default" id="btn-city"><span id="btn-city-text" style="margin-right: 5px">全国</span><i class="fa fa-caret-down"></i></button></span><input id="pop-map_ap" class="form-control"></input><span class="input-group-btn"><button type="button" id="btn-search" class="btn btn-primary">搜索</button></span></div></div><div class="clearfix"><div id="pop-map_map" class="col-xs-9" style="height:480px"></div><div class="col-xs-3 pr0"><div class="form-group"><label>省-市-区</label><input class="form-control input-sm" id="txt-city" readonly></input></div><div class="form-group"><label>街道门牌号</label><textarea class="form-control input-sm" id="txt-street"></textarea></div><div class="form-group"><label>经纬度</label><input class="form-control input-sm" id="txt-jwd" readonly></input></div><div class="form-group"><label>联系人</label><input class="form-control input-sm" id="txt-contact"></input></div><div class="form-group"><label>移动电话</label><input class="form-control input-sm" id="txt-mobile"></input></div><div class="form-group"><label>固话</label><input class="form-control input-sm" id="txt-tel"></input></div><div class="form-group" style='margin-bottom:0'><button class="btn btn-sm btn-default" id="btn-reset">重置</button><button class="btn btn-sm btn-primary ml-1" id="btn-ok">确定</button></div>  </div></div> <!-- /.modal-body --></div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal --><script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=VEQBZ-2NIRW-3AARP-OAXJ3-2SFQ7-RFBNL&libraries=place&callback=initMap"></script>
<script type="text/javascript">var LyPop = {id: "pop-map",poi: {},show: function(poi) {$("#" + this.id).modal({backdrop: 'static', keyboard: false});this.initPoi(poi);},hide: function() {$("#" + this.id).modal('hide');},onOk: function(poi) {console.log(poi);poi = poi || {};$("#td-city").text(poi.province ? poi.province + "-" + poi.city + "-" + poi.district : "");$("#td-street").text(poi.street || '');$("#td-address").text(poi.address || '');$("#td-jwd").text(poi.pos_jd ? poi.pos_jd + ", " + poi.pos_wd : "");$("#td-contact").text(poi.contact || "");$("#td-mobile").text(poi.mobile || "");$("#td-tel").text(poi.tel || "");this.hide();},initPoi: function(poi) {console.log("p: ", poi)poi = poi || {};$("#txt-city").val(poi.province ? poi.province + "-" + poi.city + "-" + poi.district : "");$("#txt-street").val(poi.street || '');$("#txt-jwd").val(poi.pos_jd ? poi.pos_jd + ", " + poi.pos_wd : "");$("#txt-contact").val(poi.contact || "");$("#txt-mobile").val(poi.mobile || "");$("#txt-tel").val(poi.tel || "");this.poi = poi;if(poi.pos_jd && poi.pos_wd) {  // 设置地图centermap.panTo(new qq.maps.LatLng(poi.pos_wd, poi.pos_jd));}}}var StringUtil = {format: function() {if(arguments.length == 0) return null;var str = arguments[0], a = arguments.length > 1 ? arguments[1] : null;if (! a || typeof a != 'object') {for(var i=1;i<arguments.length;i++) {var re = new RegExp('\\{' + (i-1) + '\\}','gm');str = str.replace(re, arguments[i]);}} else {    //对象格式化.var r = new RegExp('\\{([\\s\\S]+?)\\}','gm'), b = null, _str = str;while((b = r.exec(_str)) !== null) {str = str.replace(b[0], a[b[1]]);}}return str;}}var map = null, geocoder = null, cityservice = null, searchService = null, keyword = "";function initMap() {//init mapmap = new qq.maps.Map(document.getElementById("pop-map_map"), {// 地图的中心地理坐标。center: new qq.maps.LatLng(39.916527,116.397128),zoom: 13,              //缩放级别,4-17mapTypeControl: false,   //地图、卫星类型选择开关panControl: true       //东南西北旋转按钮});geocoder = new qq.maps.Geocoder({complete : function(result){var addrComponents = result.detail && result.detail.addressComponents;if (addrComponents) {var strCity = addrComponents.province + "-" + addrComponents.city + "-" + addrComponents.district;if(strCity != $("#txt-city").val()) {$("#txt-city").val(strCity);$("#txt-street").val(addrComponents.street);}$("#txt-jwd").val(result.detail.location.lng + ", " + result.detail.location.lat);LyPop.curPoi = {province: addrComponents.province, city: addrComponents.city, district: addrComponents.district, pos_jd: result.detail.location.lng, pos_wd: result.detail.location.lat}}}});//设置城市信息查询服务cityservice = new qq.maps.CityService();//请求成功回调函数cityservice.setComplete(function(result) {console.log("sss: ", result)map.setCenter(result.detail.latLng);});cityservice.setError(function(result) {console.log("error: ", result, arguments)// map.setCenter(result.detail.latLng);});//调用Poi检索类。用于进行本地检索、周边检索等服务。searchService = new qq.maps.SearchService({complete : function(results){if(results.type === "CITY_LIST") {var cityName = results.detail.cities[0].cityName;searchService.setLocation(cityName);$("#" + LyPop.id + " .btn-city-text").text(cityName).data("city", cityName);searchService.search(keyword);return;}var pois = results.detail.pois;var latlngBounds = new qq.maps.LatLngBounds();for(var i = 0,l = pois.length;i < l; i++){var poi = pois[i];latlngBounds.extend(poi.latLng);  var marker = new qq.maps.Marker({map:map,position: poi.latLng});marker.setTitle(poi.name);}map.fitBounds(latlngBounds);}});//添加监听事件var ap = new qq.maps.place.Autocomplete(document.getElementById("pop-map_ap"));qq.maps.event.addListener(ap, "confirm", function(res){keyword = res.value;searchService.search(keyword);});qq.maps.event.addListener(map, 'click', function(event) {geocoder.getAddress(event.latLng);});}$(function() {//var hotcities = ['北京','上海','广州','天津', '重庆', '深圳','杭州', '成都', '南京'];var provincePys = ['A','F','G','H', 'J', 'L','N', 'Q', 'S', 'T', 'X', 'Y', 'Z'];var provinceList = [{province: "安徽", py: "A", fullname: "安徽省", cities: ["合肥", "芜湖", "蚌埠", "淮南", "马鞍山", "淮北", "铜陵", "安庆", "黄山", "滁州", "阜阳", "宿州", "六安", "亳州", "池州", "宣城"]},{province: "福建", py: "F", fullname: "福建省", cities: ["福州", "厦门", "莆田", "三明", "泉州", "漳州", "南平", "龙岩", "宁德"]},{province: "广东", py: "G", fullname: "广东省", cities: ["广州", "韶关", "深圳", "珠海", "汕头", "佛山", "江门", "湛江", "茂名", "肇庆", "惠州", "梅州", "汕尾", "河源", "阳江", "清远", "东莞", "中山", "潮州", "揭阳", "云浮"]},{province: "广西", fullname: "广西壮族自治区", cities: ["南宁", "柳州", "桂林", "梧州", "北海", "防城港", "钦州", "贵港", "玉林", "百色", "贺州", "河池", "来宾", "崇左"]},{province: "贵州", fullname: "贵州省", cities: ["贵阳", "六盘水", "遵义", "安顺", "毕节", "铜仁", "黔西南", "黔东南", "黔南"]},{province: "甘肃", fullname: "甘肃省", cities: ["兰州", "嘉峪关", "金昌", "白银", "天水", "武威", "张掖", "平凉", "酒泉", "庆阳", "定西", "陇南", "临夏", "甘南"]},{province: "河北", py: "H", fullname: "河北省", cities: ["石家庄", "唐山","秦皇岛","邯郸","邢台","保定","张家口","承德","沧州", "廊坊", "衡水"]},{province: "河南", fullname: "河南省", cities: ["郑州", "开封", "洛阳", "平顶山", "安阳", "鹤壁", "新乡", "焦作", "濮阳", "许昌", "漯河", "三门峡", "南阳", "商丘", "信阳", "周口", "驻马店"]},{province: "湖北", fullname: "湖北省", cities: ["武汉", "黄石", "十堰", "宜昌", "襄阳", "鄂州", "荆门", "孝感", "荆州", "黄冈", "咸宁", "随州", "恩施"]},{province: "湖南", fullname: "湖南省", cities: ["长沙", "株洲", "湘潭", "衡阳", "邵阳", "岳阳", "常德", "张家界", "益阳", "郴州", "永州", "怀化", "娄底", "湘西"]},{province: "黑龙江", fullname: "黑龙江省", cities: ["哈尔滨", "齐齐哈尔", "鸡西", "鹤岗", "双鸭山", "大庆", "伊春", "佳木斯", "七台河", "牡丹江", "黑河", "绥化", "大兴安岭"]},{province: "海南", fullname: "海南省", cities: ["海口", "三亚", "三沙", "儋州"]},{province: "江苏", py: "J", fullname: "江苏省", cities: ["南京", "无锡", "徐州", "常州", "苏州", "南通", "连云港", "淮安", "盐城", "扬州", "镇江", "泰州", "宿迁"]},{province: "江西", fullname: "江西省", cities: ["南昌", "景德镇", "萍乡", "九江", "新余", "鹰潭", "赣州", "吉安", "宜春", "抚州", "上饶"]},{province: "吉林", fullname: "吉林省", cities: ["长春", "吉林", "四平", "辽源", "通化", "白山", "松原", "白城", "延边"]},{province: "辽宁", py: "L", fullname: "辽宁省", cities: ["沈阳", "大连", "鞍山", "抚顺", "本溪", "丹东", "锦州", "营口", "阜新", "辽阳", "盘锦", "铁岭", "朝阳", "葫芦岛"]},{province: "宁夏", py: "N", fullname: "宁夏回族自治区", cities: ["银川", "石嘴山", "吴忠", "固原", "中卫"]},{province: "内蒙古", fullname: "内蒙古自治区", cities: ["呼和浩特", "包头", "乌海", "赤峰", "通辽", "鄂尔多斯", "呼伦贝尔", "巴彦淖尔", "乌兰察布", "兴安", "锡林郭勒", "阿拉善"]},{province: "青海", py: "Q", fullname: "青海省", cities: ["西宁", "海东", "海北", "黄南", "海南", "果洛", "玉树", "海西"]},{province: "山东", py: "S", fullname: "山东省", cities: ["济南", "青岛", "淄博", "枣庄", "东营", "烟台", "潍坊", "济宁", "泰安", "威海", "日照", "莱芜", "临沂", "德州", "聊城", "滨州", "菏泽"]},{province: "山西", fullname: "山西省", cities: ["太原", "大同", "阳泉", "长治", "晋城", "朔州", "晋中", "运城", "忻州", "临汾", "吕梁"]},{province: "陕西", fullname: "陕西省", cities: ["西安", "铜川", "宝鸡", "咸阳", "渭南", "延安", "汉中", "榆林", "安康", "商洛"]},{province: "四川", fullname: "四川省", cities: ["成都", "自贡", "攀枝花", "泸州", "德阳", "绵阳", "广元", "遂宁", "内江", "乐山", "南充", "眉山", "宜宾", "广安", "达州", "雅安", "巴中", "资阳", "阿坝", "甘孜", "凉山"]},{province: "台湾", py: "T", fullname: "台湾省", cities: ["台北", "高雄", "台南", "台中", "南投", "基隆", "新竹", "嘉义", "新北", "宜兰", "桃园", "苗栗", "彰化", "云林", "屏东", "台东", "花莲", "澎湖"]},{province: "西藏", py: "X", fullname: "西藏自治区", cities: ["拉萨", "日喀则", "昌都", "林芝", "山南", "那曲", "阿里"]},{province: "新疆", fullname: "新疆维吾尔自治区", cities: ["乌鲁木齐", "克拉玛依", "吐鲁番", "哈密", "昌吉", "博州", "巴州", "阿克苏", "克州", "喀什", "和田", "伊犁", "塔城", "阿勒泰"]},{province: "云南", py: "Y", fullname: "云南省", cities: ["昆明", "曲靖", "玉溪", "保山", "昭通", "丽江", "普洱", "临沧", "楚雄", "红河", "文山", "西双版纳", "大理", "德宏", "怒江", "迪庆"]},{province: "浙江", py: "Z", fullname: "浙江省", cities: ["杭州", "宁波", "温州", "嘉兴", "湖州", "绍兴", "金华", "衢州", "舟山", "台州", "丽水"]},{province: "其它", fullname: "", cities: ["香港", "澳门"]}];var cities = [];for(var i in provinceList) {var _cities = provinceList[i]['cities'];for(var ii in _cities) {cities.push({name: _cities[ii], fullname: (provinceList[i]['province'] == '其它' ? '' : provinceList[i]['province'] + "/") + _cities[ii]});}}      var mapCity = '<div id="city-wrapper" class="city-wrapper" style="display:none;">'+ "<div class='hd'>"+  "<p>请选择城市</p>"+  "<div class='close'><i class='fa fa-close'></i></div>"+    "<p>当前城市: <span id='cur-city'></span></p>"+ "</div>"+ "<div class='bd'><div class='search'>";// 热门城市mapCity += "<div class='keywords'><p><a href='javascript:void(0);' fullname='全国'>全国</a>";for(var i in hotcities) {mapCity += StringUtil.format("<a href='javascript:void(0);' fullname='{0}'>{1}</a>", hotcities[i] + '市', hotcities[i]);}mapCity += "</p></p>";for(var i in provincePys) {mapCity += StringUtil.format("<a href='{0}'>{1}</a>", "#py_" + provincePys[i], provincePys[i]);}mapCity += "</p></div>";mapCity +=  "</div>" // search-endmapCity += "<ul class='cities'>";for(var i in provinceList) {var province = provinceList[i];mapCity += "<li class='clearfix'>";mapCity += StringUtil.format("<div class='pull-left col1'><a href='javascript:void(0);' {0}>{1}</a></div>", province.py ? "name=py_" + province.py: "", province.province);mapCity += "<div class='pull-left col2'>";for(var ii in province.cities) {mapCity += StringUtil.format("<a href='javascript:void(0);' fullname='{0}'>{1}</a>", province.province + "/" + province.cities[ii], province.cities[ii]);}mapCity += "</div>"mapCity += "</li>"}mapCity += "</ul>";mapCity += "</div></div>";//$("#btn-call").click(function(e){LyPop.show(LyPop.curPoi || {});});$("#btn-ok").on("click", function(e) {var curPoi = LyPop.curPoi || {};if (LyPop.onOk) {var result = $.extend({}, LyPop.poi, LyPop.curPoi);result.street = $("#txt-street").val();result.contact = $("#txt-contact").val();result.tel = $("#txt-tel").val();result.mobile = $("#txt-mobile").val();if(result.province && result.city) result.address = (result.province == result.city ? "" : result.province) + result.city + result.district + ' ' + result.street;if(!result.province || !result.city || !result.district || !result.street) {alert('省市区、详细地址不能为空'); return}LyPop.curPoi = result;LyPop.onOk(result);}});$("#btn-reset").on("click", function(e) { LyPop.initPoi(LyPop.poi || {}); });$("#btn-search").on("click", function(e) {var keyword = $("#pop-map_ap").val();if(keyword) searchService.search(keyword);})$('#btn-city').on('click', function(e) {$("#city-wrapper").toggle();})$(".close").on('click', function(e) {$("#city-wrapper").hide();})$("#pop-map .modal-body").append(mapCity);$("#pop-map a[fullname]").on('click', function(e) {$("#cur-city").text($(this).attr('fullname'));$("#btn-city-text").text($(this).attr('fullname')).data('city', $(this).text());$("#pop-map_ap").val('');cityservice.searchCityByName( $(this).text() + "市");$("#city-wrapper").hide();});})
</script>
</body>
</html>

代码说明：
中文整理的代码，结构有点乱，勉强可以工作，仅供参考。

3、进一步优化

建议大家封装成一个弹出框组件，可以：
1）根据poi数据，初始化地图；
2）可以显示、隐藏弹出框组件；
3）可以有返回结果回调；

谈腾讯地图web api如何实现类似百度地图内置的城市切换、关键字输入提示功能相关推荐

百度地图Web API Python模块
目录百度地图Web API Python模块描述快速开始调用方法工厂模式代理模式对象 JsonLike __init__(json=dict(), **kwargs) __str__() ...
【高德地图WEB开发】入门篇（地图/搜索/经纬度/缩放层级）
前言本篇文章是高德地图web开发入门篇,实现地图搜索等基本功能,后续会继续更新地图标记点.驾车.骑行.货车等单地点\多地点导航.公交路线.兴趣周边点.及其他地图功能开发文章,所有功能均使用js实现, ...
百度地图API制作类似百度地图的路线导航界面并实现简单的路线规划功能
之前我们讲了怎么在百度地图上设置Marker(如A点..) 和弹出框(跟随Marker的,Marker移动的时候也是会跟着移动的),接着又觉得百度地图自带的放大缩小不(fei)是(chang)很(de ...
APICloud,内置API及url调用百度地图导航
内置API及url调用百度地图APP导航方法中的两个参数,为自己当前位置的经纬度 function arouseMap(lon,lat){var location = $api.getStorage ...
百度地图AK申请注意+百度地图API生成热力图+调用百度地图API自动获取经纬度和地址
文章目录一.百度地图AK密钥申请二.调用百度地图API生成热力图三.调用百度地图API自动获取经纬度和地址一.百度地图AK密钥申请点击百度地图API控制台,输入登录账户,即可进入,若账户未完 ...
BaiduMap---百度地图官方Demo之调用百度地图（介绍如何调启百度地图实现自身业务功能）
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
门店定位怎么在地图上显示_怎么在百度地图上面显示自己店面的地址，
展开全部 1.进2113入百度地图,然5261后登录自己的百度帐号4102. 2.接着搜1653索一下自己的商铺回是否在地图答上面有标注,如没有再选择添加该地点. 3.进入到百度本地商户中心,再次搜索 ...
高德地图：实现3D模型轨迹回放效果（类似百度地图汽车模型路书）
需求描述需使用高德地图实现类似百度地图汽车模型路书的效果,即: ①在地图上添加一个沿着路径移动,且角度与路径一致的3D模型: ②3D模型移动过的路径用不同颜色显示出来: 在高德地图在线示例中实现的效 ...
高德地图 web api 使用
1. 高德地图开发者官网新建开发账号 https://lbs.amap.com 2.在项目index.html中引入对应key值的web api 3.在相应的页面添加map元素,并初始化一个map对象 ...
百度地图web API定位不准，定位偏移问题处理
百度地图浏览器API 获取GPS定位是根据调用浏览器核心获取GPS,部分手机型号定位不准,主要是因为部分手机采用的是GOOGLE GPS坐标格式.部分手机用的是原生坐标格式这两种格式百度地图无法 ...