谷歌地图API获取位置，地点标记和搜索标签

-1

我已阅读关于谷歌地图API的所有帖子，并且我已经创建了两个可以正常工作的html和js文件，但是当我将它们组合在一起时并非如此。谷歌地图API获取位置，地点标记和搜索标签

第一个具有自动完成的文本框来搜索和一些重点位置：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
     .controls { 
     margin-top: 16px; 
     border: 1px solid transparent; 
     border-radius: 2px 0 0 2px; 
     box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     height: 32px; 
     outline: none; 
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
     } 

     #pac-input { 
     background-color: #fff; 
     padding: 0 11px 0 13px; 
     width: 400px; 
     font-family: Roboto; 
     font-size: 15px; 
     font-weight: 300; 
     text-overflow: ellipsis; 
     } 

     #pac-input:focus { 
     border-color: #4d90fe; 
     margin-left: -1px; 
     padding-left: 14px; /* Regular padding-left + 1. */ 
     width: 401px; 
     } 

     .pac-container { 
     font-family: Roboto; 
     } 

     #type-selector { 
     color: #fff; 
     background-color: #4d90fe; 
     padding: 5px 11px 0px 11px; 
     } 

     #type-selector label { 
     font-family: Roboto; 
     font-size: 13px; 
     font-weight: 300; 
     } 
} 

    </style> 
    <title>Places search box</title> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> 
    <script> 
// This example adds a search box to a map, using the Google Place Autocomplete 
// feature. People can enter geographical searches. The search box will return a 
// pick list containing a mix of places and predicted search terms. 

function initialize() { 

    var markers = []; 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var defaultBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(-33.8902, 151.1759), 
     new google.maps.LatLng(-33.8474, 151.2631)); 
    map.fitBounds(defaultBounds); 

    // Create the search box and link it to the UI element. 
    var input = /** @type {HTMLInputElement} */(
     document.getElementById('pac-input')); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

    var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input)); 

    // [START region_getplaces] 
    // Listen for the event fired when the user selects an item from the 
    // pick list. Retrieve the matching places for that item. 
    google.maps.event.addListener(searchBox, 'places_changed', function() { 
    var places = searchBox.getPlaces(); 

    if (places.length == 0) { 
     return; 
    } 
    for (var i = 0, marker; marker = markers[i]; i++) { 
     marker.setMap(null); 
    } 

    // For each place, get the icon, place name, and location. 
    markers = []; 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0, place; place = places[i]; i++) { 
     var image = { 
     url: place.icon, 
     size: new google.maps.Size(71, 71), 
     origin: new google.maps.Point(0, 0), 
     anchor: new google.maps.Point(17, 34), 
     scaledSize: new google.maps.Size(25, 25) 
     }; 

     // Create a marker for each place. 
     var marker = new google.maps.Marker({ 
     map: map, 
     icon: image, 
     title: place.name, 
     position: place.geometry.location 
     }); 

     markers.push(marker); 

     bounds.extend(place.geometry.location); 
    } 

    map.fitBounds(bounds); 
    }); 
    // [END region_getplaces] 

    // Bias the SearchBox results towards places that are within the bounds of the 
    // current map's viewport. 
    google.maps.event.addListener(map, 'bounds_changed', function() { 
    var bounds = map.getBounds(); 
    searchBox.setBounds(bounds); 
    }); 
} 

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

    </script> 
    <style> 
     #target { 
     width: 345px; 
     } 
    </style> 
    </head> 
    <body> 
    <input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
    <div id="map-canvas"></div> 
    </body> 
</html>

