GoogleMap上显示小红点

最近想做一个GoogleMap上的显示小红点的功能

GooGle的效果

自己做的效果

总感觉跟Google做的不一样，没Google做的好。

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GisShowAllTestPoint.aspx.cs" Inherits="Portal.GisShowAllTestPoint" %>
 2 
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">    
 7     <title></title>
 8     <style type="text/css">
 9       html { height: 100% }
10       body { height: 100%; margin: 0; padding: 0 }
11       #map_canvas { height: 100% }
12       .spantext{ color:Purple; }
13     </style>
14 
15     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB0Hr5k4z_ARI93bFZ28M6RCQ3qYlL3XyU&sensor=false"></script>
16     <script type="text/javascript">
17         var Latlngs = <%=Latlngs%>;
18 //        [{ Jin: 110.993487, Wei: 37.997283 }, { Jin: 112.769617, Wei: 38.768677 }, { Jin: 116.913983, Wei: 26.944184 }, { Jin: 102.360533, Wei: 38.130595 },
19 //            { Jin: 114.552137, Wei: 35.675677 }, { Jin: 112.320119, Wei: 37.371388}];
20         var map;
21         var myLatlngs = [];
22         var markers = [];
23         var infowindow = new google.maps.InfoWindow({      
24             maxWidth: 240
25          });
26         
27 
28         function initialize() {
29             
30             var myLatlng0 = new google.maps.LatLng(Latlngs[0].Loc_Lat, Latlngs[0].Loc_lon);
31             //alert(0);
32             var mapOptions = {
33                 zoom: 5,
34                 center: myLatlng0,
35                 mapTypeId: google.maps.MapTypeId.ROADMAP
36             }
37             map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
38             for (var i = 0; i < Latlngs.length; i++) {
39                 //alert(Latlngs[i].Jin);
40                 var myLatlng = new google.maps.LatLng(Latlngs[i].Loc_Lat, Latlngs[i].Loc_lon);
41                 myLatlngs.push(myLatlng);               
42                 var marker0 = new google.maps.Marker({
43                     position: myLatlngs[i],
44                     map: map,
45                     icon: {
46                         path: google.maps.SymbolPath.CIRCLE,
47                         fillColor:"Red",
48                         scale: 3,
49                         fillOpacity:1,
50                         strokeColor:"red",
51                         strokeOpacity:1
52                     },
53                     title:Latlngs[i].Other_Info
54 
55                 });
56                 //markers.push(marker0);
57                 attachSecretMessage(marker0, i);             
58 //                var marker = new google.maps.Marker({
59 //                    position: myLatlngs[i],
60 //                    map: map,
61 //                    title:"sss"
62 //                    //icon: "images/ico0.png"
63 //                });
64 //                attachSecretMessage(marker, i);                
65             }            
66         }
67         function attachSecretMessage(marker, number) {
68             google.maps.event.addListener(marker, 'click', function () {
69                 //alert(isInfoWindowOpen(infoWindow));  
70                     var cs = "<b>"+ marker.getTitle()+"</b></br></br>承担人:<span class='spantext'>"+Latlngs[number].Dealer+"</span></br>承担人电话:<span class='spantext'>"+Latlngs[number].Dealer_Phone
71                         +"</span></br>行政区划:<span class='spantext'>"+Latlngs[number].Loc_Name+"</span>";
72                     infowindow.setContent(cs);
73                     infowindow.open(map, marker);
74             });
75         }
76         
77         google.maps.event.addDomListener(window, 'load', initialize);
78 
79     </script>
80 </head>
81 <body>    
82      <div id="map-canvas" style="width:100%; height:100%"></div>    
83 </body>
84 </html>
View Code

 

posted on 2013-05-30 09:30  thegavincheng  阅读(1032)  评论(0)  编辑  收藏  举报