Question

在此代码中，我需要添加谷歌地图标记。我尝试了很多，但不知道如何添加地图标记。如果有人知道请指导我。

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

  function initMap() {
    var origin_place_id = null;
    var destination_place_id = null;
    var travel_mode = google.maps.TravelMode.WALKING;
    var map = new google.maps.Map(document.getElementById('map'), {
      mapTypeControl: false,
      center: {lat: 30.3753, lng: 69.3451},
      zoom: 7
    });
    google.maps.event.addDomListener(document.getElementById('go'), 'click',route);
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var marker=new google.maps.Marker({
        position:map,
    });
    directionsDisplay.setMap(map);
    marker.setMap(map);

    var origin_input = document.getElementById('origin-input');
    var destination_input = document.getElementById('destination-input');
    var modes = document.getElementById('mode-selector');


    //map.controls[google.maps.ControlPosition.TOP_LEFT].push(origin_input);
    //map.controls[google.maps.ControlPosition.TOP_LEFT].push(destination_input);
    //map.controls[google.maps.ControlPosition.TOP_LEFT].push(go);
    //map.controls[google.maps.ControlPosition.TOP_LEFT].push(modes);

    var origin_autocomplete = new google.maps.places.Autocomplete(origin_input);
    origin_autocomplete.bindTo('bounds', map);
    var destination_autocomplete =
        new google.maps.places.Autocomplete(destination_input);
    destination_autocomplete.bindTo('bounds', map);

    // Sets a listener on a radio button to change the filter type on Places
    // Autocomplete.
    function setupClickListener(id, mode) {
      var radioButton = document.getElementById(id);
      radioButton.addEventListener('click', function() {
        travel_mode = mode;
      });
    }
    setupClickListener('changemode-walking', google.maps.TravelMode.WALKING);
    setupClickListener('changemode-transit', google.maps.TravelMode.TRANSIT);
    setupClickListener('changemode-driving', google.maps.TravelMode.DRIVING);


    function expandViewportToFitPlace(map, place) {
        if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
      } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);
      }
    }

    origin_autocomplete.addListener('place_changed', function() {
      var place = origin_autocomplete.getPlace();
      if (!place.geometry) {
        window.alert("Autocomplete's returned place contains no geometry");
        return;
      }
      expandViewportToFitPlace(map, place);

      // If the place has a geometry, store its place ID and route if we have
      // the other place ID
      origin_place_id = place.place_id;
      route(origin_place_id, destination_place_id, travel_mode,
            directionsService, directionsDisplay);
    });

    destination_autocomplete.addListener('place_changed', function() {
      var place = destination_autocomplete.getPlace();
      if (!place.geometry) {
        window.alert("Autocomplete's returned place contains no geometry");
        return;
      }

      expandViewportToFitPlace(map, place);
    $('#go').click(function(){
        var origin_input = document.getElementById('origin-input').value;
        var res = origin_input.split(",");
        var bc = res[0];
        var destination_input = document.getElementById('destination-input').value;
        var res = destination_input.split(",");
        var bd = res[0];
        //alert(bc);
        //alert(bd);
        //sessionStorage.setItem ("fromCity" , bc[0]);
        //sessionStorage.setItem ("toCity" , bd[0]);
      // If the place has a geometry, store its place ID and route if we have
      // the other place ID
        destination_place_id = place.place_id;
        route(origin_place_id, destination_place_id, travel_mode,
            directionsService, directionsDisplay);
        });
    });
    $('#mode-selector').hide();
    $('#go').click(function(){
        //$('#go').hide(250);
        $('#mode-selector').show(250);
    });


    function route(origin_place_id, destination_place_id, travel_mode,
                   directionsService, directionsDisplay) {
      if (!origin_place_id || !destination_place_id) {
        return;
      }
      directionsService.route({
        origin: {'placeId': origin_place_id},
        destination: {'placeId': destination_place_id},
        travelMode: travel_mode
      }, 
    function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(response);
        } else {
          window.alert('Directions request failed due to ' + status);
        }
      });
      google.maps.event.addDomListener(window, 'load', initialize);
    }
  }

Answer 1

为了便于阅读，我建议你将map变量放在函数之外。

var map;

function initMap() {
    var origin_place_id = null;
    var destination_place_id = null;
    var travel_mode = google.maps.TravelMode.WALKING;
    map = new google.maps.Map(document.getElementById('map'), {
        mapTypeControl: false,
        center: {
            lat: 30.3753,
            lng: 69.3451
        },
        zoom: 7
    });
    ..... rest of your code
}

您可以按

添加标记

function addMarker(lat, lng, title) {
  return new google.maps.Marker({
    position: {lat: lat, lng: lng};
    map: map,
    title: title
  });
}

var marker = addMarker(-50, 50, 'My Marker!!');

Answer 2

只需按照Google JavaScript API Markers中的指南操作即可。

这里声明google.maps.Marker构造函数采用单个Marker选项对象文字，指定标记的初始属性。

以下字段特别重要，通常在构建标记时设置：

position（必填）指定标识标记初始位置的LatLng。
map（可选）指定放置标记的Map。如果未在构建标记时指定地图，则会创建标记，但不会附加到地图上（或显示在地图上）。您可以稍后通过调用标记的setMap()方法添加标记。

检查上述链接，查看有关如何添加标记的示例代码。

此外，以下是我作为示例链接的示例代码的代码。

function initMap() {
var myLatLng = {lat: 30.3753, lng: 69.3451};
var origin_place_id = null;
var destination_place_id = null;
var travel_mode = google.maps.TravelMode.WALKING;
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeControl: false,
zoom: 13,
center: myLatLng
});

var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});

var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
directionsDisplay.setMap(map);

如何添加谷歌地图标记？

2 个答案: