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 参考手册