2014-10-13 2 views
-2

Я просматривал карту google goi для интеграции на моем сайте. сделал эту страницу тем, что я мог понять до сих пор.нужно добавить несколько маркеров, используя пользовательскую карту google

все работает нормально, но есть только одна вещь, что я хочу три маркера на одной карте. , когда я добавляю несколько маркеров, тогда карта перестает работать.

тест ссылка: http://goo.gl/X9q92s

вы будете иметь лучшее понимание, если и увидеть мою ссылку. это код, который я получил от google map api. и я отредактировал его, чтобы получить карту серого масштаба с моим желаемым полем маркера. Я просто хочу добавить еще два ...

Пожалуйста, помогите.

<script> 
function initialize() { 
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
    var mapOptions = { 
    zoom: 4, 
    center: myLatlng 
    } 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title: 'Hello World!' 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
+0

В вашем коде вы добавляете только один маркер. Обновите свой вопрос, чтобы показать нам код, который вы используете, чтобы добавить три маркера. – duncan

+0

Привет, Дункан, я добавил код для еще одного маркера ... пожалуйста, помогите ... –

+0

Определить _'map перестает работать'_. Единственное, что я вижу здесь неправильно, это создать новую переменную для вашего второго infowindow, 'infowindow1', но затем вы ее не используете и вместо этого повторно используйте' infowindow' в обработчике событий click для 'marker1' – duncan

ответ

1

Вы должны разместить свой «новый маркер» код в свою собственную функцию, например, так:

function LoadMarkers(name, lat, lng) { 
      var MarkerLatLng = new google.maps.LatLng(lat, lng); 
      var MarkerOption = { map: map, position: MarkerLatLng, title: name}; 
      var Marker = new google.maps.Marker(MarkerOption); 
} 

Подставляя это в свою собственную функцию позволяет «обновить» маркеры с легкостью, просто вызывая функцию таймером или другим событием. Программа, над которой я работаю, обновляет карту каждые несколько секунд, так как мой источник данных постоянно меняется с новыми/удаленными/обновленными записями, которые должны быть немедленно отображены на карте. Я думаю, что это отличный способ сделать это.

Затем в вашей программе вы можете создать цикл, который снимает информацию для каждого маркера, вызывая функцию LoadMarkers. Недавно я влюбился в SqlDataReader.

Ваш цикл будет перебирать через SqlDataReader и каждая запись чтения будет вызывать скрипт так:

InvokeScript("LoadMarkers", New Object() {name, lat, lng}) 

Это отличный момент, чтобы также добавить InfoWindow для каждого маркера.

var infowindow = new google.maps.InfoWindow(
{ 
content: "Content here" 
}); 

Как и прослушиватель кликов для InfoWindows. ;)

google.maps.event.addListener(Marker, 'click', function() { 
       typeof infoWindowsOpenCurrently !== 'undefined' && infoWindowsOpenCurrently.close(); //If there is an InfoWindow currently open, close it 
       infowindow.open(map, Marker); //Open a new one for the selected marker 
       infoWindowsOpenCurrently = infowindow; //Set the new info window to the temporary variable 
      }); 

Некоторым может не понравиться этот метод использования цикла. Мне это нравится, потому что я могу «персонализировать» каждый маркер для каждой записи, а также персонализировать каждую из своих InfoWindows. В моем коде выше предположим, что «имя» - это уникальный идентификатор, который позволяет указать конкретный маркер для последующего использования, например, идентифицировать, какой маркер был нажат и какой InfoWindow в настоящее время открыт.

Смежные вопросы