Notes
Notes - notes.io |
http://maps.google.com.tw/maps?hl=zh-TW&tab=wl
<! DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv ="content-type" content ="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
@import url("http://img1.cache.netease.com/cnews/css07/style.css");
@import url("http://img1.cache.netease.com/cnews/img09/channel_nav.css");
@import url("http://xf.house.163.com/product/css/ydmap.css");
</style>
<script type="text/javascript" src ="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var lat=23.1257424 ;
var lng=113.37404225 ;
function initialize() {
var mapDiv=document.getElementById('map-canvas');
map=new google.maps.Map(mapDiv, {
center:new google.maps.LatLng(lat,lng),
zoom:15 ,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker=new customMarker(map.getCenter(), map);
google.maps.event.addListener(marker, "click", function (e) {
var infoBox=new InfoBox({
latlng: marker.getPosition(),
map: map
});
});
}
function customMarker(latlng,map) {
this.latlng_=latlng;
this.setMap(map);
}
// 扩展自OverlayView；OverlayView扩展自MVCObject，实际上也扩展自MVCObject
customMarker.prototype=new google.maps.OverlayView();
customMarker.prototype.draw=function () {
var me=this ;
var div=this.div_;
if ( ! div) {
div=this.div_=document.createElement('DIV');
div.style.position="absolute";
div.innerHTML="<span><img src='http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/examples/images/house.png'/></span>";
// 这个div的对象需要Listener事件，必须先用trigger（me）先进行侦听
google.maps.event.addDomListener(div, "click", function (event) {
google.maps.event.trigger(me, "click");
});
var panes=this.getPanes();
panes.overlayImage.appendChild(div);
}
// 计算存放可拖动地图的 DOM 元素中指定地理位置的像素坐标
var point=this.getProjection().fromLatLngToDivPixel( this.latlng_);
// div的像素坐标
if (point) {
div.style.left=point.x+'px';
div.style.top=point.y+'px';
}
};
customMarker.prototype.remove=function () {
if ( this.div_) {
this.div_.parentNode.removeChild( this.div_);
this.div_=null ;
}
};
// 获取Position
customMarker.prototype.getPosition=function () {
return this.latlng_;
};
/* ********************************************************************************************************************************************************
* InfoBox==楼盘icon点击后弹出的box窗口，继承OverlayView，
*/
function InfoBox(opts) {
google.maps.OverlayView.call( this );
this.latlng_=opts.latlng;
this.map_=opts.map;
this.offsetVertical_=- 260 ;
this.offsetHorizontal_=- 450 ;
// div偏移的像素
this.height_=260 ;
this.width_=460 ;
var me=this ;
// 监听bounds
this.boundsChangedListener_=google.maps.event.addListener( this.map_,
"bounds_changed", function () {
return me.panMap.apply(me);
});
this.setMap( this.map_);
}
InfoBox.prototype=new google.maps.OverlayView();
// 移除div
InfoBox.prototype.remove=function () {
if ( this.div_) {
this.div_.parentNode.removeChild( this.div_);
this.div_=null ;
}
};
InfoBox.prototype.draw=function () {
// 创建element
this.createElement();
if ( ! this.div_)
return ;
var pixPosition=this.getProjection().fromLatLngToDivPixel( this.latlng_);
if ( ! pixPosition)
return ;
// top,left减去width，height达到右下角对齐的效果
this.div_.style.width=this.width_+"px";
this.div_.style.left=(pixPosition.x+ this.offsetHorizontal_ ) +"px";
this.div_.style.height=this.height_+"px";
this.div_.style.top=(pixPosition.y+ this.offsetVertical_ ) +"px";
this.div_.style.display='block';
};
InfoBox.prototype.createElement=function () {
// 返回可在其中显示此 OverlayView 的窗格。仅在调用 draw 函数后才可用。
var panes=this.getPanes();
var div=this.div_;
if ( ! div) {
div=this.div_=document.createElement("div");
var content=document.getElementById("houseInfoBox_template").value;
div.style.border="0px none";
div.style.position="absolute";
div.innerHTML=content;
panes.floatPane.appendChild(div);
this.panMap();
} else if (div.parentNode !=panes.floatPane) {
// 如果panes发生变化，移除此div
div.parentNode.removeChild(div);
panes.floatPane.appendChild(div);
} else {
}
}
/*
* 对InfoBox的pan进行调整，调整到居中值减去偏移值，控制infobox的位置
*/
InfoBox.prototype.panMap=function () {
var map=this.map_;
// 返回当前视口的纬度/经度范围。如果还未启动地图（即 mapType 仍为 Null），或者没有设置中心和缩放，则结果为 Null。
var bounds=map.getBounds();
if (!bounds)
return ;
// InfoBox的位置
var position=this.latlng_;
// InfoBox的尺寸
var iwWidth=this.width_;
var iwHeight=this.height_;
// infobox位置和尺寸的抵消
var iwOffsetX=this.offsetHorizontal_;
var iwOffsetY=this.offsetVertical_;
var padX=40 ;
var padY=40 ;
// 像素的计算
var mapDiv=map.getDiv();
var mapWidth=mapDiv.offsetWidth;
var mapHeight=mapDiv.offsetHeight;
var boundsSpan=bounds.toSpan(); // //将指定的地图范围转换为纬度/经度跨度。
var longSpan=boundsSpan.lng(); //
var latSpan=boundsSpan.lat(); // 纬度的地图跨度
var degPixelX=longSpan / mapWidth;
var degPixelY=latSpan / mapHeight;
// 地图界面跳动的定位
var mapWestLng=bounds.getSouthWest().lng();
var mapEastLng=bounds.getNorthEast().lng();
var mapNorthLat=bounds.getNorthEast().lat();
var mapSouthLat=bounds.getSouthWest().lat();
// infowindow的bounds
var iwWestLng=position.lng()+(iwOffsetX-padX)*degPixelX;
var iwEastLng=position.lng()+(iwOffsetX+iwWidth+padX)*degPixelX;
var iwNorthLat=position.lat()-(iwOffsetY -padY)*degPixelY;
var iwSouthLat=position.lat()-(iwOffsetY+iwHeight+padY)*degPixelY;
// 向居中的偏移计算
var shiftLng=(iwWestLng<mapWestLng?mapWestLng-iwWestLng:0) ;
var shiftLat=(iwNorthLat>mapNorthLat?mapNorthLat-iwNorthLat:0) ;
// 居中值
var center=map.getCenter();
// 居中值减去偏移值，得到infobox的位置
var centerX=center.lng()-shiftLng;
var centerY=center.lat()-shiftLat;
// ***********************************************************
// 重新确定并显示楼盘为地图的中心点 ps：此处取消重新定位
map.setCenter(new google.maps.LatLng(centerY,centerX));
// ***********************************************************
// 移除上面bounds监听值“this.boundsChangedListener_”
google.maps.event.removeListener(this.boundsChangedListener_);
this.boundsChangedListener_=null ;
};
google.maps.event.addDomListener(window,'load',initialize);
</script>
</head>
<body style="">
<div id="map-canvas" style="width: 600px; height: 400px"></div>
<textarea name="houseInfoBox_template" id="houseInfoBox_template">
<div class="houseInfoBox" style="width:460px;height:200px;">
<div class="boxc2"></div>
<div class="boxc1"></div>
<div class="boxc3"></div>
<div class="boxc5">
<div class="boxc4"></div>
<div class="houseDataMap">
<h2 class="title">房产地图 </h2>
<div class="tabTilHouse">
<ul>
<li class="on">楼盘信息 </li>
</ul>
</div>
<div class="datas">
<div class="infos">
<span class="equal">本月均价: <strong class="cDRed">￥1000 </strong></span>
<span class="blank3"></span>
地址:广州广州广州广州广州广州广州 <br />
电话:123123123123
<p class="about">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介<span class="cDRed"><a href ="">» 查看详情 </a></span></p>
</div>
<div class="prePic"><a href =""><img src ="http://img2.cache.netease.com/photo/0087/2009-07-13/1247479037333.jpg" width ="160" height ="120" /></a></div>
</div>
</div>
<div class="boxc6"></div>
</div>
<div class="boxc7"></div>
<div class="boxc8"></div>
<div class="boxc9" ></div>
<span class="close" id="infohouse_close"></span>
</div>
</textarea>
</body>
</html>
|
|
Notes.io is a web-based application for taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000 notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 12 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
