Question

我正在使用Instagram和Google API。我试图通过存储Instagram图像中的经度和纬度，从instagram创建缩略图图像来替换Google地图上的标记。我可以使标记可点击以显示图像，但我想替换标记以显示小缩略图（类似于instagram地图函数http://www.topnews.in/files/instagram-photo-map.jpg）

这是我的代码;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <?php


    $lat = "";
    $long = "";


    function getMarkers(){
    global $lat ;
    global $long ;
     $request  ="https://api.instagram.com/v1/media/search?        lat=".$lat."&lng=".$long."&access_token=__";

                $crl = curl_init(); //creating a curl object
                $timeout = 10;  //so it stops getting info after failing for more than number
                curl_setopt ($crl, CURLOPT_URL, $request);
                curl_setopt ($crl, CURLOPT_RETURNTRANSFER, 1);
                curl_setopt ($crl, CURLOPT_CONNECTTIMEOUT, $timeout);
                $json = curl_exec($crl); //perhaps should be called $xml_to_parse!
                curl_close($crl); //closing the curl object

                $json1 = json_decode($json, true); 
                $json2 = json_decode($json); 

                  //$decodeSearch =  json_decode($searchlocation,     true);
                  //$searchlocation =  $instagram-    >mediaSearch("","","","",20);

                $dataCount = count($json2->data);
                $dataObjects = $json2->data;


                foreach($dataObjects as $currentObject) {
                echo "[".$currentObject->location->latitude.",".$currentObject-    >location->longitude.",'".$currentObject->images->low_resolution->url."'],";
                }
            }// close function



?>

    <!-- this key belongs to Tamsin! -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?    key=__&sensor=false">
    </script>

    <script type="text/javascript">
    var map;
    var marker;
    var markersArray = [<?php getMarkers(); ?>];

    function initialize() {
    var infoWindow = new google.maps.InfoWindow;
    var myLatLong = new google.maps.LatLng(<?php echo "".$lat.",".$long.""; ?>);
    var mapOptions = {
        center: myLatLong,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
    // loop around markersArray
    for(var i = 0; i < markersArray.length; i++){
    var html = "<img src='"+markersArray[i][2]+"' />";//url
    myLatLong = new google.maps.LatLng(markersArray[i][0],markersArray[i][1]);
    marker = new google.maps.Marker({
        position: myLatLong,
        map: map,
        });
     bindInfoWindow(marker, map, infoWindow, html);
    }
  }

     function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, this);
  });
  }

  </script>
 </head>

Answer 1

您可以在Google地图上使用Custom Markers。

您可以从可用库中选择一个图标，也可以使用您自己的图片网址作为标记，例如Instagram图片网址，如下所述：

var marker = new google.maps.Marker({
  map: map,
  position: myLatLng,
  animation: google.maps.Animation.DROP,
  icon: {
    url: 'http://distilleryimage10.s3.amazonaws.com/ee6a320caaa711e2b60722000a9f09f0_5.jpg',
    size: new google.maps.Size(32, 32),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(16, 16),
    scaledSize: new google.maps.Size(32, 32)
  }
});

请查看Complex Icons文档，了解有关标记大小和位置属性的更多信息，例如我在上面使用的图标大小调整为32x32像素。

用Instagram图片替换谷歌地图标记

1 个答案: