高德地图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 ...
随机推荐
- eval() 和 with()
作用域完全由写代码时的函数声明所决定,js有两种机制可以实现”破坏“我们对作用域的常规理解,通过eval()和with(). 1. eval()函数接受字符串为参数,并将其中的声明提升到eval()函 ...
- Build step 'Execute shell' marked build as failure解决
今天jenkins构建时运行脚本报错如下: Build step 'Execute shell' marked build as failure 脚本没问题后来看了下原因是磁盘空间不足导致报错,清除下 ...
- 对话Task
上一篇简单讲解了 线程和线程池以及上下文切换.创建线程代价高昂,默认每个线程都要占用大量虚拟内存1M.更有效的做法使用线程池,重复利用线程.在.NET4.0中引入了TPL任务并行库,你可以在将精力集中 ...
- Android 性能优化-启动时间
adb shell am start -W -n com.xxxx(包名)/xxx.xxxActivity(launch Activity)
- hdfs-03-hdfs客户端操作
1, hdfs中两种连接方式 1), 网页 2), 客户端 文件的切块大小和存储的副本数量,都是由客户端决定! 所谓的由客户端决定,是通过配置参数来定的 hdfs的客户端会读以下两个参数,来决定切块大 ...
- 记一次升级Tomcat
总述 JDK都要出12了,而我们项目使用的jdk却仍然还停留在JDK1.6.为了追寻技术的发展的脚步,我这边准备将项目升级到JDK1.8.而作为一个web项目,我们的容器使用的是Tomcat. ...
- 初识Scala
scala 是 scalable Language 的简写,是一门多范式的编程语言. scala是一种纯面向对象的语言每个值都是对象, 同时支持大量的函数式特性. scala运行于Java虚拟机(JV ...
- 序列化（pickle，shelve，json，configparser）
一,序列化 在我们存储数据或者网络传输数据的时候,需要对我们的对象进行处理,把对象处理成方便存储和传输的数据结构,这个过程叫序列化,不同的序列化,结果也不同,但是目的是一样的,都是为了存储和传输. 在 ...
- H5实现魔方游戏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【WebSocket No.1】实现服务端webSocket连接通讯
前言 现阶段socket通信使用TCP.UDP协议,其中TCP协议相对来说比较安全稳定!本文也是来讲解TCP为主(恕在下学艺不精). 下面是个人理解的tcp/ip进行通讯之间的三次握手! 1.客户端先 ...