Question

我使用谷歌地图API显示5个随机位置。这是小提琴：http://jsfiddle.net/d0s4yzag/

function mapExecute(targetLocation) {
    var currentLocation = new google.maps.LatLng(targetLocation.latitude, targetLocation.longitude)
    mapProp = {
        center: new google.maps.LatLng(targetLocation.latitude, targetLocation.longitude),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(targetLocation.latitude, targetLocation.longitude),
        animation: google.maps.Animation.BOUNCE
    });

    marker.setMap(map);
    for (var i = 0; i < data.Locations.Location.length; i++) {
        var entity = data.Locations.Location[i];
        var myLatLng = new google.maps.LatLng(data.Locations.Location[i].latitude, data.Locations.Location[i].longitude);
        console.log("myLatLng", myLatLng);
        var mark = new google.maps.Marker({
            position: myLatLng,
            map: map
        });

        calcRoute();
    }
}

我有标记放在上面，我需要在我的数据JSON中显示我所拥有的地方的名称作为鼠标悬停的工具提示。我尝试了他们在这里给出的解决方案，Google Maps API - Marker ToolTip。但它对我不起作用。

Answer 1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script>
<script >

function getCurrentLocation() {
    //Checking the availability of geo location
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
    }
    //If geo location is present

    //If geo location is not present

}


var  text , closest , map,
     data = {
            "Locations": {
                "Location": [
                    {
                    "latitude": "22.297972",
                    "longitude": "114.178028",
                    "name": "store1"
                   },
                   {
                    "latitude": "22.296840",
                    "longitude": "114.172621",
                    "name": "store2"
                   },
                   {
                    "latitude": "22.281056",
                    "longitude": "114.185779",
                    "name": "store3"
                   },
                   {
                    "latitude": "22.278076",
                    "longitude": "114.170463",
                    "name": "store4"
                   },
                   {
                    "latitude": "22.28477",
                    "longitude": "114.216366",
                    "name": "store5"
                   }
                ]
            }
        },
    targetLocation = {  },
    infowindow = { }
    mapProp = {  } ;
    getCurrentLocation();
 var closestLocation = function(targetLocation, locationData) {

 function vectorDistance(dx, dy) {
  return Math.sqrt(dx * dx + dy * dy);
 }

 function locationDistance(location1, location2) {
  var dx = location1.latitude - location2.latitude,
           dy = location1.longitude - location2.longitude;
  return vectorDistance(dx, dy);
 }

 return locationData.reduce(function(prev, curr) {
  var prevDistance = locationDistance(targetLocation , prev),
     currDistance = locationDistance(targetLocation , curr);
  return (prevDistance < currDistance) ? prev : curr;
 });
}

function getCurrentLocation() {
    //Checking the availability of geo location
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
    }
    //If geo location is present
    function successFunction(position) {
        // console.log("geolocation");
     // codeLatLng(latitude, longitude) 
        targetLocation = { 
            latitude: 22.2782151, 
            longitude:114.1734751
        }
        mapExecute(targetLocation);
            closest = closestLocation(targetLocation, data.Locations.Location);
            // console.log(closest);
    }
    //If geo location is not present
    function errorFunction() {
        function geoTest() 
        {
            if (google.loader.ClientLocation) {
            targetLocation = { 
                latitude: google.loader.ClientLocation.latitude,
                longitude: google.loader.ClientLocation.longitude 
            }
            mapExecute(targetLocation);
            closest = closestLocation(targetLocation, data.Locations.Location);
            // console.log(closest);
            } else {
                text = 'Google was not able to detect your location';
            }
            document.write(text);
        }
        geoTest();
    }
}
function mapExecute(targetLocation) {
    var currentLocation = new google.maps.LatLng(targetLocation.latitude,targetLocation.longitude)
    mapProp = { 
            center: new google.maps.LatLng(targetLocation.latitude,targetLocation.longitude), 
            zoom : 12 , 
            mapTypeId: google.maps.MapTypeId.ROADMAP 
    };

    map = new google.maps.Map(document.getElementById("googleMap"),mapProp);



    for (var i = 0; i < data.Locations.Location.length; i++) {
        var entity = data.Locations.Location[i];
        var myLatLng = new google.maps.LatLng(data.Locations.Location[i].latitude, data.Locations.Location[i].longitude);
        console.log("myLatLng", myLatLng);
        var mark = new google.maps.Marker({
            position: myLatLng,
            map: map
        });

        var name=data.Locations.Location[i].name;
        console.log("myname", name);
myToolTip(mark,name);
    }
    //calcRoute();
}


function calcRoute() {
  var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer();
        map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
        for (var i = 0; i < data.Locations.Location.length; i++) {
        var entity = data.Locations.Location[i];
        var myLatLng = new google.maps.LatLng(data.Locations.Location[i].latitude, data.Locations.Location[i].longitude);
         var mark = new google.maps.Marker({
            position: myLatLng,
            map: map,
        });
    }
}
function myToolTip(mark,name){
var infoWindow = new google.maps.InfoWindow();

google.maps.event.addListener(mark, 'mouseover', function() {
    infoWindow.setContent(name);
    infoWindow.open(map, mark);
    });
google.maps.event.addListener(mark, 'mouseout', function() {infoWindow.close();});
}

</script>

<body>
    <div id="googleMap" style="width:653px;height:250px;"></div>
</body>
</html>

标记悬停时的工具提示

1 个答案: