高德地图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 ...
随机推荐
- iOS之Settings.Bundle的应用
Settings.Bundle Settings.Bundle支持六种配置项分别是:Title,MultiValue,Group,Slider,ToggleSwitch,TextField . Tit ...
- 测试工具之Match Tracer（正则表达式匹配工具）
这个工具完全界面化,非常好用,如果对自己写的正则表达式不够确定,可以使用这个软件来试水一下 从下面网址可以下载: http://www.regexlab.com/zh/mtracer/download ...
- web自动化测试---概述
最早的时候是做功能测试,web都是自己手工点击看看有没问题,没有系统的进行测试,更别说自动化测试了,那是一段不堪回首的往事,就是因为这,很多问题都流出去了,这是作为测试人员的一大失职,痛定思痛,开始学 ...
- logstash grok 内置正则
参考地址:https://github.com/elastic/logstash/blob/v1.4.2/patterns/grok-patterns USERNAME [a-zA-Z0-9._-]+ ...
- logrotate实现Mysql慢日志分割
MySQL慢日志? MySQL的慢查询日志是MySQL提供的一种日志记录,它用来记录在MySQL中响应时间超过阀值的语句,具体指运行时间超过long_query_time值的SQL,则会被记录到慢查询 ...
- 接口自动化思路_JAVA
写在开头: 技术渣做接口自动化,大神们请轻喷!多提提优化方案和问题点. 以前做接口测试一直通过postman 和 soapUI来做,Postman 是Chrome的一个插件Case多了不好管理,同时执 ...
- 等宽高的ImageButton
@SuppressLint("AppCompatCustomView") public class SquareImageButton extends ImageButton { ...
- AWS DevOps – 配合Jenkins和CodeDeploy实现代码自动化部署
AWS DevOps – 配合Jenkins和CodeDeploy实现代码自动化部署 Amazon ElastiCache 连接至 Redis 节点 通过 AWS Command Line Inter ...
- Lucene 7.2.1 自定义TokenFilter
1.自定义TokenFilter import org.apache.lucene.analysis.TokenFilter; import org.apache.lucene.analysis.To ...
- js常用面试题整理
1.array操作关键字: pop() 删除最后一个:push最后添加一个或者多个:reverse颠倒数组:shift删除第一个元素:unshift首部添加元素:concat衔接两个数组:join把数 ...