js 跳转到指定位置 高德地图_JS引入高德地图定位
在此记录一下X项目使用高德地图的思路高德地图(X项目前端框架是Jquery)
2准备工作(封装方法,以便直接调用)
—2.2封装超时方法($.timeOut-参考)
—2.3封装异步调用地图的方法
/**
* 异步加载地图js
* @param e: 加载完成回调方法名称,字符串格式;
*/
$.GDMapLoad = function(e){
var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值';
if(e){
if(!$.ownStore.get("GDmapPosition")){//定位信息
var GDmapPosition= {};//new AMap.Geocoder();
GDmapPosition.ststus = "0";
GDmapPosition.lng = "";
GDmapPosition.lat = "";
GDmapPosition.province = "";
GDmapPosition.city = "XX市";
GDmapPosition.cityCode = "";
GDmapPosition.address = "";
$.store.set("CGDmapPosition" , CGDmapPosition);
}
url += '&callback=' + e;
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);
} else{
$("body").append('');
}
}
3编写代码
—3.1 写一个页面样例:
——3.1. HTML:
正在定位...
——3.1. JS://浏览器定位
var isMapSuccess = 0;//初始化定位失败
$(function () {
$.GDMapLoad('GDMapInit');
})
/**
* 高德地图回调
*/
function GDMapInit(){
$("#mapPosition").click(function(){//是为失败的时候,点击位置跳转地图页面进行定位
var link = "../map.html?cbBack=" + $.encode(window.location.href);
window.location.href = link;
});
var GDmapPosition= {};
if ($.timeOut('indexMapInit')) {//此处d调用封装的获取session 超时方法
GDmapPosition = $.store.get('CGDmapPosition') || {};
if (GDmapPosition .ststus == '1') {//是否定位成功
isMapSuccess = 1;
$("#position").text(CGDmapPosition.city + CGDmapPosition.district);
return;
}
}
AMap.plugin('AMap.Geolocation', function() {//引入插件-浏览器定位(https://lbs.amap.com/api/javascript-api/guide/services/geolocation)
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位,默认:true
timeout: 3000 //超过10秒后停止定位,默认:5s
});
geolocation.getCurrentPosition(function(status, result) {
if (status == 'complete') {//定位成功
GDmapPosition.ststus = '1';
GDmapPosition.lng = result.position.lng;
GDmapPosition.lat = result.position.lat;
GDmapPosition.province = result.addressComponent.province;
GDmapPosition.city = result.addressComponent.city;
GDmapPosition.cityCode = result.addressComponent.citycode;
GDmapPosition.cityCode = $.cityFormat(CGDmapPosition.cityCode);//$.cityFormat:地图cityCode转项目业务的cityCode编码
GDmapPosition.district = result.addressComponent.district;
GDmapPosition.address = result.formattedAddress;
} else {
GDmapPosition.ststus = '0';
GDmapPosition.lng = '';
GDmapPosition.lat = '';
GDmapPosition.province = '';
GDmapPosition.city = 'XX市';
GDmapPosition.cityCode = '';
GDmapPosition.district = '';
GDmapPosition.address = '定位失败-默认地市';
}
$.store.set('CGDmapPosition', CGDmapPosition);//存储定位信息
if(GDmapPosition.ststus == "1"){
$("#position").text(GDmapPosition.city + GDmapPosition.district);
isMapSuccess = 1;
} else {
$("#position").text("定位失败");
isMapSuccess = 0;
}
});
});
}
—3.2 定位失败跳转手动定位页面
——3.2.1 map页-HTML:
确认
——3.2.1 map页-js:
$(function(){
$.GDMapLoad("GDMapInit");
});
/**
* 高德地图初始化
*/
var map;
var geocoder;
var marker;//标点
function GDMapInit(){
map = new AMap.Map("map", {
resizeEnable: true
});
AMap.plugin('AMap.Geocoder', function() {//异步加载地理编码与逆地理编码服务插件
geocoder = new AMap.Geocoder();
});
map.on('click', clickGetPosition);
keySearch();//初始化搜索框
doNewPosition();//重新定位
}
/**
* 关键字检索
*/
function keySearch(){
AMap.plugin('AMap.Autocomplete', function(){
var mapSearch = new AMap.Autocomplete({
input: "mapSearch",//支持传入输入框DOM对象的id值,或直接传入输入框的DOM对象。
});
AMap.event.addListener(mapSearch, "select", keySearchSelect);//注册监听,当选
});
}
/**
* 关键字检索返回
*/
function keySearchSelect(result){
var lng = result.poi.location.lng;
var lat = result.poi.location.lat;
setMarker(lng , lat);//设置标点
}
/**
* 重新获取定位(https://lbs.amap.com/api/javascript-api/reference/location#m_AMap.Geolocation)
*/
function doNewPosition(){
AMap.plugin('AMap.Geolocation', function() {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:5s
showMarker: false //是否显示定位点
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
});
}
/**
* 定位成功后执行参数
*/
function onComplete(result){
setMarker(result.position.lng , result.position.lat);
}
/**
* 设置marker,定义标点(https://lbs.amap.com/api/javascript-api/reference/overlay#marker)
*/
function setMarker(lng , lat){
map.setCenter([lng , lat]);//设置地图中心位置
if(!marker){
map.setZoom(15);
marker = new AMap.Marker({
position: [lng , lat],
});
}else{
marker.setPosition([lng , lat]);//setPosition(lnglat:[LngLat])设置点标记位置
}
marker.setMap(map);//为Marker指定目标显示地图
lnglatFormat(lng , lat);//经纬度重新解析,给搜索框赋值
}
/**
* 经纬度解析
*/
var GDmapPositionNew;//存储搜索结果或点击地图定位信息
function lnglatFormat(lng , lat){
var $mapSelect = $("#mapSelect")
geocoder.getAddress([lng , lat], function(status, result) {
if(status === 'complete' && result.info === 'OK' && result.regeocode) {
GDmapPositionNew= {};
GDmapPositionNew.ststus = "1";
GDmapPositionNew.lng = lng;
GDmapPositionNew.lat = lat;
GDmapPositionNew.province = result.regeocode.addressComponent.province;
GDmapPositionNew.city = result.regeocode.addressComponent.city;
GDmapPositionNew.cityCode = result.regeocode.addressComponent.citycode;
GDmapPositionNew.cityCode = $.cityFormat(CGDmapPositionNew.cityCode);
GDmapPositionNew.district = result.regeocode.addressComponent.district;
GDmapPositionNew.address = result.regeocode.formattedAddress;
$mapSelect.text(GDmapPositionNew.address);
}else{
GDmapPositionNew= false;
$mapSelect.text("");
}
});
}
/**
* 确认
*/
function beOk(){
var cbBack = $.decode($.getUrlParam("cbBack"));
if(GDmapPositionNew){//重新设置新的地理位置
$.store.set("CGDmapPosition" , GDmapPositionNew);
}
$.gotoLink(cbBack);
}
4结尾
还有很多功能可以自定义,官方API 参考手册
js 跳转到指定位置 高德地图_JS引入高德地图定位相关推荐
- js 跳转到指定位置 高德地图_【高德字符串JavaScript面试题】面试问题:高德地图Js … - 看准网...
申请JSAPI的开发者key 申请地址:http://lbs.amap.com/dev/key 引入高德地图JavaScript API文件: 创建地图容器 在页面body里你想展示地图的地方创建一个 ...
- js 跳转到指定位置 高德地图_第三方高德地图Javascript API
1. 申请JSAPI的开发者Key : http://lbs.amap.com/dev/key 2. 引入高德地图JSAPI文件: AMap.Scale // 地图的比例因子 / ...
- js 跳转到指定位置 高德地图_在H5页面内通过地址调起高德地图实现导航
项目中用到的一个功能是要通过点击地址来实现打开地图app实现地址导航. 如下图: 实现思路就是在H5页面内通过点击marker图标然后进行当前位置与页面上地址的路程规划与导航. 由于项目中用到的是高德 ...
- js 跳转到指定位置 高德地图_JS控制div跳转到指定的位置的几种解决方案总结
总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 1.给链接a加个#的方式来实现跳转.(锚点方法)这里直接贴下代码: div1 div2 ...
- html导航栏页面切换的js,js实现页面滚动切换导航栏/点击导航栏跳转到指定位置...
最近一直在弄页面的事情,对页面方面的知识又巩固了一下.这次的内容如题,大家对代码有疑问或者是有更好的方法欢迎留言! js部分 //标题对象 var title = document.getElemen ...
- js实现页面滚动切换导航栏/点击导航栏跳转到指定位置
最近一直在弄页面的事情,对页面方面的知识又巩固了一下.这次的内容如题,大家对代码有疑问或者是有更好的方法欢迎留言! js部分 //标题对象 var title = document.get ...
- recycleview 使用详解,添加头部尾部,混合item,侧滑菜单,跳转到指定位置,实现九宫格布局
添加头部尾部,混合item:https://blog.csdn.net/meixi_android/article/details/82256319 侧滑菜单:https://blog.csdn.ne ...
- RecyclerView跳转到指定位置,RecyclerView上下滑动监听,RecyclerView滑动速度
1.RecyclerView跳转到指定位置 只需调用recycleview的置顶方法: recyclerView.scrollToPosition(15); 如果你需要让第15item在屏幕居中,只需 ...
- 锚点定位 跳转到指定位置 回到顶部功能
一.跳转到指定位置 项目中数据较多,但是要在一个页面展示出来,就会需要定位功能. 例如淘宝中点击某个商品的分类会跳转到对应的模块,模块中是详细的商品信息 数据 arrayList:[{ //不一一列出 ...
最新文章
- java rectangle获取xy_JFreeChart 动态移动线 并求出两条线交点XY
- HDU 3507:Print Article
- 【Xamarin 在Mac OS 上的部署安装环境】
- linux高通平台代码,高通linux系统初始化
- android - 常用知识点以及代码片段(不断更新)
- 2017.6.6 数表 思考记录
- so(3) se(3) optimization
- js数组操作大全(转)
- PHP漏洞全解(三)-客户端脚本植入
- 解决okhttp的java.lang.IllegalStateException: closed错误
- orm框架有哪些_.net core 基于Dapper 的分库分表开源框架(coredata)
- 统计学习导论(ISLR) 第四章分类算法课后习题
- 编译原理第三章课后题
- 关于Android的ImageView置顶
- Package inputenc Error: Unicode character , (U+FFØC) (inputenc) not set up for use with L aTeX. See
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍...
- linu {,} 使用
- python基础学习的书籍
- 二分图的最大匹配算法
- springboot中使用freemarker生成word循环输出图片(二维码)
热门文章
- Activiti工作流会签与获取下一节点任务信息
- 04-MPI几个基本函数
- 注册表 关闭打印机服务器,Windows 2016 server部署打印机服务器后 重启服务器,出现“重定向的打印机”,如何来删除?...
- Android 系统第三方应用系统修改权限及在应用上层显示权限默认打开
- Lancet子刊:预测婴儿自闭症:进展与挑战
- JAVA衣依服装销售平台计算机毕业设计Mybatis+系统+数据库+调试部署
- 帅某---考研---空间直线绕坐标轴旋转、二次曲面方程
- VUE系列之element表单el-form-item自定义label
- Win10 21H1发布后的首个更新上线 包含大量的修复内容
- 不要小看了互联网智能锁,它正撬动整个多元化居住产品时代!