第二个允许在地图上设置一个标记用户点击右键并得到确切的位置：

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     #map_canvas {height:600px;width:800px} 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> 

    <script type="text/javascript"> 
     var map; 
     var markersArray = []; 

     function initMap() 
     { 
      var latlng = new google.maps.LatLng(40.97, -5.6635); 
      var myOptions = { 
       zoom: 10, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

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


      // add a click event handler to the map object 
      google.maps.event.addListener(map, "rightclick", function(event) 
      { 
       // place a marker 
       placeMarker(event.latLng); 

       // display the lat/lng in your form's lat/lng fields 
       document.getElementById("latFld").value = event.latLng.lat(); 
       document.getElementById("lngFld").value = event.latLng.lng(); 
      }); 
     } 
     function placeMarker(location) { 
      // first remove all markers if there are any 
      deleteOverlays(); 

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

      // add marker in markers array 
      markersArray.push(marker); 

      map.setCenter(location); 
     } 

     // Deletes all markers in the array by removing references to them 
     function deleteOverlays() { 
      if (markersArray) { 
       for (i in markersArray) { 
        markersArray[i].setMap(null); 
       } 
      markersArray.length = 0; 
      } 
     } 
    </script> 
</head> 

<body onload="initMap()"> 
    <div id="map_canvas"></div> 
    <input type="text" id="latFld"> 
    <input type="text" id="lngFld"> 
</body> 
</html>

我想结合他们两个，但问题是，当我尝试它时，rightbuttom和标记选项不起作用。

这里是我创建结合两种代码：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
     .controls { 
     margin-top: 16px; 
     border: 1px solid transparent; 
     border-radius: 2px 0 0 2px; 
     box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     height: 32px; 
     outline: none; 
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
     } 

     #pac-input { 
     background-color: #fff; 
     padding: 0 11px 0 13px; 
     width: 400px; 
     font-family: Roboto; 
     font-size: 15px; 
     font-weight: 300; 
     text-overflow: ellipsis; 
     } 

     #pac-input:focus { 
     border-color: #4d90fe; 
     margin-left: -1px; 
     padding-left: 14px; /* Regular padding-left + 1. */ 
     width: 401px; 
     } 

     .pac-container { 
     font-family: Roboto; 
     } 

     #type-selector { 
     color: #fff; 
     background-color: #4d90fe; 
     padding: 5px 11px 0px 11px; 
     } 

     #type-selector label { 
     font-family: Roboto; 
     font-size: 13px; 
     font-weight: 300; 
     } 
} 

    </style> 
    <title>Places search box</title> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> 
    <script> 
// This example adds a search box to a map, using the Google Place Autocomplete 
// feature. People can enter geographical searches. The search box will return a 
// pick list containing a mix of places and predicted search terms. 

function initialize() { 


function placeMarker(location) { 
      // first remove all markers if there are any 
      deleteOverlays(); 

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

      // add marker in markers array 
      markersArray.push(marker); 

      map.setCenter(location); 
     } 

     // Deletes all markers in the array by removing references to them 
function deleteOverlays() { 
      if (markersArray) { 
       for (i in markersArray) { 
        markersArray[i].setMap(null); 
       } 
      markersArray.length = 0; 
      } 
     } 

    var markers = []; 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    // add a click event handler to the map object 
      google.maps.event.addListener(map, "rightclick", function(event) 
      { 
       // place a marker 
       placeMarker(event.latLng); 

       // display the lat/lng in your form's lat/lng fields 
       document.getElementById("latFld").value = event.latLng.lat(); 
       document.getElementById("lngFld").value = event.latLng.lng(); 
      }); 







    var defaultBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(-33.8902, 151.1759), 
     new google.maps.LatLng(-33.8474, 151.2631)); 
    map.fitBounds(defaultBounds); 

    // Create the search box and link it to the UI element. 
    var input = /** @type {HTMLInputElement} */(
     document.getElementById('pac-input')); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

    var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input)); 

    // [START region_getplaces] 
    // Listen for the event fired when the user selects an item from the 
    // pick list. Retrieve the matching places for that item. 
    google.maps.event.addListener(searchBox, 'places_changed', function() { 
    var places = searchBox.getPlaces(); 

    if (places.length == 0) { 
     return; 
    } 
    for (var i = 0, marker; marker = markers[i]; i++) { 
     marker.setMap(null); 
    } 

    // For each place, get the icon, place name, and location. 
    markers = []; 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0, place; place = places[i]; i++) { 
     var image = { 
     url: place.icon, 
     size: new google.maps.Size(71, 71), 
     origin: new google.maps.Point(0, 0), 
     anchor: new google.maps.Point(17, 34), 
     scaledSize: new google.maps.Size(25, 25) 
     }; 

     // Create a marker for each place. 
     var marker = new google.maps.Marker({ 
     map: map, 
     icon: image, 
     title: place.name, 
     position: place.geometry.location 
     }); 

     markers.push(marker); 

     bounds.extend(place.geometry.location); 
    } 

    map.fitBounds(bounds); 
    }); 
    // [END region_getplaces] 

    // Bias the SearchBox results towards places that are within the bounds of the 
    // current map's viewport. 
    google.maps.event.addListener(map, 'bounds_changed', function() { 
    var bounds = map.getBounds(); 
    searchBox.setBounds(bounds); 
    }); 
} 

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

    </script> 
    <style> 
     #target { 
     width: 345px; 
     } 
    </style> 
    </head> 
    <body> 
    <input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
    <div id="map-canvas"></div> 
    </body> 
</html>

谢谢您的帮助

来源

2014-06-28 Alberto

这两个全局变量是不是在你的最后一个例子中的JavaScript声明。

var map; 
var markersArray = [];

来源

2014-06-28 20:29:42 Valderann

即使按预期:( – Alberto

这些字段也缺少它不工作： – Valderann

谷歌地图API获取位置，地点标记和搜索标签

回答

相关问题