高德地图API使用
1、根据地址找经纬度/修改经纬度
marker.setPosition(result.geocodes[0].location);
map.setCenter(marker.getPosition())
2、根据经纬度找地址
3、 根据当前IP获取城市
function initLocationCity() { //实例化城市查询类
var citysearch = new AMap.CitySearch();
//自动获取用户IP,返回当前城市
citysearch.getLocalCity(function (status, result) {
if (status === 'complete' && result.info === 'OK') {
if (result && result.city && result.bounds) {
var cityinfo = result.city;
var citybounds = result.bounds;
document.getElementById('txtCity').value = cityinfo;
var ipCity = cityinfo.replace("市", "");
$(".cityList ul a").each(function () {
if ($(this).text().indexOf(ipCity) != -) {
$("#hidShopAreaId").val($(this).attr("data-content"));
loadCityXY();
searchShopList();
}
}); //地图显示当前城市
mapObj.setBounds(citybounds);
}
} else {
document.getElementById('txtCity').value = result.info;
}
});
}
4、
$.ajaxRequest({
url: "接口路径",
onRequest: function (param) {
参数
},
onResponse: function (result) {
mapObj.clearMap();
$(result).each(function (i) { marker = new AMap.Marker({
position: [item.Longitude, item.Latitude],
icon: new AMap.Icon({
size: new AMap.Size(, ),
image: "/Static/Web/Images/Shop/markerIcon.png", // 覆盖标注的图标
imageOffset: new AMap.Pixel(, ) //相对于大图的取图位置 })
});
marker.setLabel({ // 设置数字
offset: new AMap.Pixel(, ),
content: (parseInt(i) + )
}); marker.on('click', function () {
// 点击当前标注,清除在这之前已生成过的覆盖标注,定义不同的overMark避免和marker冲突 if (overMarker) {
mapObj.remove(overMarker);
}; overMarker = new AMap.Marker({ //添加自定义点标记
map: mapObj,
position: [item.Longitude, item.Latitude], //基点位置
offset: new AMap.Pixel(-, -), //相对于基点的偏移位置
zIndex: ,
content: '覆盖内容’ //自定义点标记覆盖物内容
});
overMarker.setMap(mapObj);
mapObj.setZoomAndCenter(, [item.Longitude, item.Latitude]);// 定位后再缩放 });
marker.setMap(mapObj); }); mapObj.setFitView();
return result;
} });
5、循环遍历标注并自定义infoWindow窗口(自定义点标注,缩放地图比例,给标注添加点击事件并更改标注图标) 5、添加新标注,修改标注(覆盖物)
添加新标注:
marker = new AMap.Marker({
icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: [116.41, 39.91]
});
marker.setMap(map);
覆盖物:会替换掉原来的标注
function updateMarker() {
// 自定义点标记内容
var markerContent = document.createElement("div"); // 点标记中的图标
var markerImg = document.createElement("img");
markerImg.className = "markerlnglat";
markerImg.src = "http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png";
markerContent.appendChild(markerImg); // 点标记中的文本
var markerSpan = document.createElement("span");
markerSpan.className = 'marker';
markerSpan.innerHTML = "Hi,我换新装备啦!";
markerContent.appendChild(markerSpan); marker.setContent(markerContent); //更新点标记内容
marker.setPosition([116.39, 39.93]); //更新点标记位置
}
6、根据经纬度初始化地图,并且要让地图比例放大
解决方法:
在定位完成map.setFitView();方法后设置 map.setZoomAndCenter(28, [Y,X]);// 缩放比例,经度 纬度 即可
高德地图API使用的更多相关文章
- 高德地图api实现地址和经纬度的转换(python)
利用高德地图web服务api实现地理/逆地址编码 api使用具体方法请查看官方文档 文档网址:http://lbs.amap.com/api/webservice/guide/api/georegeo ...
- 高德地图API应用
高德地图官网:http://api.amap.com/javascript/ 输入关键字,搜索地址功能的网页: 1.引用远程Map Api(js)网址形式(注册后获取) 2.定义个<div> ...
- 【高德地图API】如何解决坐标转换,坐标偏移?
http://bbs.amap.com/thread-18617-1-1.html#rd?sukey=cbbc36a2500a2e6c2b0b19115118ace519002ff3a52731f13 ...
- android 高德地图API 之 java.lang.UnsatisfiedLinkError: Couldn't load amapv3: findLibrary returned null错误
错误场景: 运行android app时,在运行到调用高德地图API时,出现 “java.lang.UnsatisfiedLinkError: Couldn't load amapv3: findLi ...
- 高德地图API
这周计划: 周一 早上 (高德地图API) 中午写(IFE PART ONE) 下午(高德地图API) 下班(IFE PART ONE)
- 【高德地图API】汇润做爱地图技术大揭秘
原文:[高德地图API]汇润做爱地图技术大揭秘 昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...
- 【高德地图API】一句话搞定webmap(一)——轻地图组件
原文:[高德地图API]一句话搞定webmap(一)——轻地图组件 摘要: 遥想当年,在APP中加入LBS元素相当困难:要刻苦学习java,要刻苦学习iOS开发,要刻苦学习javascript…… 而 ...
- 【高德地图API】从零开始学高德JS API(七)——定位方式大揭秘
原文:[高德地图API]从零开始学高德JS API(七)——定位方式大揭秘 摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为w ...
- 【高德地图API】从零开始学高德JS API(八)——地址解析与逆地址解析
原文:[高德地图API]从零开始学高德JS API(八)——地址解析与逆地址解析 摘要:无论是百度LBS开放平台,还是高德LBS开放平台,其调用量最高的接口,必然是定位,其次就是地址解析了,又称为地理 ...
- 【高德地图API】从零开始学高德JS API(六)——坐标转换
原文:[高德地图API]从零开始学高德JS API(六)——坐标转换 摘要:如何从GPS转到谷歌?如何从百度转到高德?这些都是小case.我们还提供,如何将基站cell_id转换为GPS坐标? --- ...
随机推荐
- strults2标签s:set的用法
struts2标签<s:set></s:set>的用法.原理 http://liuna718-163-com.iteye.com/blog/1124654 我的例子: ...
- 记一起和前端没什么卵关系的OPTION 405问题
记一起和前端没什么卵关系的后端405问题 问题的关键点在于本来是POST请求,会变成OPTION请求,并且提示405报错,会类似跨域.并且只有某些手机机型才会(如Oppo系列). 其实跨域的问题,如果 ...
- 美团HD(9)-监听点击城市
DJSelectCityViewController.h // 点击城市发出通知 - (void)tableView:(UITableView *)tableView didSelectRowAtIn ...
- 206. Reverse Linked List【easy】
206. Reverse Linked List[easy] Reverse a singly linked list. Hint: A linked list can be reversed eit ...
- C++ Primer(第五版)读书笔记 & 习题解答 --- Chapter 3
Chapter 3.1 1. using声明具有如下的形式: using namespace::name; Chapter 3.2 1. C++标准一方面对库类型所提供的操作做了规定,另一方面也对库的 ...
- python简单处理xml文件
Python若是想从xml里读点信息,用BeautifulSoup可能会容易一点,但是如果要修改xml,BeatifulSoup就搞不定了,其实直接用lxml就好. from lxml import ...
- JPA动态查询封装
一.定义一个查询条件容器 /** * 定义一个查询条件容器 * * @param <T> */ public class Criteria<T> implements Spec ...
- Python tkinter 用键盘移动没反映修改代码
from tkinter import * def movetriangle(event): if event.keysym == 'Up': canvas.move(a1 ...
- sql server case when then
http://blog.csdn.net/wuxiaokaixinguo/article/details/8895187
- Linux & windows 应用服务器&Oracle数据库服务器备份
Linux篇 tomcat启动加入开机启动项 vi /etc/rc.d/rc.local service iptables stop /usr/local/tomcat/bgyappserv01/ ...