在Google地图中将本地图片添加为自定义标记

时间:2014-08-26 01:18:25

标签: javascript google-maps google-maps-api-3

我正在尝试使用谷歌地图创建自定义标记。

var iconBase = //some url;
var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: iconBase + 'marker.png'
});

这基本上有效。我在google驱动器中托管我的图片。它很好,但有点慢,在点击地图并渲染标记时第一次加载图像需要大约500-700毫秒。所以我试图在本地添加图像,遗憾的是,我似乎无法找到有关此图像的资源。如何使用本地(在我的项目目录中)图像?

假设我把它放在与我的php文件相同的目录级别的文件夹“icons”中,我称之为谷歌地图服务,如果这有帮助的话。谢谢!

更新!

我试过了:

maker = new google.maps.Marker({
              position: location,
              map: globalMap,
              icon : "pubIcons/male-2.png"
            }); 

其中 pubIcons 是与我渲染地图的php文件位于同一目录中的文件夹。 我收到这个错误:

GET http://localhost/bims-2.0/index.php/location/view/pubIcons/male-2.png 404 (Not Found) 

它的行为类似 pubIcons / male-2.png 是我的控制器“视图”中的一个动作,我正在使用Yii btw。

3 个答案:

答案 0 :(得分:5)

试试这段代码:)

var image = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q";
var marker = new google.maps.Marker({
        position: location,
        map: globalMap,
        icon: image
});

更新

var image  = "http://yourdomain.com/image/image.php";

icon : "/pubIcons/male-2.png"

答案 1 :(得分:0)

我也遇到了这个问题,但是以不同的方式解决了这个问题。我将Django用于我的Web框架,而Django使用名为static的目录。不知道该目录是否可以在Django之外使用。我将图片加载到我的静态文件中,并在网页的body标签中添加了代码

  

<div style="display:none">

    `<img src="{% static 'map/CrocMarker_45.png' %}" alt="Croc Marker" id="crocMark">`
     

</div>

在这种情况下,我将显示设置为无,因为我不想在body标签中渲染图片,只想加载它以便可以在我的地图脚本中访问它。

在我的function initMap()中创建变量 var crocMark=document.getElementById("crocMark").src;

稍后,当您创建标记时,只需将图标设置为此变量即可。例如:

  

var XMarker=new google.maps.Marker({ position: location, map: map_name, icon: crocMark });

这可能不是最好的方法,但是它对我很有用,我希望它也对您有用。

编辑:请注意,如果不清楚,这是我的项目结构。

Project Root "Django">Django Root "Django_Project">My apps e.g. "map">static>map

答案 2 :(得分:0)

icon的{​​{1}}参数需要一个URL。通过指定google.maps.Marker,您提供的是相对于您所在页面的相对URL。

如果要从本地文件系统中指定文件,则需要使用文件URL,例如:"pubIcons/male-2.png"或文件在本地文件系统上的任何位置。当然,只有从本地计算机加载javascript时,您才能访问本地文件。

完整示例:

"file:///var/www/pubIcons/male-2.png"