Tempatkan nomor pada bentuk penanda yang telah ditentukan sebelumnya di peta google

Saya menggunakan spidol Google yang telah ditentukan sebelumnya (bentuk lingkaran). Saya ingin menempatkan nomor (antara 1-100) pada penanda ini tetapi saya tidak dapat melakukannya.

Saya telah memeriksa tautan ini http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|FE6256|000000 tetapi akan menampilkan nomor pada penanda yang disematkan. Apakah ada cara agar saya bisa meneruskan penanda melingkar saya ke google chart api

Ini kode untuk penanda saya:

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 sumber
comment
jsfiddle.net/cy55boru/6 coba ini sebagai permulaan. Ini tidak bulat tetapi akan memberi Anda titik awal. Sekarang sesuai dengan pin yang Anda tempatkan pada peta, misalkan dengan angka 45, ubah parameter teks menjadi 45: icon :dummyimage.com/32x32/000/fff&text=45. Anda juga dapat membuat pembuat penanda Anda sendiri, dengan ikon bulat dan PHP+GD. Berikan parameter ke url, dapatkan dengan $_GET[text] dan keluarkan dengan header('');   -  person Theodoros80    schedule 21.08.2014

Jawaban (1)


arrow_upward
2
arrow_downward

Mulai v3.21 (saat ini versi 'eksperimental', v=3.exp), penanda berlabel didukung secara asli oleh Google Maps Javascript API v3.

biola yang diperbarui

cuplikan kode:

$(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