JavaScript自己实现DOM的insertAfter()函数

DOM只提供了insertBefore()方法,将新元素插入到现有元素的前面,现在我们来实现自己的insertAfter()函数,代码如下

1
2
3
4
5
6
7
8
9
function insertAfter(newElement,targetElement){
var parent=targetElement.parentNode;
if(parent.lastChild==targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
\n

阅读全文

JavaScript常用函数-添加多个onload事件

代码清单

1
2
3
4
5
6
7
8
9
10
11
12
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}
\n

阅读全文

修改google map默认地图标记

以下是官方例子的源码

修改letteredIcon.image图片地址即可更改标记,需要使用绝对路径,相对路径似乎不起作用,笔者开始使用相对路径,结果图片不显示,后改为绝对路径解决. 同时可以对标记大小,位置等做相应修改.

1
2
3
4
5
6
7
8
9
10

// 为所有标记创建指定阴影、图标尺寸灯的基础图标 var baseIcon = new GIcon(); baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png"; baseIcon.iconSize = new GSize(20, 34); baseIcon.shadowSize = new GSize(37, 34); baseIcon.iconAnchor = new GPoint(9, 34); baseIcon.infoWindowAnchor = new GPoint(9, 2); baseIcon.infoShadowAnchor = new GPoint(18, 25);

// 创建信息窗口显示对应给定索引的字母的标记 function createMarker(point, index) { // Create a lettered icon for this point using our icon class var letter = String.fromCharCode("A".charCodeAt(0) + index); var letteredIcon = new GIcon(baseIcon); letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";

// 设置 GMarkerOptions 对象 markerOptions = { icon:letteredIcon }; var marker = new GMarker(point, markerOptions);

GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("标记 <b>" + letter + "</b>"); }); return marker; }

// 随机向地图添加 10 个标记 var bounds = map.getBounds(); var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); for (var i = 0; i < 10; i++) { var latlng = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); map.addOverlay(createMarker(latlng, i)); } } } </script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 500px; height: 300px"></div> </body> </html>\\n

阅读全文

测试google map api密钥是否正确

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAPMb9i-xfXea2BhwglLD6vhQQfXL1E26uZVzpSr4bnBOO5ggYXxTJ8o5DOfAanEM5dHhSGnAhnn526Q"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>\n

阅读全文

申请google map api密钥

申请地址:

http://code.google.com/intl/zh-CN/apis/maps/signup.html

阅读全文

博客开通

本博客主要是记录在项目开发中遇到的一些问题及其心得体会,以学习的目的为主,欢迎交流!

阅读全文