设置使用 jQuery 加载的图像的宽度和高度答案

【问题标题】：Set width and height of an image loaded with jQuery设置使用 jQuery 加载的图像的宽度和高度
【发布时间】：2016-12-25 09:54:00
【问题描述】：

我使用jQuery 在我的网页上加载图像，如下所示：

$(function () {
    $('#mySelect').change(function () {
        var selectedCity = $('#mySelect').val();
        var myLatLng = new google.maps.LatLng(eval(selectedCity).lan, eval(selectedCity).lng);
        venueMap.setCenter(myLatLng);
        image = 'img.png';
        marker = new google.maps.Marker({
            position: myLatLng,
            map: venueMap,
            icon: image
        });
        marker.setMap(venueMap);
    });
});

如何设置图片的宽度和高度？

我试过了 image.width = 100; 和 image.height = 50;（作为 js 语句）没有成功。

问我相关的 HTML 代码：

....
<body>
        <center>
            <h2>Testing jQuery with Google Maps</h2>
            <br>
            <br>
            <select id="mySelect">
                <option value="Rome">Rome</option>
                <option value="London">London</option>
            </select>
            <br>
            <br>

            <div id="map"></div>
        </center>
    </body>
.....

【问题讨论】：

请发布您的相关 html 代码 - 您必须设置 html 元素的大小

标签： javascript jquery google-maps google-maps-markers

【解决方案1】：

您可以添加图片的其他属性，如谷歌地图上显示的Documentation

    var image = {
      url: 'image.png',
      // This marker is 20 pixels wide by 32 pixels high.
      size: new google.maps.Size(20, 32),
      // The origin for this image is (0, 0).
      origin: new google.maps.Point(0, 0),
      // The anchor for this image is the base at (0, 32).
      anchor: new google.maps.Point(0, 32)
    };

希望这会有所帮助。

【讨论】：

【解决方案2】：

对于 jQuery，你可以使用 prop 函数：

$(element).prop('width', 100);
$(element).prop('height', 50);

其中 $(element) 是图像标签的选择器。 prop() 的第一个参数是属性/属性的名称，第二个参数是属性的新值。

对于纯 JavaScript，你需要选择元素，然后将属性更改为：

document.getElementById('img').width = 100;
document.getElementById('img').height= 50;

其中 'img' 是图像的 ID。您还可以使用其他选择器，例如 getElementsByClassName 或 getElementsByName。

【讨论】：

【解决方案3】：

您可以使用选择查询来选择任何元素，例如 $('#image-id') ..css() 函数用于在特定元素中设置 css 样式。传递 css() 函数内部的值。

$('#map').css({'height':'50px;','width':'50px;'}); 。 map 是特定 image 元素的 ID。

$(function () {
    $('#mySelect').change(function () {
        var selectedCity = $('#mySelect').val();
        var myLatLng = new google.maps.LatLng(eval(selectedCity).lan, eval(selectedCity).lng);
        venueMap.setCenter(myLatLng);
        image = 'img.png';
        marker = new google.maps.Marker({
            position: myLatLng,
            map: venueMap,
            icon: image
        });
        marker.setMap(venueMap);
    });


$('#map').css({'height':'50px;','width':'50px;'});
});

【讨论】：

我要调整大小的图片没有ID。
已更新，立即尝试。
地图在<div id="map"></div> 元素内，对吧？
是的，@Mohammad Faisal 的解决方案运行良好。