1 <apex:page >
2 <head>
3 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
4 <script type="text/javascript" src="http://maps.google.cn/maps/api/js?sensor=false"></script>
5 <script type="text/javascript">
6 var gGreenIcon = new google.maps.MarkerImage(
7
8 "http://img.zcool.cn/community/01c9505541bb22000001a6[email protected]_32h_1c_1e_2o.png",
9 new google.maps.Size(32, 32),
10 new google.maps.Point(0, 0),
11 new google.maps.Point(16, 16)
12
13 );
14
15 function myLoad() {
16
17 var lat = 23.14746;
18 var lng = 113.34175376;
19
20 var myLatLng = new google.maps.LatLng(lat, lng);
21 var myOptions = {
22
23 zoom: 15,
24
25 center: myLatLng,
26
27 mapTypeId: google.maps.MapTypeId.ROADMAP
28 };
29 var map = new google.maps.Map(document.getElementById("map"), myOptions);
30
31 var marker = new google.maps.Marker({
32 position: myLatLng,
33 icon: gGreenIcon,
34 map: map,
35 title: "Hello World!"
36 });
37 //marker.setMap(map);
38 }
39 window.onload = myLoad;
40 </script>
41 </head>
42 <body>
43 <style>
44 #map {
45 width: 500px;
46 height: 400px;
47 float: left;
48 }
49 </style>
50 <div id="map"></div>
51 </body>
52 </apex:page>
直接上代码，重要的事情还是要强调一下，必须是IE浏览器才能打开。
上一篇文章上的注释就不过多的浪费细说了，重点说一下marker
function myLoad() 上面的这一段其实就是自定义一个小图标。里面的那些属性请自行体会（其实我也不知道）。第一个是你要应用的这个图标的路径。size是大小。point是和坐标位置的相对位移。（至于为什么有两个point……）如果有不对的地方一定一定一定要指正出来啊，共同学习。地图的创建和上一篇一样，设置经纬度，基本信息，调用map方法，一般情况下都把地图放在<div>中。
使用Marker方法创建marker
icon: gGreenIcon 是指你调用的那个var，如果不写也是可以得，默认是用自带的一个红色的小图标。
map: map 是把他添加到那个地图上。如果不写这个 用//marker.setMap(map);（被注释掉的这句）是实现同样功能的。
title: "Hello World!" 是指鼠标放在上面显示的东西，默认隐藏，不是上面的一个框框之类的。
我的电脑是win10 自带的浏览器打不开地图效果，所以没有视图。
时间： 2024-10-13 06:28:42