如何为DIV添加背景图片，谷歌地图自定义控件答案

【问题标题】：How add a background picture for a DIV, Google maps Custom Controls如何为DIV添加背景图片，谷歌地图自定义控件
【发布时间】：2011-10-19 12:31:11
【问题描述】：

我正在尝试为 google 的自定义控件创建图像。当我在 css 中分配背景图片时，它会中断，否则它可以工作。

var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


var myLocationControlDiv = document.createElement('DIV');

var controlUI = document.createElement('DIV');
//controlUI.style.borderWidth = '20px';
//controlUI.style.backgroundColor = 'black';
//controlUI.style.borderStyle = 'solid';
//controlUI.style.cursor = 'pointer';

//controlUI.style.backgroundImage = "url(/img/icons/pin.png)";

controlUI.title = 'Click to set the map to Home';
myLocationControlDiv.appendChild(controlUI);

map.controls[google.maps.ControlPosition.TOP_LEFT].push(controlUI);

您也可以在这里查看：http://jsfiddle.net/k3Jjw/

【问题讨论】：

标签： image html css background google-maps-api-3

【解决方案1】：

两个简单的问题：

您的控件需要明确的高度和宽度 - 背景图像不会导致 DIV 增长以适应它们。
您使用的图片网址不存在（我得到 404）。

如果您使用以下代码，您应该会在左上角看到一个图像控件：

var controlUI = document.createElement('DIV');
controlUI.style.cursor = 'pointer';
controlUI.style.backgroundImage = "url(http://dummyimage.com/100x100)";
controlUI.style.height = '100px';
controlUI.style.width = '100px';
controlUI.title = 'Click to set the map to Home';
myLocationControlDiv.appendChild(controlUI);

发布 JSFiddle 链接做得很好 - 它让这个问题很容易回答。

【讨论】：