麻煩讓我的鼠標懸停在標記上工作

-1

我在下面創建了我的代碼，並在最後使用了mouseover影響，但它不起作用。我把它放在錯誤的地方嗎？我似乎無法得到它的工作。最終，我希望獲得某種類型的信息，但每次都要一步一步地嘗試讓基本工作先行。麻煩讓我的鼠標懸停在標記上工作

<!DOCTYPE html> 
<html> 

<head> 



<!-- Google Maps and Places API --> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script> 

<!-- jQuery --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

<script type="text/javascript">  

    //declare namespace 
    var up206b = {}; 

    //declare map 
    var map; 

    function trace(message) 
    { 
    if (typeof console != 'undefined') 
    { 
     console.log(message); 
    } 
    } 

    up206b.initialize = function() 
    { 
    var latlng = new google.maps.LatLng(52.136436, -0.460739); 
    var myOptions = { 
     zoom: 13, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    } 

    var geocoder = new google.maps.Geocoder(); 

    up206b.geocode = function() 
    { 

    var addresses = [ $('#address').val(), $('#address2').val()]; 

    addresses.forEach(function(address){ 
     if(address){ 
     geocoder.geocode({ 'address': address}, function(results, status) 
         { 
     if (status == google.maps.GeocoderStatus.OK) 
     { 
      map.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
      }); 
     } 
     else 
     { 
      alert("Geocode was not successful for the following reason: " + status); 
     } 
     }); 
     } 
    }); 
    } 

var infowindow = new google.maps.InfoWindow({ 
content: contentString 
}); 

var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
      }); 


marker.addListener('mouseover', function() { 
infowindow.open(map, this); 
}); 


marker.addListener('mouseout', function() { 
infowindow.close(); 
}); 

</script> 
</head> 
<body onload="up206b.initialize()"> 

<div style="top: 0; right: 0; width:380px; height: 500px; float:right;padding-left:10px; padding-right:10px;"> 
    <h1 align="center">Map Search</h1> 

    <div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" > 

    <form > 
    <br> 
    Location 1 <input type="text" id="address"> 
    <br> 
    <br> 
    Location 2 
    <input type="text" id="address2"> 
    <br> 
    <br> 
    <input type="button" value="Submit" onClick="up206b.geocode()"> 
    </form> 
    </div> 

</div> 

<div id="map_canvas" style="height: 500px; width: 500px; float:right"></div>

來源

2016-02-19 Kev

請提供[最小，完整，測試和可讀示例]（HTTP：//計算器.com/help/mcve）問題。我得到一個JavaScript的發佈代碼：'未捕獲的ReferenceError：contentString沒有定義' – geocodezip

我已經添加了我的工作的其餘部分，將給你一個工作腳本，只是沒有任何鼠標懸停，我想 – Kev

它不會在定義'contentString'之前有任何鼠標懸停，這是infowindow中顯示的內容，如果它是空/空，沒有infowindow ... – geocodezip

您需要：

定義contentString
聯想與信息窗口內容的標記。這樣做的一種方法是匿名函數關閉，如在此相關問題Google Maps JS API v3 - Simple Multiple Marker Example中，或者使用明確的createMarker函數，如下面的示例中所示。

注：這種做法只會大約10個地址後，它會運行到地理編碼速率限制工作。

function createMarker(latlng, html, map) { 
    var infowindow = new google.maps.InfoWindow({ 
    content: html 
    }); 
    var marker = new google.maps.Marker({ 
    map: map, 
    position: latlng 
    }); 
    marker.addListener('mouseover', function() { 
    infowindow.open(map, this); 
    }); 
    marker.addListener('mouseout', function() { 
    infowindow.close(); 
    }); 
}

proof of concept fiddle

代碼片斷：

var markers = []; 
 

 
function createMarker(latlng, html, map) { 
 
    var infowindow = new google.maps.InfoWindow({ 
 
    content: html 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: latlng 
 
    }); 
 
    marker.addListener('mouseover', function() { 
 
    infowindow.open(map, this); 
 
    }); 
 
    marker.addListener('mouseout', function() { 
 
    infowindow.close(); 
 
    }); 
 
    markers.push(marker); 
 
} 
 

 
//declare namespace 
 
var up206b = {}; 
 

 
//declare map 
 
var map; 
 

 
function trace(message) { 
 
    if (typeof console != 'undefined') { 
 
    console.log(message); 
 
    } 
 
} 
 

 
up206b.initialize = function() { 
 
    var latlng = new google.maps.LatLng(52.136436, -0.460739); 
 
    var myOptions = { 
 
    zoom: 13, 
 
    center: latlng, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 
    up206b.geocode(); 
 
} 
 

 
var geocoder = new google.maps.Geocoder(); 
 

 
up206b.geocode = function() { 
 
    for (var i = 0; i < markers.length; i++) { 
 
    markers[i].setMap(null); 
 
    } 
 
    markers = []; 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var addresses = [$('#address').val(), $('#address2').val()]; 
 

 
    addresses.forEach(function(address) { 
 
    if (address) { 
 
     geocoder.geocode({ 
 
     'address': address 
 
     }, function(results, status) { 
 
     if (status == google.maps.GeocoderStatus.OK) { 
 
      map.setCenter(results[0].geometry.location); 
 
      createMarker(results[0].geometry.location, address, map); 
 
      bounds.extend(results[0].geometry.location); 
 
      map.fitBounds(bounds); 
 
     } else { 
 
      alert("Geocode was not successful for the following reason: " + status); 
 
     } 
 
     }); 
 
    } 
 
    }); 
 
} 
 

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

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input id="address" value="New York, NY" /> 
 
<input id="address2" value="Newark, NJ" /> 
 
<input type="button" value="Submit" onClick="up206b.geocode()"> 
 
<div id="map_canvas"></div>

來源

2016-02-19 21:36:42 geocodezip

麻煩讓我的鼠標懸停在標記上工作

回答

相關問題