Question

我正在拉一个用户的位置并将其显示在我保存的图标的地图上。我保存的图标太大，所以我试图用CSS调整它的大小，但我不知道如何将svg加载到js文件中。我不确定是否应该像我一样在html文档或js文件中加载svg文件。

我尝试将图标加载到html文件中，给它一个id，然后使用.getElementById将其添加到js文件中，然后在css文件中添加css样式但由于某些原因无效。不过，我不确定我是否做错了做错了。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 12,
    disableDefaultUI: true
  });

  // User Location Icon
  var userLocationIcon = 'img/SVG/User_Location.svg';

  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      //Centers map to current position  
      map.setCenter(pos);

      //Sets icon to current position
      var currentLocation = new google.maps.Marker({
        position: pos,
        map: map,
        icon: userLocationIcon
      });

    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
                        'Error: The Geolocation service failed.' :
                        'Error: Your browser doesn\'t support geolocation.');
}

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#map {
	height: 100%;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/app.css">
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript" src="js/app.js"></script>
    </script>
  </body>
</html>

Answer 1

我认为使用基本API不支持，因为地图位于iframe中，默认情况下其元素不会继承您的CSS。

然而，我发现这是一个使用外部库的解决方案。

var marker = new MarkerWithLabel({
    position: myMap.getCenter(),
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 0, //tamaño 0
    },
    map: myMap,
    draggable: true,
    labelAnchor: new google.maps.Point(10, 10),
    labelClass: "label", // the CSS class for the label
});

http://codepen.io/diana_aceves/pen/HjKdx

还有RichMarker。

这两个插件都可以在这里找到：http://googlemaps.github.io/libraries.html

不幸的是，github已经失败了。

我可以为javascript元素添加css样式吗？

1 个答案: