谷歌映射 Javascript API v3 自定义标记未显示在离子应用程序上答案

【问题标题】：Google maps Javascript API v3 custom markers not shown on ionic app谷歌映射 Javascript API v3 自定义标记未显示在离子应用程序上
【发布时间】：2017-09-13 12:10:16
【问题描述】：

我正在使用 google maps javascript API v3 在我的 Ionic 1 应用程序中实现带有一些标记的地图。我想为这些标记使用自定义图像。当我在我的电脑上的 chrome 上尝试应用程序时，标记显示没有问题，但是当我在 iOS 或 Android 设备上尝试时，标记不会出现。

这是我的功能：

function setUserMarkers(locations) {

        var image = {
          url: '/images/user_pin.png',
          // This marker is 30 pixels wide by 50 pixels high.
          scaledSize: new google.maps.Size(30, 50),
          // The origin for this image is (0, 0).
          origin: new google.maps.Point(0, 0),
          // The anchor for this image is the base of the flagpole at (15, 30).
          anchor: new google.maps.Point(15, 50)
        };

        var bounds = new google.maps.LatLngBounds();  

        for (var i = 0; i < locations.length; i++) {
            var site = locations[i];
            var myLatLng = new google.maps.LatLng(site.address_latitude, site.address_longitude);

            var contentString = '<p>' + site.account_site_type_description +'</p>';
            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image,
                title: site.account_site_type_description,
                zIndex: site.id
            });

            marker.addListener('click', function() {
                infowindow.open(map, marker);
            });
            marker.addListener('dblclick', function() {
                navigateToMap(site.address_latitude, site.address_longitude);
            });

            if (locations.length === 1) {
                map.setCenter(marker.getPosition());
            } else {
                bounds.extend(myLatLng);
                map.fitBounds(bounds);
            }
        }
    }

有人可以帮我吗？

【问题讨论】：

标签： javascript google-maps-api-3 ionic-framework

【解决方案1】：

您从根目录引用标记 url，以 / 开头，这不适用于 Cordova。您应该为图像使用一些相对路径，例如 url: 'images/user_pin.png'

【讨论】：

【解决方案2】：

您的文件路径引用自动相对于“www”文件夹。

因此，如果您依赖自定义图标代替常规气球标记，请在“www”文件夹内创建一个“assets”文件夹并以这种方式引用这些图标：

var image = 'assets/darkgreen_Marker.png';

【讨论】：