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>