Javascript Can';让谷歌地图地理代码工作
预期行为:我试图创建一个显示用户当前位置的地图,但当用户搜索某个位置时,该位置上会出现一个标记 当前行为:只有当前位置代码有效 我想不出这里有什么问题。这两个函数都非常通用 下面是javascript:Javascript Can';让谷歌地图地理代码工作,javascript,google-maps,google-maps-api-3,google-maps-markers,Javascript,Google Maps,Google Maps Api 3,Google Maps Markers,预期行为:我试图创建一个显示用户当前位置的地图,但当用户搜索某个位置时,该位置上会出现一个标记 当前行为:只有当前位置代码有效 我想不出这里有什么问题。这两个函数都非常通用 下面是javascript: if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showCurrentLocation); } else {
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showCurrentLocation);
}
else
{
alert("Geolocation API not supported.");
}
function showCurrentLocation(position)
{
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var coords = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 15,
center: coords,
mapTypeControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//create the map, and place it in the HTML map div
map = new google.maps.Map(
document.getElementById("mapPlaceholder"), mapOptions
);
var styles = [{"featureType":"landscape","elementType":"all","stylers":[{"visibility":"simplified"},{"lightness":20}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"simplified"},{"lightness":20},{"hue":"#007bff"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"visibility":"simplified"},{"color":"#929292"}]},{"featureType":"poi.park","elementType":"all","stylers":[{"color":"#D9EDC5"}]},{"featureType":"poi.school","elementType":"geometry.fill","stylers":[{"color":"#f2e5c1"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#386FAB"}]},{"featureType":"road","elementType":"labels.text","stylers":[{"saturation":"-100"},{"visibility":"on"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#A0BDDD"},{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#7FA6CF"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.fill","stylers":[{"invert_lightness":true},{"color":"#336396"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.stroke","stylers":[{"color":"#003e7e"}]},{"featureType":"road.highway.controlled_access","elementType":"labels.text","stylers":[{"invert_lightness":true},{"lightness":"16"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#D2E5F9"},{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#6699D0"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"color":"#B0C1D3"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"visibility":"on"},{"lightness":"40"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"on"},{"lightness":40}]},{"featureType":"water","elementType":"all","stylers":[{"lightness":20},{"hue":"#007fff"}]}];
map.setOptions({styles: styles});
//place the initial marker
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Current location!"
});
/*new marker
var coords2 = new google.maps.LatLng(24.837568, 67.081005);
var marker2 = new google.maps.Marker({
position: coords2,
map: map,
title: "DA public school"
});*/
}
//set the geocoder
var geocoder = new google.maps.Geocoder();
//geocode function
function codeAddress()
{
// grab the address from user input field
var address = $('#pac-input').val();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
var marker2 = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
在HTML中调用codeAddress():
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<input type="button" class="controls" id="locate" onClick="codeAddress()" value="Locate">
<div id="mapPlaceholder"></div>
终于明白了。这是一个愚蠢的错误。在链接jQuery之前,我已经链接了我的Javascript文件。代码现在可以正常工作。我看不到您在哪里调用codeAddress()
我已经编辑了这个问题。当我加载jQuery时,您的代码对我有效。您是否加载jQuery?您是否通过它获得了所需的功能?我在这个文档中包含了jQuery,是的。是的,我得到了一个基于地理编码地址的标记(值为#pac input)