1

我只是想用动态变化的地址（取自数据库）嵌入谷歌地图，但我想保留在 http.map 中。每次我尝试嵌入地图时，它都会加载，但会向控制台发送几个错误（同一错误的 60 多次迭代）：

Unsafe JavaScript attempt to access frame with URL http://mydomain.com from frame with URL https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=address&z=14&output=embed. 
The frame requesting access has a protocol of 'https', the frame being accessed has a protocol of 'http'. Protocols must match.

我该如何解决？我的 iframe 代码：

document.getElementById("deMap").src = 'http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q='+arr[5]+'&hnear='+arr[5]+'&z=14&output=embed';

相关HTML：

    <div id="deRight">
        <iframe id="deMap" width="405px" height="150px" style="background-color:rgba(0,0,0,.5)"></iframe><br>Contact Info:<br>
        <div id="deContact"></div><br>
        Additional Info.:<br>
        <div id="deInfo"></div>
        <div class="footer" style="width:410px">
            <hr style="width:100%; height:1px; background-color: #CCC; border:0px; margin: 0px; margin-bottom:5px"/>
            <button class="formBtn" onclick="editEvt()">Edit Event</button>
        </div>
    </div>
4

2 回答 2

1

I believe you need to change your iframe to a div. Then include the following script in your header:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

Depending on what you want to do with the addresses in your database and how they are formatted, there are several directions you can go from here. One example is if you had text addresses and wanted to center the map on them. You could do that as follows:

  1. Load the Google Maps API and create your Geocoder object.
  2. Create your map object and use it to fill your div. As in your code, height and width must be set explicitly: <div id="deMap" style="width: 405px; height: 150px;"></div>.
  3. Query the Geocoder object to get address coordinates.
  4. Center the map, etc.

See below:

// Step 1
var G = google.maps;
var geocoder = new G.Geocoder();

// Step 2
var deMap = document.getElementById('deMap');
var center = new G.LatLng(0, 0);
var mapOptions = {
    zoom: 14,
    center: center,
    mapTypeId: G.MapTypeId.ROADMAP
};
map = new G.Map(deMap, mapOptions);

// Step 3
function changeAddress(address) {
    geocoder.geocode({'address': address}, parseResult);
}

// Step 4
function parseResult(res, status) {
    if (status == G.GeocoderStatus.OK && res.length) {
        var latlng = res[0].geometry.location;
        map.set_center(latlng);
    }
    else {
        alert("Geocode was not successful for the following reason: " + status);
    }
}

For more information, consult Google Maps JavaScript API, which is thoroughly documented here.

You can also see how I implemented it to accomplish a seemingly similar task here.

于 2013-01-15T17:35:07.373 回答
0

我不知道为什么，但是将“source=embed”更改为“output=embed”似乎可以解决我的问题。我仍然得到相同的 JavaScript 错误，但地图加载并完美运行。

于 2013-02-20T16:06:01.883 回答