高德地图JS API 开发小结
项目中有一块功能要用到高德地图，所以，想把编码小结一下。
首先是地图的初始化
var map = new AMap.Map("mapDiv", {
zoom: 17,//设置地图的缩放比例
center: [112.57, 37.87],//地图中心
resizeEnable: true //是否监控地图容器尺寸变化
});
Map类的其他属性，详见 https://lbs.amap.com/api/javascript-api/reference/map
自定义点标记：
// 自定义点标记显示内容，HTML要素字符串
var markerContent = '<div class="labeledMarkerStyle2">' +
'<span>' +
'<a href="javascript:void(0);">' +
'<table id="tip38521" cellspacing="0" cellpadding="0" border="0">' +
'<tbody>' +
'<tr>' +
'<td class="s1"> </td>' +
'<td class="s2">@(Model.proname)</td>' +
'<td class="s3"> </td>' +
'</tr>' +
'<tr>' +
'<td colspan="3" class="s5"></td>' +
'</tr>' +
'</tbody>' +
'</table>' +
'</a>' +
'</span>' +
'</div>';
//自定义点标记初始化
var marker = new AMap.Marker({
map: map, //要显示该marker的地图对象
position: [112.602951,37.816592],
content: markerContent, //点标记内容
offset: new AMap.Pixel(-13, -30) //点标记显示位置偏移量
});
// 将 markers 添加到地图
map.add(marker);
Marker类其他属性详见：https://lbs.amap.com/api/javascript-api/reference/overlay#marker
自定义信息窗体：
//鼠标点击marker弹出自定义的信息窗体
AMap.event.addListener(marker, 'click', function () {
infoWindow.open(map, marker.getPosition());
});
//信息窗体显示内容
var title = '项目名',
content = [];
content.push('参考价格：<font style="color: #FF6600; font-family: Arial; font-size: 18px; font-weight: bold;">8256元/平方</font><br>');
content.push('销售状态：在售<br>');
content.push('物业类型：小洋房<br>');
content.push('所属区域：迎泽区<br>');
content.push('开盘时间：2017年5月9日<br>');
console.log(content);
cover = [];
cover.push('<a href="/NewHouses/Detail/15" target="_blank"><img src="img" width="166" height="140" border="0"></a>');
linkline = [];
linkline.push('[<a href="/NewHouses/Detail/15" class="D4D4" target="_blank">楼盘详情</a>]');
linkline.push('[<a href="/NewHouses/Detail/15" class="D4D4" target="_blank">周边查询</a>]');
linkline.push('[<a href="/NewHouses/Detail/15" class="D4D4" target="_blank">楼盘快讯</a>]');
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
position: [112.602951,37.816592],
content: createInfoWindow(),
size: new AMap.Size(410, 0),
offset: new AMap.Pixel(320, -280)
});
//构建自定义信息窗体
function createInfoWindow() {
//可以通过下面的方式修改自定义窗体的宽高
//info.style.width = "400px";
// 定义顶部标题
var firstout = document.createElement("div");
firstout.className = "amap-overlays";
var outout = document.createElement("div");
outout.className = "amap-info outout";
var outtop = document.createElement("div");
outtop.className = "outtop";
//外围
var out = document.createElement("div");
out.className = "out";
var out1 = document.createElement("div");
//内围
var nei = document.createElement("div");
nei.className = "amap-info-content amap-info-outer";
nei.style.width = "410px;";
//标题
var titleD = document.createElement("div");
titleD.className = "titleD";
titleD.innerHTML = title;
nei.appendChild(titleD);
//标题下的分割线
var titleline = document.createElement("div");
titleline.className = "titleLine";
nei.appendChild(titleline);
//内容
var middle = document.createElement("div");
middle.className = "content";
middle.innerHTML = content.join("");
nei.appendChild(middle);
//封面
var img = document.createElement("div");
img.className = "img";
img.innerHTML = cover;
nei.appendChild(img);
//底部链接
var link = document.createElement("div");
link.className = "link";
link.innerHTML = linkline;
nei.appendChild(link);
//关闭
var closeX = document.createElement("a");
closeX.className = "amap-info-close";
closeX.id = "close";
closeX.innerHTML = "×";
closeX.onclick = closeInfoWindow;
// 定义底部内容
var bottom = document.createElement("div");
bottom.className = "amap-info-sharp";
bottom.style.height = '23px';
out1.appendChild(nei);
out1.appendChild(closeX);
out1.appendChild(bottom);
out.appendChild(out1);
outout.appendChild(outtop);
outout.appendChild(out);
firstout.appendChild(outout)
return firstout;
}
//关闭信息窗体
function closeInfoWindow() {
map.clearInfoWindow();
}
给多个自定义点标记添加自定义信息窗体：
var markets=[];
$.post("/NewHouses/MapSearchByArea",{area:area},function(data){
var infoWindow = new AMap.InfoWindow({isCustom: true,size: new AMap.Size(410, 0),offset: new AMap.Pixel(320, -280)});
for(var i=0;i<data.length;i++){
if(data[i].coordinate!=""){
var coordinate=data[i].coordinate.split(',');
// 点标记显示内容，HTML要素字符串
var markerContent = '<div class="labeledMarkerStyle2">' +
'<span>' +
'<a href="javascript:void(0);">' +
'<table id="tip38521" cellspacing="0" cellpadding="0" border="0">' +
'<tbody>' +
'<tr>' +
'<td class="s1"> </td>' +
'<td class="s2">'+data[i].proname+'</td>' +
'<td class="s3"> </td>' +
'</tr>' +
'<tr>' +
'<td colspan="3" class="s5"></td>' +
'</tr>' +
'</tbody>' +
'</table>' +
'</a>' +
'</span>' +
'</div>';
var marker1 = new AMap.Marker({
map: map,
position: [coordinate[0],coordinate[1]],
// 将 html 传给 content
content: markerContent,
// 以 icon 的 [center bottom] 为原点
offset: new AMap.Pixel(-13, -30),
extData:data[i].id+"|"+data[i].proname+"|"+data[i].pricec+"|"+data[i].sales_status+"|"+data[i].property_type+"|"+data[i].area+"|"+data[i].kptime+"|"+data[i].sales_tel+"|"+data[i].img+"|"+data[i].coordinate,
});
markets.push(marker1);
marker1.on('click', markerClick);
}
}
function markerClick(e) {
infoWindow.setContent(createInfoWindow($(e)));
infoWindow.open(map, e.target.getPosition());
}
map.setFitView();
//构建自定义信息窗体
function createInfoWindow(e) {
//console.log(e);
var pro=e[0].target.getExtData().split('|');
//实例化信息窗体
var title = pro[1],
content = [];
content.push('参考价格：<font style="color: #FF6600; font-family: Arial; font-size: 18px; font-weight: bold;">'+pro[2]+'</font><br>');
content.push('销售状态：'+pro[3]+'<br>');
content.push('物业类型：'+pro[4]+'<br>');
content.push('所属区域：'+pro[5]+'<br>');
content.push('开盘时间：'+pro[6]+'<br>');
content.push('销售电话：<font style="color: #FF6600; font-family: Arial; font-size: 16px; font-weight: bold;">'+pro[7]+'</font>');
cover = [];
cover.push('<a href="/NewHouses/Detail/'+pro[0]+'" target="_blank"><img src="'+pro[8]+'" width="166" height="140" border="0"></a>');
linkline = [];
linkline.push('[<a href="/NewHouses/Detail/'+pro[0]+'" class="D4D4" target="_blank">楼盘详情</a>]');
linkline.push('[<a href="/NewHouses/Detail/'+pro[0]+'#dt" class="D4D4" target="_blank">周边查询</a>]');
linkline.push('[<a href="/NewHouses/Detail/'+pro[0]+'" class="D4D4" target="_blank">楼盘快讯</a>]');
var coor=pro[9].split(",");
//可以通过下面的方式修改自定义窗体的宽高
//info.style.width = "400px";
// 定义顶部标题
var firstout = document.createElement("div");
firstout.className = "amap-overlays";
var outout = document.createElement("div");
outout.className = "amap-info outout";
var outtop = document.createElement("div");
outtop.className = "outtop";
//外围
var out = document.createElement("div");
out.className = "out";
var out1 = document.createElement("div");
//内围
var nei = document.createElement("div");
nei.className = "amap-info-content amap-info-outer";
nei.style.width = "410px;";
//标题
var titleD = document.createElement("div");
titleD.className = "titleD";
titleD.innerHTML = title;
nei.appendChild(titleD);
//标题下的分割线
var titleline = document.createElement("div");
titleline.className = "titleLine";
nei.appendChild(titleline);
//内容
var middle = document.createElement("div");
middle.className = "content";
middle.innerHTML = content.join("");
nei.appendChild(middle);
//封面
var img = document.createElement("div");
img.className = "img";
img.innerHTML = cover;
nei.appendChild(img);
//底部链接
var link = document.createElement("div");
link.className = "link";
link.innerHTML = linkline;
nei.appendChild(link);
//关闭
var closeX = document.createElement("a");
closeX.className = "amap-info-close";
closeX.id = "close";
closeX.innerHTML = "×";
closeX.onclick = closeInfoWindow;
// 定义底部内容
var bottom = document.createElement("div");
bottom.className = "amap-info-sharp";
bottom.style.height = '23px';
out1.appendChild(nei);
out1.appendChild(closeX);
out1.appendChild(bottom);
out.appendChild(out1);
outout.appendChild(outtop);
outout.appendChild(out);
firstout.appendChild(outout)
return firstout;
}
//关闭信息窗体
function closeInfoWindow() {
map.clearInfoWindow();
}
})
高德地图JS API 开发小结的更多相关文章
- 高德地图 js api 使用
使用高德地图js api 制作网页上的地图应用. 1.先申请一个 开发者用的 key . 2. 在页面中引入高德提供的地图js <script src="http://webapi. ...
- 高德地图JavaScript API开发研究
高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口,可以通过各种API接口向地图添加内容,创建功能丰富.交互性强的地图应用.高德地图JavaScript API ...
- 高德地图 JavaScript API 开发系列教程（二）
上节简单介绍高德地图JavaScript API及网页中基本地图展示.有了地图后我们可以用来做什么?有人说离我最近的超市在哪里,我怎么去?别急,这些功能我们后面都会慢慢实现.今天为大家详细讲解如何在地 ...
- 高德地图 JavaScript API 开发系列教程（一）
高德地图 API 提供包括 Web API 即 JavaScript API,Android API,定位API,IOS API,WP API,Win8 API等,本系列教程主要针对高德 JavaSc ...
- 高德地图 JS API - 根据地名实现标记定位
德地图 JS API 使用前的准备工作请参考官方网站说明: https://lbs.amap.com/api/javascript-api/guide/abc/prepare 根据地名实现地图标记定位 ...
- 高德地图 JS API - 根据经纬度获取周边建筑地标
像我们经常用的微信或微博,发表动态时都有选择位置的功能,根据当前的定位获取附近的地标.利用高德地图我们就可以实现这样的功能. 1. 具体代码: // 高德地图查询周边 function aMapSea ...
- 百度地图 JS API开发Demo01
百度地图DEMO <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- 高德地图JS API获取经纬度，根据经纬度获取城市
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 高德地图 JS API (jsp + miniui(子页面数据返回父页面并设值) + 单个点标记 + 点标记经纬度 + 回显 + 限制地图显示范围+搜索)
-*- 父页面js function mapFocus(){ //console.log("-*-"); var longitude = mini.get("jd&qu ...
随机推荐
- python lxml库生成xml文件-节点命名空间问题
lxml库,处理xml很强大,官方文档:https://lxml.de/tutorial.html#namespaces 例如: 我们要生成如下格式的报文: <ttt:jesson xmlns: ...
- A Painless Q-learning Tutorial (一个 Q-learning 算法的简明教程)
本文是对 http://mnemstudio.org/path-finding-q-learning-tutorial.htm 的翻译,共分两部分,第一部分为中文翻译,第二部分为英文原文.翻译 ...
- 关于微信JS SDK接口wx.previewImage预览接口的使用
然后后之前的项目,突然往微信上迁移了,一些微信的接口没怎么用过,比较陌生,这次的功能是想调用微信的接口,实现图片放大的功能, 就找到官方文档:http://qydev.weixin.qq.com/wi ...
- Spring Cloud Eureka 服务注册列表显示 IP 配置问题
服务提供者向 Eureka 注册中心注册,默认以 hostname 的形式显示,Eureka 服务页面显示的服务是机器名:端口,并不是IP+端口的形式 ,可以通过修改服务提供者配置自己的 IP 地址, ...
- 理解express中的中间件
express是轻量灵活的node.js Web应用框架”.它可以帮助你快速搭建web应用.express是一个自身功能极简,完全是由**路由**和**中间件**构成的一个web开发框架,本质上说,一 ...
- .NET 线程池编程技术
摘要 深度探索 Microsoft .NET提供的线程池, 揭示什么情况下你需要用线程池以及 .NET框架下的线程池是如何实现的,并告诉你如何去使用线程池. 内容 介绍 .NET中的线程池 线程池中执 ...
- 【学习笔记】深入理解HTTP协议
参考:关于HTTP协议,一篇就够了,感谢作者认真细致的总结,本文在理解的基础上修改了内容,加深印象的同时也希望对大家有所帮助 HTTP是什么? HTTP协议是Hyper Text Transfer P ...
- R语言实战（三）——模拟随机游走数据
一.模拟随机游走数据示例 x <- matrix(0,1000,1) for(i in 1:1000){ x[i+1] <- x[i]+rnorm(1) } plot(x,type=&qu ...
- win10 uwp 渲染原理 DirectComposition 渲染
本文来告诉大家一个新的技术DirectComposition,在 win7 之后(实际上是 vista),微软正在考虑一个新的渲染机制 在 Windows Vista 就引入了一个服务,桌面窗口管理器 ...
- 【Linux】Centos之安装Nginx及注意事项
相关内容链接 [Linux]nginx常用命令 [nginx]详细配置说明 1.Nginx的简单说明 a. Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务 ...