function genInfoWindowHtml(marker, html, result) {
localResult.curResult = result;
localResult.marker = marker;
var dom = $n("div");
//----第一部分信息开始
/*
获得去"地图主页上查看更多信息"的连接,
例如http://ditu.google.cn/maps?hl=zh-CN&ie=UTF8&sll=23.117001,113.25&sspn=0.6315057727506781,0.8789062500000033&f=q&q=%E5%A4%A9%E6%B4%A5%E5%8C%85%E5%AD%90%E9%93%BA
*/
var link = getDituUrl() + "&f=q&q=" + encodeURIComponent(result.titleNoFormatting);
var ll = marker.getPoint().lat() + "," + marker.getPoint().lng();
var zoom = map.getZoom() > 13 ? 10 : 15;
/*
获得静态图片,即用户在标注点窗口上所看到的图中图的效果.其实是一个连接,
例如:http://ditu.google.cn/staticmap?center=23.204621,113.275984&zoom=15&size=100x67&markers=23.204621,113.275984,red&key=ABQIAAAA91OZMiOe8VfhdtstxQrBBxTqQ5WtUwE0C8FR1hRk-yj3qFOmhhToKuCkHwzulUTwzU6LJb92tmbOKA
*/
var staticUrl = "http://ditu.google.cn/staticmap?center=" + ll + "&zoom=" + zoom + "&size=100x67&markers=" + ll + ",red&key=" + apiKey;
//开始显示信息窗口的标题
var html = "<div style=\"width:220px;\">" + "<p class=\"info-title\">" + result.titleNoFormatting + "</p>" + "<p style=\"width:95%;text-align:right;\">";
//添加信息窗口的图中图及去主页查看信息的连接,同时添加onclick事件.
html += "<a href=\"" + link + "\" target=\"_blank\">\u53bb\u5730\u56fe\u4e3b\u9875\u67e5\u770b\u66f4\u591a\u4fe1\u606f</a></p>" + "<div class=\"info-paragraph\">" + "<p style=\"float:right;height:67px;width:100px;\"><img style=\"border:solid #0000CC 1px;cursor:pointer;height:67px;width:100px;\" src=\"" + staticUrl + "\" onclick=\"magnifyMap()\"/><br/>" + "</p>";
//添加信息窗口的地址信息
if (result.streetAddress) {
html += "<p style=\"width:110px;\"><span>\u5730\u5740\uff1a</span></p>" + "<p style=\"width:100px;padding-left:1em;\">" + result.streetAddress + "</p>";
}
//添加信息窗口的电话信息
if (result.phoneNumbers) {
html += "<p style=\"width:110px;\"><span>\u7535\u8bdd\uff1a</span></p>" + "<p style=\"width:100px;padding-left:1em;\">" + result.phoneNumbers[0].number + "</p>";
}
html += "</div>";
//----第一部分信息结束
//----第二部分信息开始
html += "<div class=\"info-paragraph\">" +
//添加三个tab
"<div class=\"tab-head\">" +
//在附近搜索,添加onclick,onmouseout,onmouseover事件
"<p class=\"tab-item active-tab\" id=\"near_tab\" onclick=\"onInfoTabClick('near');\" onmouseout=\"this.style.textDecoration='none'\" onmouseover=\"onInfoTabMouseover(this)\">\u5728\u9644\u8fd1\u641c\u7d22</p>" +
//驾车路线
"<p class=\"tab-item\" id=\"route_tab\" onclick=\"onInfoTabClick('route');\" onmouseout=\"this.style.textDecoration='none'\" onmouseover=\"onInfoTabMouseover(this)\">\u9a7e\u8f66\u8def\u7ebf</p>" +
//公交路线
"<p class=\"tab-item\" id=\"transit_tab\" onclick=\"onInfoTabClick('transit');\" onmouseout=\"this.style.textDecoration='none'\" onmouseover=\"onInfoTabMouseover(this)\">\u516c\u4ea4\u8def\u7ebf</p>" +
"</div>" +
//在附近搜索
"<div id=\"near_cnt\" class=\"tab-content\" style=\"display:block;\">" + "<p class=\"info-tip\"><span>\u4f8b\u5982\uff1a\u4e1c\u57ce\u533a \u4e66\u5e97</span></p>" +
//在附近搜索-搜索内容输入框
"<input type=\"text\" id=\"near_input\" style=\"width:75%\" class=\"gsc-input\" onkeydown=\"inputonkeydown(this, event)\"/>"+
//在附近搜索-搜索按钮
"<input type=\"button\" class=\"info-button gsc-search-button\" value=\"\u641c\u7d22\" onclick=\"getNear();\"/>" +
"</div>" +
//驾车路线
"<div id=\"route_cnt\" class=\"tab-content\" >" +
"<p class=\"info-tip\">" +
//驾车路线-输入目出发点
"<input type=\"radio\" name=\"route\" id=\"routeFrom\" checked=\"checked\"/>\u8f93\u5165\u76ee\u7684\u5730 " +
//车路线-输入目的地
"<input type=\"radio\" name=\"route\" id=\"routeTo\"/>\u8f93\u5165\u51fa\u53d1\u70b9 </p>" +
//驾车路线-搜索内容输入框
"<input type=\"text\" id=\"route_input\" style=\"width:75%\" class=\"gsc-input\" onkeydown=\"inputonkeydown(this, event)\"/>"+
//驾车路线-搜索按钮
"<input type=\"button\" class=\"info-button gsc-search-button\" value=\"\u641c\u7d22\" onclick=\"getRoute();\"/>" +
//驾车路线-错误或无结果的提示,例如"去谷歌地图主页试试"
"<p id=\"routeErrMsg\" style=\"display:none;color:#ff0000;margin-top:2px;\">\u6ca1\u6709\u627e\u5230\u6709\u6548\u7ed3\u679c\uff0c<a href=\"\" id=\"moreRouteLink\" target=\"_blank\">\u53bb\u8c37\u6b4c\u5730\u56fe\u4e3b\u9875\u8bd5\u8bd5</a></p>" +
"</div>" +
//公交路线
"<div id=\"transit_cnt\" class=\"tab-content\">" + "<p class=\"info-tip\">" +
//公交路线-输入目出发点
"<input type=\"radio\" name=\"transit\" id=\"transitFrom\" checked=\"checked\"/>\u8f93\u5165\u76ee\u7684\u5730 " +
//公交路线-输入目的地
"<input type=\"radio\" name=\"transit\" id=\"transitTo\"/>\u8f93\u5165\u51fa\u53d1\u70b9 </p>" +
//公交路线-搜索内容输入框
"<input type=\"text\" id=\"transit_input\" style=\"width:52%\" class=\"gsc-input\" onkeydown=\"inputonkeydown(this, event)\"/>" +
//公交路线--搜索连接
" <a class=\"info-button gsc-search-button\" style=\"border:none;\" href=\"javascript:getTransit();\">\u53bb\u5730\u56fe\u4e3b\u9875\u641c\u7d22</a>" +
"</div>" +
"</div>";
dom.innerHTML = html;
//----第二部分信息结束
return dom;
}
//获取"更多结果"的超级连接
function getDituUrl() {
//获得地图中心点
var center = map.getCenter();
//返回 GLatLng,其坐标表示此矩形的大小。
var span = map.getBounds().toSpan();
//获得地图中心点的坐标
var ll = center.lat() + "," + center.lng();
//获得当前可视矩形的大小
var spn = span.lat() + "," + span.lng();
//设置查询中心点以及查询范围
return "http://ditu.google.cn/maps?hl=zh-CN&ie=UTF8&sll=" + ll + "&sspn=" + spn;
}
//图中图的onclick事件
function magnifyMap(){
var zoom = map.getZoom() > 13 ? 10 : 15;
map.setCenter(localResult.marker.getPoint(), zoom);
map.updateInfoWindow();
}
//在各个tab之间进行切换时的click事件
function onInfoTabClick (key){
//该tab置为活动
$(key + "_tab").className = "tab-item active-tab";
//该tab可见
$(key + "_cnt").style.display = "block";
//该tab下面的搜索框获得焦点
$(key + "_input").focus();
//将其它的tab暂时设置为非活动,其内容不显示
for (var i in infoTabKeys) {
if (infoTabKeys[i] != key) {
//非活动
$(infoTabKeys[i] + "_tab").className = "tab-item";
//其内容不显示
$(infoTabKeys[i] + "_cnt").style.display = "none";
}
}
//调用地图自动更新窗口内容的方法
map.updateInfoWindow();
}
//当鼠标经过tab时,将文字加上下画线
function onInfoTabMouseover(elem) {
//只处理非活动的tab
if (elem.className && elem.className.indexOf("active-tab") == -1) {
//将文字加上下画线
elem.style.textDecoration = "underline";
}
}
//回车进行搜索
function inputonkeydown(elem, e) {
e = e || window.event;
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
var keyCode = e.keyCode || e.which || e.charCode;
//只有在用户回车时进行搜索
if (keyCode == 13) {
if (elem.id == "route_input") {
getRoute();
} else {
if (elem.id == "near_input") {
getNear();
} else {
if (elem.id == "transit_input") {
getTransit();
}
}
}
}
}
没有合适的资源?快使用搜索试试~ 我知道了~
google.rar_initmap.js
共28个文件
png:17个
js:7个
gif:1个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 169 浏览量
2022-09-14
18:18:31
上传
评论
收藏 73KB RAR 举报
温馨提示
一个简单的googlemap查询实例,很不错的,可以参考
资源推荐
资源详情
资源评论
收起资源包目录
google.rar (28个子文件)
地图浏览
marker.js 8KB
Default.aspx 4KB
transit.js 552B
Img
bluebutton_Traffic.png 2KB
bluebutton_Traffic_down.png 2KB
bluebutton_Hybrid_down.png 2KB
loading_circle.gif 2KB
bluemarker_multiple.png 3KB
bluemarker_home.png 2KB
bluebutton_Satellite.png 3KB
bluebutton_Map_down.png 2KB
bluebutton_bg.png 408B
bluebutton_locate.png 2KB
blueinfowindow.png 2KB
bluezoom_out.png 785B
bluestore_logo.png 27KB
bluebutton_Map.png 2KB
bluebutton_Satellite_down.png 2KB
bluemarker.png 2KB
bluebutton_Hybrid.png 2KB
bluezoom_in.png 2KB
initMap.js 3KB
traffic.js 2KB
App_Data
route.js 3KB
nearsearch.js 324B
loadsearch.js 3KB
web.config 8KB
Default.aspx.cs 356B
共 28 条
- 1
资源评论
小贝德罗
- 粉丝: 71
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功