高德地图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中操作mysql的pymysql模块详解
原文:https://www.cnblogs.com/wt11/p/6141225.html https://shockerli.net/post/python3-pymysql/----Python ...
- css回归测试工具：backstopjs
最近在看公开课,一位老师讲了一个自动化的工具,backstopjs,可以自动的对比UI出的图与前端写好的图,不一致的地方会标出,挺好用的,但是写的过程中也会遇到一些问题,现在写出来,记录一下 首先,要 ...
- QC内部分享ppt
Quality Center是一个基于Web的测试管理工具,可以组织和管理应用程序测试流程的所有阶段,包括制定测试需求.计划测试.执行测试和跟踪缺陷.此外,通过Quality Center还可以创建报 ...
- Android Systom
- 如何在GooglePlay上面发布应用
上传和发布应用 注册开发者帐户后,您便可使用 Google Play 开发者控制台将应用上传到 Google Play. 访问 Google Play 开发者控制台. 点击屏幕顶部附近的添加新用户. ...
- Kafka项目实战－用户日志上报实时统计之编码实践
1.概述 本课程的视频教程地址:<Kafka实战项目之编码实践> 该课程我以用户实时上报日志案例为基础,带着大家去完成各个KPI的编码工作,实现生产模块.消费模块,数据持久化,以及应用调 ...
- Linux 定时任务 crontab 和 Systemd Timer
一.说说八卦 说到定时任务,我们常用的就是 crond 服务,但是我们不知道还有另外一种定时方式,那就是 systemd,我们常用 systemd 来管理我们的服务,但是我们却不知道,我们还可以通 ...
- Ubuntu14.04 编译 Android 5.1.1源码（采用国内镜像）
欢迎转载,转载请注明出处: http://www.cnblogs.com/lanrenxinxin/p/5424554.html 之前就有编译android源码的想法,但是由于有GFW的存在,又没有梯 ...
- Xdebug在PHP中的安装配置
Xdebug在PHP中的安装配置涉及php.ini配置文件的修改. 1 首先需要下载Xdebug,根据安装的PHP版本,选择合适的Xdebug版本, 2 安装Xdebug将下载的php_xdebu ...
- 动手实现react Modal组件
Modal组件 长话不多说,接下来让我们来动手实现一个react Modal组件. 我们先来看一下实际效果 Modal的布局 首先,让我们先思考下一个Modal组件的布局是怎么样的. 我们先拿一个基本 ...