在项目添加新功能时，使用cdn方式引入使用地图功能，使用功能只用到了地图的定位、点标记、详细地址查询、poi搜索和输入提示、计算两点之间的距离；因为在寻找高德地图问题时发现h5 和 web 端的好少，因此记录一下方便以后查找。
h5的navigator 原生定位
// 在导入js的时候添加插件AMap.Geocoder<script src="/maps?v=1.4.15&key=你的WEBjs的key&plugin=AMap.Geocoder"></script>let geocoder = new AMap.Geocoder({}); // 获取地理编码与逆地理编码类 实例// 判断是否存在navigator.geolocationif(navigator && navigator.geolocation) {// 开始定位navigator.geolocation.getCurrentPosition(function(position) {let latitude = position.coords.latitude;// 获取纬度let longitude = position.coords.longitude;// 获取经度// 获取到的是gps 定位 使用高德的经纬度转换// /api/webservice/guide/api/convert 这是经纬度转换的地址可以看下有什么参数$.ajax({url: '/v3/assistant/coordinate/convert?key=必须是web服务的key',type: 'get',data: {locations: longitude+','+latitude,coordsys: "gps",},success:function(res){// 根据转换的经纬度 查询当前位置的详细地址geocoder.getAddress(res.locations.split(','),function(status, result) {// 查询详细地址alert(result.regeocode.formattedAddress)});}})},function(err){console.log(err);},{enableHighAcuracy: true, //位置是否精确获取timeout: 5000, //获取位置允许的最长时间maximumAge: 1000//多久更新获取一次位置});}
1. 高德地图
首先我们引入脚本当前时间
/09/22高德地图版本号v=1.4.15使用高德地图
v=2.0版本在ios上有兼容问题地图渲染不出来 显示白屏效果 (不推荐使用)高德地图对
http站点的定位服务不精确 ，微信自从升级到7.0后就对http站点的定位不支持了所以高德在微信上定位失效可能是http站点导致的问题(但是在ie 浏览器和edge浏览器是可以使用的)如何申请高德地图key
<!--引入高德地图JSAPI --><script src="/maps?v=1.4.15&key=you key & plugin=AMap.Geocoder"></script>
在$(document).ready(function(){ }) 中执行map 的init 方法
let mapObj; // 地图实例let geolocation; // 定位对象实例let geocoder = new AMap.Geocoder({}); // 获取地理编码与逆地理编码类 实例mapObj = new AMap.Map('container',{center: [ 121.47, 31.23], // 地图中心点坐标值resizeEnable: true, // 是否监控地图容器尺寸变化，默认值为falsezoom: 9, // 地图显示的缩放级别});// 定位mapObj.plugin('AMap.Geolocation', function() {geolocation = new AMap.Geolocation({enableHighAccuracy: true,//是否使用高精度定位，默认:truetimeout: 10000,//超过10秒后停止定位，默认：无穷大maximumAge: 0, //定位结果缓存0毫秒，默认：0convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowButton: true, //显示定位按钮，默认：truebuttonPosition: 'RB', //定位按钮停靠位置，默认：'LB'，左下角// buttonOffset: new AMap.Pixel(80, 90),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)showMarker: true, //定位成功后在定位到的位置显示点标记，默认：trueshowCircle: false, //定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: true,//定位成功后将定位到的位置作为地图中心点，默认：truezoomToAccuracy:true//定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false});mapObj.addControl(geolocation); // 添加定位控件// 重新定位 只需要执行下面的方法就行geolocation.getCurrentPosition();AMap.event.addListener(geolocation, 'complete', onComplete)AMap.event.addListener(geolocation, 'error', onError)})// 定位成功function onComplete (data) {// data是具体的定位信息let position = [data.position.lng, data.position.lat]mapObj.setZoomAndCenter(15, position) // 将当前定位设置为中心并缩放至对应层级compareDistance(data.position); // 查询距离}// 定位失败function onError (data) {// 定位出错}// 计算两个坐标点距离let compareDistance = function(position1, position2) {//转换var myDistance = position1.distance([121.492728, 31.150647]);//这里测量距离// console.log(myDistance,'米')}// 获取城市getCityGD(function(res) {// poi搜索 和 输入提示poiSearchAndInputTip(res.city);})// 获取当前城市function getCityGD(callback) {AMap.plugin('AMap.CitySearch', function () {var citySearch = new AMap.CitySearch()citySearch.getLocalCity(function (status, result) {if (status === 'complete' && result.info === 'OK') {// 查询成功，result即为当前所在城市信息callback(result)}else{callback('')}})})} // poiSearchAndInputTip // poi搜索 和 输入提示function poiSearchAndInputTip(city) {AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){var autoOptions = {input: "tipinput",// 城市，默认全国city: city || "全国",}var autocomplete= new AMap.Autocomplete(autoOptions)var placeSearch = new AMap.PlaceSearch({city: city || '全国',map: mapObj,pageSize: 1})AMap.event.addListener(autocomplete, 'select', function(e){//TODO 针对选中的poi实现自己的功能let location = e.poi.location; // 当前点的经纬度 // e.poi // 当前点的详细信息placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name); //关键字查询查询// 根据经纬度查询 详细地址 具体到街道geocoder.getAddress(location,function(status, result){// 查询详细地址if (status === 'complete'&& result.regeocode) {document.getElementById('address').innerHTML = result.regeocode.formattedAddress;}else{console.error('根据经纬度查询地址失败')}})})})}
创建marker
// 创建点标记 position 格式 {lat:121.492728 , lng:31.150647}let createMarker = function(position) {//// 创建点标记var marker = new AMap.Marker({// 转换经纬度 new AMap.LngLatposition: new AMap.LngLat(position.lat, position.lng), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]offset: new AMap.Pixel(-10, -10),// 添加icon图标是因为有时候在手机端图片显示不出来icon: "/theme/v1.3/markers/n/mark_b.png", // 添加 Icon 图标 URL});mapObj.add(marker)}
创建圆
// position 格式 {lat:121.492728 , lng:31.150647}let createCircle = function (position) {// 创建圆 var circle = new AMap.Circle({center: new AMap.LngLat(121.492728,31.150647), // 圆心位置radius: 500, //半径strokeColor: "#216BFF", //线颜色strokeOpacity: 1, //线透明度strokeWeight: 1, //线粗细度fillColor: "#1F6AFF", //填充颜色fillOpacity: 0.1 //填充透明度});// 添加圆mapObj.add(circle);}
去除高德logo和定位按钮样式
/* 隐藏高德logo */.amap-logo,.amap-copyright {display:none !important; }/* 定位按钮位置调整 */.amap-geolocation-con .amap-geo {bottom:200px!important; display: none!important;}
创建圆和点标记是通过目标点的圆圈范围来判断、当前位置是否处于目标的范围内 ，高德地图在浏览器上是获取不到当前定位的 需要通过手机打开gps定位 并在https 站点上才能获取， 如果是做 h5+app 的话可以在app 上显示定位的。
2. 腾讯地图
腾讯地图导入脚本腾讯地图导入geolocation脚本是因为 腾讯地图的定位服务是一个单独的脚本服务
<!-- 腾讯地图 --><script charset="utf-8" src="/api/js?v=2.exp&key=you key"></script><!-- 如果有需要腾讯地图定位服务可以使用 --><script src="/lightmap/components/geolocation/geolocation.min.js"></script>
同高德地图在dom渲染完成后执行
let key = 'you key';// 腾讯keylet mapObj; // 地图实例// 创建地图mapObj = new qq.maps.Map(document.getElementById("container"), {center: new qq.maps.LatLng(31.23, 121.47),// 地图的中心地理坐标。zoomControl: false, //设置缩放控件启用zoomControlOptions: {//设置缩放控件的样式状态style: qq.maps.ZoomControlStyle.SMALL},disableDefaultUI: true, // 禁止所有控件 draggable: true,//设置是否可以拖拽scrollwheel: true, //设置是否可以滚动disableDoubleClickZoom: false, //设置是否禁止可以双击放大zoom: 15 // 地图的当前缩放等级。});
腾讯地图定位
因为我使用 腾讯定位需要请求9秒 而且在手机上有时还会请求失败（速度慢请求还会失败） 所以我使用的是高德地图的定位
服务、 为此我查找了腾讯和高德坐标系 都是使用的
GCJ-02坐标系实在不行腾讯还有坐标转换接口=>> 坐标转换接口、快捷键
WGS84：地理坐标系统，Google Earth和中国外的Google Map使用，另外，目前基本上所有定位空间位置的设备都使用这种坐标系统，例如手机的GPS系统。GCJ-02：投影坐标系统，也就是我们平常所说的火星坐标系，Google Map中国、高德和腾讯好像使用，这个是中国自己在WGS84基础上加密而成，目的显而易见。BD09：投影坐标系统，百度地图使用，在GCJ-02基础上二次加密而成。坐标系科普–引用地址、有兴趣可以自己去看看
如何申请腾讯地图key
var key = "you key";// Geolocation 参数 第一个是腾讯地图的key 第二个是调用来源，一般为您的应用名称var geolocation = new qq.maps.Geolocation(key, "myapp");// 请求定位时间var options = {timeout: 9000};// 执行获取定位geolocation.getLocation(showPosition, showErr, options);// 定位成功function showPosition(position) {// 成功...}function showErr() {// 失败... }
使用的高德地图定位 – 因为腾讯定位没有给我们定位图片所以要自己创建一个marker代表当前定位
// 定位 -- 高德AMap.plugin('AMap.Geolocation', function() {geolocation = new AMap.Geolocation({enableHighAccuracy: true,//是否使用高精度定位，默认:truetimeout: 10000,//超过10秒后停止定位，默认：无穷大maximumAge: 0, //定位结果缓存0毫秒，默认：0convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowButton: true, //显示定位按钮，默认：truebuttonPosition: 'RB', //定位按钮停靠位置，默认：'LB'，左下角// buttonOffset: new AMap.Pixel(80, 90),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)showMarker: true, //定位成功后在定位到的位置显示点标记，默认：trueshowCircle: false, //定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: true,//定位成功后将定位到的位置作为地图中心点，默认：truezoomToAccuracy:true//定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false});// 重新定位 只需要执行下面的方法就行geolocation.getCurrentPosition();AMap.event.addListener(geolocation, 'complete', onComplete)AMap.event.addListener(geolocation, 'error', onError)})// 定位成功function onComplete (data) {// 将高德坐标转换成腾讯的坐标 new qq.maps.LatLng let arr = data.position.toString().split(',');// 设置中心点mapObj.panTo(new qq.maps.LatLng(arr[1],arr[0]));//坐标 当前位置mapObj.zoomTo(17) // 设置层级// 创建当前位置markercreateMarker(new qq.maps.LatLng(arr[1],arr[0]))}// 定位失败function onError (data) {// 定位出错...}// 创建marker 当前位置 marker 因为腾讯定位没有给我们定位图片所以要自己创建一个markerfunction createMarker (center, iconImg) {iconImg = iconImg || '/javascript_v2/img/center.gif'let anchor = new qq.maps.Point(0, 39),size = new qq.maps.Size(42, 68),origin = new qq.maps.Point(0, 0),icon = new qq.maps.MarkerImage(iconImg,size,origin,anchor);// 创建maker var marker = new qq.maps.Marker({position: center,map: mapObj,icon: icon})}
腾讯poi 选点 和 地点搜索 — 腾讯 Autocomplete 自动补全
利用js 防抖函数处理 oninput 事件防止请求多次执行
这是Autocomplete 参数地址
//监听输入拼音,当用户在输入拼音时不进行操作let timer = null, nowCity;// 地图文本框监听 --- 控制 placeholder 显示隐藏function mapInput(e, dom){// 判断当前文本框去除空格后是否有值 if(!$(dom)[0].value.trim().length) {$('.placeholder-class').show(); // 自定义文本框placeholder}else {$('.placeholder-class').hide(); // 自定义文本框placeholderclearTimeout(timer)timer = null;// 防抖处理timer = setTimeout(()=> {// 限制自动补全的查询范围 nowCitytxAutocomplete($(dom)[0].value.trim(), nowCity)},500)}}// 获取当前的地理位置非精确定位 城市 在init中执行function getCity() {$.ajax({type:'get',async: false,url:'https://apis./ws/location/v1/ip',data:{key: key,output: 'jsonp'},dataType: "jsonp",jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)success:function (response){nowCity = response.result.ad_info.city}})} function txAutocomplete(value, city) {$.ajax({type:'get',async: false,url:'https://apis./ws/place/v1/suggestion',data:{keyword: value, // input 输入框的内容region: city, // 查询内容的城市 当前城市没有查找到默认全国搜索key: key, // 腾讯地图keyregion_fix: 0, output: 'jsonp'},dataType: "jsonp",jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)success:function (response){if(response.status == 0) {// 判断是否有数据 if(response.data.length == 0) {$('#poiTip').hide(); // 这是搜索结果展示容器 如上图 id 隐藏}else {$('#poiTip').show(); // 这是搜索结果展示容器 如上图 id 显示}// autocompleteHtml 生成html 样式 可以自己定义htmlVal = autocompleteHtml(response.data)$('#poiTip').html(htmlVal) // 将html 放到容器展示 }}})}let selectMarker, selectAddressName ;// 选中的地址function selectAddress(lat, lng, evt) {// 选择完地址后 隐藏 Autocomplete 提示$('#poiTip').hide();if(selectMarker) selectMarker.setMap(null);// 移除点标记let center = new qq.maps.LatLng(lat, lng) // 拿到经纬度转换// 查询详细地址 具体到街道getDetailsTX([lat, lng], function(res){selectAddressName = res;$('#address').html(selectAddressName)}); // 腾讯// 添加marker selectMarker = new qq.maps.Marker({position: center,draggable: false,// 是否可以拖动map: mapObj});// 将地图中心移到对应坐标mapObj.panTo(center); // 将缩放至17 最大18 最小3mapObj.zoomTo(17)// 点击marker 添加信息窗体 初始化infoWindowvar infoWindow = new qq.maps.InfoWindow({map: mapObj,position: new qq.maps.LatLng(39.984104, 116.307503),offset: {x: -8, y: -32 }});infoWindow.close();// 先隐藏// 监听地图marker 点击事件qq.maps.event.addListener(selectMarker, 'click', function() {infoWindow.open();infoWindow.setPosition(selectMarker.getPosition());// 信息窗体展示详细地址infoWindow.setContent(`${selectAddressName }`)});}// 获取详情地址 --- 逆地址解析 -- 腾讯 三林地铁站 ==> "上海市浦东新区三林路1518号"function getDetailsTX(local, callback) {// local 是个数组 [lat, lng]$.ajax({type: 'get',url: 'https://apis./ws/geocoder/v1/',data: {location: local.toString(), // 需要这样 39.984104,116.307503 参数格式get_poi: 1,key: key,output: 'jsonp' // 防止跨域},dataType: "jsonp", jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)success: function(res){callback(res.result.address); //address}})}
计算两点之间距离 直线
// 开始坐标点 和 结束坐标点var start = new qq.maps.LatLng(start_lat, start_lng), end = new qq.maps.LatLng(end_lat, end_lng);var total = Math.round(qq.maps.puteDistanceBetween(start, end) * 10) / 10;
去除腾讯地图logo
// 去除腾讯地图logo$("#container").bind("DOMNodeInserted",function(e){var tempCount = 0;$("#container .smnoprint").siblings().each(function(){tempCount++;if(tempCount==2||tempCount==3){$(this).remove();}});});
以上 就是此次用到的地方 后续如果还有用到会进行更新
