วางหมายเลขบนรูปร่างเครื่องหมายที่กำหนดไว้ล่วงหน้าบน Google Map

ฉันใช้ Google Markers ที่กำหนดไว้ล่วงหน้า (รูปวงกลม) ฉันต้องการวางหมายเลข (ระหว่าง 1-100) บนเครื่องหมายนี้แต่ไม่สามารถทำได้

ฉันได้ตรวจสอบลิงก์นี้แล้ว http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|FE6256|000000 แต่จะแสดงตัวเลขบนเครื่องหมายที่ปักหมุดไว้ มีวิธีใดบ้างที่ฉันสามารถส่งเครื่องหมายวงกลมไปที่ Google Chart API ได้

นี่คือรหัสสำหรับเครื่องหมายของฉัน:

var markerIcon = {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: '#000',
    fillOpacity: .9,
    scale: 10,
    strokeColor: '#000',
    strokeWeight: 1
  };

 var marker = new google.maps.Marker({
        icon: markerIcon,
        position: new google.maps.LatLng(latitude,longitude),
        map: map,
    });

FIDDLE


google-maps javascript google-maps-api-3
person alwaysLearn    schedule 21.08.2014    source แหล่งที่มา
comment
jsfiddle.net/cy55boru/6 ลองทำสิ่งนี้เพื่อเริ่มต้น มันไม่กลม แต่มันจะทำให้คุณมีจุดเริ่มต้น ตอนนี้ตามหมุดที่คุณวางไว้บนแผนที่ สมมติว่าด้วยหมายเลข 45 ให้เปลี่ยนพารามิเตอร์ข้อความเป็น 45: icon :dummyimage.com/32x32/000/fff&text=45 นอกจากนี้คุณยังสามารถสร้างเครื่องมือสร้างมาร์กเกอร์ของคุณเองได้ด้วยไอคอนทรงกลมและ PHP+GD ส่งพารามิเตอร์ไปที่ url รับด้วย $_GET[text] และส่งออกด้วย header('');   -  person Theodoros80    schedule 21.08.2014

คำตอบ (1)


arrow_upward
2
arrow_downward

ตั้งแต่เวอร์ชัน 3.21 (ปัจจุบันเป็นเวอร์ชัน 'ทดลอง', v=3.exp), เครื่องหมายที่มีป้ายกำกับได้รับการสนับสนุนโดย Google Maps Javascript API v3

ซอที่อัปเดตแล้ว

ข้อมูลโค้ด:

$(document).ready(function() {
   var params = {
     'lat': $('#map_canvas').data('lat'),
     'long': $('#map_canvas').data('long')
   };
   google.maps.event.addDomListener(window, 'load', initialize(params));

 });


 function initialize(coordinates) {
   var mapOptions = {
     center: new google.maps.LatLng(coordinates.lat, coordinates.long),
     zoom: 15,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
   };

   var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

   var markerIcon = {
     path: google.maps.SymbolPath.CIRCLE,
     fillColor: '#000',
     fillOpacity: .9,
     scale: 10,
     strokeColor: '#000',
     strokeWeight: 1
   };


   var marker = new google.maps.Marker({
     icon: markerIcon,
     position: new google.maps.LatLng(coordinates.lat, coordinates.long),
     map: map,
     label: {
       color: 'white',
       text: '1'
     }
   });

   marker.setMap(map);
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="width:600px;height:300px" data-lat='40.8152' data-long='-73.0455'></div>

person geocodezip    schedule 28.07.2015